Some time ago, I was working on a large screen project , A lot of use echarts Chart , Large screen has high requirements for design specifications , And the big screen project , Often for business reasons 、 Or because of data changes UI Design , The code of all charts is also changed in three days 、 A big change in five days

therefore , There is a unified... In the project echarts Chart configuration , Can unify all chart styles , Easy to modify , If there is a need for special settings , Re instantiate echarts You can just override the general configuration or expand the configuration by yourself

General configuration

encapsulation EchartUtil Tool class , Easy access to general configuration , And some related methods

General configuration mainly includes :
A unified grid size ;
A unified title Heading styles ;
A unified series of color;
A unified legend Location , style ;
A unified x Axis 、y Axis 、tooltip Of formatter Method ;
A unified series style ( for example bar、line etc. );
Unified text font 、 size 、 Color settings ;

formatter in , Have used to rich Rich text , In order to show the effect , At present, it is textStyle, The color is red , font size 10, When formatting , Traversal string , If the current character is a number , Change the style to blue , font size 12


Here's a simple chart :

0、 Preparation :

1、vue Project introduction echarts

2、 Create... Of specified width and height DOM Containers

1、 Introduce tool classes

import echartUtil from "@/utils/echartUtil"
import "@/assets/js/china.js"

2、 initialization echart

let echart = this.$echarts.init(document.getElementById('echart1'));

3、 Read general configuration

let option = echartUtil.getEchartOption();

4、 get data

let serieData = [];
let xAxisData = [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday '];
let legendData = [
" clothes ",
" The trousers "
let metaDate = [

5、 Handle 、 Processing data

for (let i = 0; i < legendData.length; i++) {
let serie = echartUtil.getEchartOption().series;
if(i % 2 === 0){
serie.type = "bar";
serie.type = "line";
} = legendData[i]; = metaDate[i];

6、 Personalized configuration

option.tooltip.formatter = function (params) {
params["units"] = [" Pieces of "," strip "];
return echartUtil.getEchartOption().tooltip.formatter(params);
}; = " Company : Number "; = xAxisData; = legendData;
option.series = serieData;

7、 Charts use configuration


8、 Bind click event 、 And set up automatic carousel

echart.on("click", function (param) {
}); echartUtil.autoHover(echart);

The first chart below shows the effect of this simple example


Simple implementation of a common chart


echarts Chart , It's a common function in development , A good memory is better than a bad pen , I wish to record , So that we can draw later echarts There is a place to refer to the chart

Open source code

notes :admin The back-end database files are in admin Back end projects resources/sql Below directory

The code is open source 、 Trust to my GitHub、 Code cloud :


Code cloud :

PS: The code for this article is at the front end portal In the project

ECharts Chart —— More articles on encapsulating generic configurations

  1. Echarts Chart common function configuration ,Demo Example

    Let's take a look at the renderings first : As shown above , These are common basic configurations . Legend Pagination ,X Axis settings ,Y Axis settings , Bottom zoom bar settings , Value display style settings , Toolbox settings , Custom tool buttons , Binding click events and so on . All of these configuration codes are simple ...

  2. Echarts Local configuration of charts

    Preface Echarts It's a beautiful visualization tool , But a lot of friends first contact , I don't know how to create an include Echartst Chart local HTML Webpage , This article will introduce in detail Echarts Use process of . Use process steps It is divided into three parts ...

  3. 【 visualization 】DataV Access ECharts Chart Library Visualization tools, powerful cooperation

    DataV Access ECharts Chart Library Visualization tools, powerful cooperation Abstract : The combination of two sub products , And there are colored eggs at the end of the article . DataV Data visualization is behind the scenes of building the annual tmall double 11 battle screen ,ECharts It's popular data visualization ...

  4. angular2 Project about Echarts Chart processing

    stay NiceFish The project is about Echarts Components and instructions are registered directly in appModule In the root module , In this way, the route just needs to write so that the browser can load the icon component : stay chart In component view : <div class=&q ...

  5. vue table The problem of using multiple choice in a project ( How to save selected items after page turning ), linkage echarts Chart to achieve flow monitoring

    Traffic monitoring project requirements : According to the table data , Add multiple selection , Select all by default , Update chart view based on selected options 1. You need to select more than one form 2. To make a linkage chart , So the key is to use the trigger callback function of multiple choices in the table vue table Use multiple choice in : It's simple , just ...

  6. ECharts Chart plugin (4.x edition ) Use ( One 、 The diagram force The node is displayed as a custom image / picture , With category selection )

    Reading guide ECharts, A use JavaScript Open source visual Library of implementation , It can run smoothly in PC And mobile devices , Compatible with most current browsers (IE8/9/10/11,Chrome,Firefox,Safar ...

  7. ***ECharts Getting started with charts and best practices

    ECharts Data chart system ? 5 Minutes to go ! [ECharts brief introduction ] ECharts Open source comes from Baidu commercial front-end data visualization team , be based on html5 Canvas, It's pure. Javascript Chart Library , Provide intuitive , vivid , ...

  8. echart Introduction to chart control configuration ( Two ) Dynamic binding of common chart data

    Previous section <echart Introduction to chart control configuration ( One )> It introduces echarts Chart control entry configuration , So that developers can quickly build a static chart . But in the actual development process, this is not enough , It is impossible that all chart controls are static numbers ...

  9. echart Introduction to chart control configuration ( One )

    Now the mainstream web Chart controls mainly include hightchart.fusionchart.echart: echart As Baidu's front-end Department recently launched a platform based on html5 Free Chart Control for , With its rich chart types and good compatibility, we get ...

  10. be based on HTML5 Of WebGL Realization json and echarts The chart is shown in the same interface

    Suddenly there was an idea , If we can use different knowledge points to put them on the same interface , And put it in a box , So if I want to see something, I can show it directly , And this box must be able to open . I use HT Realized my idea , More than 100 lines of code , So little code ...

Random recommendation

  1. Words Spring Security Rights management ( Source code )

    Recent projects need to use Spring Security Permission control , So it took a little time to simply look at the source code related to its permission control ( Version is 4.2). AccessDecisionManager spring security ...

  2. [CareerCup] 3.7 Adopt Animal Adopt animals

    3.7 An animal shelter holds only dogs and cats, and operates on a strictly "first in, first out ...

  3. Extjs Tooltip Use of attributes

    Want to let tooltip To be effective, you have to :Ext.QuickTips.init();

  4. Linux Basic commands --- Compression and packaging

    GZIP: Ordinary files are packaged into gzip file :gzip filename( problem : How to test whether a file is gzip file ?) gzip Decompress the file into a normal file :gzip -d filename( side effect : original gz Papers will be ...

  5. SUSE10 Virtual machine installation and ORACLE 11g Installation

    SUSE10 Virtual machine installation and ORACLE install author : Zhang Xincheng All the parameters needed in this paper are in the appendix at the end of the paper One .SUSE10 Installation and creation of virtual machine New virtual machine installation Select next Select next Select next Select next Select next ...

  6. cocos2dx Realization gpu instancing

    be-all gpu instancing It's all in unity3d Implemented on the ,ue4 There should be little pressure to implement it. See below for related links : ...

  7. C++ LocalAlloc() &amp; LocalSize() &amp; LocalFree ()

    About LocalAlloc function, Reference resources : ...

  8. mysql Develop advanced series 36 Tools section mysqlshow( Database object view tool )

    One . summary mysqlshow Client Finder , It can quickly find out which databases exist , Tables in the database , A column or index in a table , and mysql The client tools are very similar , But some of the features are mysql What client tools don't have . mysqlshow Of ...

  9. js Of new Date() The use of dates

    <script type="text/javascript"> //js Get the number of days in a month function days(year,month){ var dayCount ...

  10. Can't connect to OPC The server [ No such interface support ( Exception from HRESULT:0x80004002(E_NOINTERFACE))]

    source : Can't connect to ABB Freelance OPC The server [ No such interface support ( Exception from HRESULT:0x80004002(E ...