1. Introduce echarts
·Introducing src directly into html
·ES imports from node_ module/echarts/echarts
·Generally, VAR ecrats = require ("ecrats");
2. js configuration
1. Echarts Initialize and bind container
var echarts = Echarts.init(document.getElementById('main'));
2. option Configuration item
var option = {
title: {
text: "Echarts Data statistics chart"
},
tooltip: {},
legend: {
name: "Data division" // Must be consistent with the name in serise below
},
xAxis: {
data: ["Android","IOS","PC","oPPer","mot","Ohter"]
},
yAxis: {
},
serise: [{
name: "Data division",
type: "line", // Chart types: treemap, pie, bar
data: [500,200,360,100,10, 1000] //y-axis data
}]
}
// When the data array of serise above is an object bar, it is generally used for pie chart and display area name
Example:
data: [
{value:500,name:'Android'},
{value:200,name:'IOS'},
{value:360,name:'PC'},
{value:100,name:'Ohter'}
]
3. Echarts Call configuration item option
echarts.setOption(option);
Color setting of graphic color block, taking pie chart as an example:
1. Overall setting of blocks
var option = {
serise: [{
data: [
{
value:310,
name:'Email marketing',
itemStyle: { // Block setting, normal with or without
normal: {
color: '#058f98 ', / / color setting
shadowBlur: 100, // shadow distance setting
shadowColor: '' // Projection color settings
},
},
label: { // Pie chart font color setting without normal
textStyle: {
color: '#058f98'
}
},
label: { // Pie chart font color setting with normal
normal: {
textStyle: {
color: '#058f98'
}
}
},
labelLine: { // Color setting of color block line corresponding to pie chart
normal: {
lineStyle: {
color: '#058f98'
}
}
},
},
]
}]
}
2.When there is only the change of light and shade (the depth of color) in the sector (other types of cylinder to be tested), a faster way is through visualMap Component maps the size of the value to shading.
var option = {
visualMap: {
// Don't display the visualMap component, only use it for light and shade mapping
show: false,
// The minimum mapping value is 80 -- > which means that the value of shading is not the value of block, and the following 600 is also the value of block
min: 80,
// The maximum mapping value is 600
max: 600,
inRange: {
// The range of light and shade is 0 to 1
colorLightness: [0, 1]
}
}
}
Two new themes introduced by Eckart: light and dark
Call method: Echart.init(dom, “light”);
Eckarts global and local palettes:
- The global color palette refers to adding a color array directly under the option, and the block area will get the colors in turn according to the sorting of the array. If a series of its own exclusive color palette (local color) is added, it is also a color attribute, and the color of the series itself is higher than the global primary color;
So the color of the block can be directly defined and added to the color attribute, and then it can be automatically fetched; - In pie chart, the color of block, text and line, and the color of corresponding font are all one-to-one correspondence by default. Generally, it is not recommended to adjust them
Good looking color recommendation:
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
Add highlight to the block or text (highlight is the color when the mouse passes, that is, the color when hover). Relevant code:
emphasis: {
show: true, // This attribute is required when defining label text highlighting, and is directly omitted when block highlighting;
color: "blue"
}
1. label lable:
lable: {
// Normal style / normal style
normal: {
show: true,
formatter: 'This is a normal label.'
},
// Highlight style
emphasis: {
show: true,
formatter: "This is a emphasis label." // Highlighted text
}
}
2.itemStyle: {
// Normal style
normal: {
color: 'red',
},
// Highlight style
emphasis: {
color: "yellow"
}
}
loading animation: loading
Eckarts has its own built-in loading methods: showLoading() and hideLoading();
var echart = Echarts.init(dom); echart.showLoading(); // Display loading called when data is not bound echart.hideLoading(); // After binding the data, the hidden loading is called.
Dynamic update of data -- > generate dynamic graph
ECharts is driven by data, and the change of data drives the change of chart presentation;
All data updates are realized through setOption. You only need to get data regularly and setOption fills in the data, regardless of the changes in the data. ECharts will find the differences between the two groups of data and then use appropriate animation to represent the changes in the data.
Managing data with dataset
Advantages: intuitive and easy to understand, as well as suitable for some special chart types of data type customization.
Disadvantages: in order to match this data input form, data processing is often required, and data segmentation is set to each series (and category axis). In addition, it is not conducive to multiple series sharing a single data, nor to the mapping arrangement of chart types and series based on the original data
option = {
legend: {},
tooltip: {},
dataset: {
// Provide a copy of the data.
source: [
['product', '2015', '2016', '2017'], // The next three strings in this group are equivalent to name representing different bar blocks
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// Declare an X-axis, category axis. By default, the category axis corresponds to the first column of the dataset.
xAxis: {type: 'category'},
// Declare a Y axis, a value axis.
yAxis: {},
// Declare multiple bar series. By default, each series will automatically correspond to each column of dataset.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
Or you can use the format of a common array of objects:
option = {
legend: {},
tooltip: {},
dataset: {
// The order of the dimension names is specified so that the default dimension to axis mapping can be used.
// If you do not specify dimensions, you can also specify series.encode Complete the mapping, see later.
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
Data to graph mapping (encode)
var option = {
dataset: {
source: [
['score', 'amount', 'product'], // This column corresponds to each data after it, similar to index i
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
xAxis: {},
yAxis: {type: 'category'}, // The definition of type directly determines whether the graphic presentation is horizontal or vertical
series: [
{
type: 'bar',
encode: {
// Map the column corresponding to the "amount" column in the source to the X-axis.
x: 'amount',
// The column corresponding to the "product" column in the source is mapped to the Y axis.
y: 'product' // Decide which column to render
}
}
]
};
// The type attribute + encode location of yAxis directly determines the presentation form of graphics
Map by row or column
Users can use the series layout by configuration item to change the chart's understanding of rows and columns. seriesLayoutBy can take value:
(1) 'column': default. The series is placed on the columns of the dataset.
(2) Row: the series is placed on the row of the dataset.
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'}, // Define the first distance from the bottom
{top: '55%'} // Define the second distance from the top
],
series: [
// These series correspond to each row of the dataset in the first rectangular coordinate system.
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// These series correspond to each column of the dataset in the second rectangular coordinate system.
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}
dimension
About dimensions:
When we map series to columns, each column is called a dimension, and each row is called an item. On the contrary, if we map series to table rows, each row is dimension and each column is item.
Dimensions can have separate names for easy display in the chart. Dimension name can be defined in the first row (or column) of dataset. For example, in the above example, "score", "amount" and "product" are dimension names. From the second line, it's the official data. dataset.source Whether the first row (column) in contains the dimension name or not will be automatically detected by ECharts by default. Of course, it can also be set dataset.sourceHeader: true indicates that the first row (column) is the dimension, or dataset.sourceHeader: false indicates that the first row (column) is data directly from the beginning.
var option1 = {
dataset: {
dimensions: [
{name: 'score'},
// It can be abbreviated to string, indicating the dimension name.
'amount',
// Dimension types can be specified in type.
{name: 'product', type: 'ordinal'}
],
source: [...]
},
...
};
var option2 = {
dataset: {
source: [...]
},
series: {
type: 'line',
// dimensions set up in the series will take precedence.
dimensions: [
null, // Nullable indicates that you do not want to set the dimension name
'amount',
{name: 'product', type: 'ordinal'}
]
},
...
};