1. Multiple axes
1.1 Simple multi-axis
Effect:
const option = {
* / / * illustration
legend: {data: ['Number of students'.'Employment']},
/ * hint * /
tooltip: {},/ * x * /
xAxis: {data: ['html'.'css'.'js']},/* Y-axis * yAxis is set to an array, where each element stores the configuration of each axis * name Coordinate axis name * min scale minimum * Max scale maximum * */
yAxis:[
{max:100}, {},/* series list series * yAxisIndex Index position of the Y-axis corresponding to the current series * */
series:[
{
name:'Number of students'.type:'bar'.data: [30.20.40].yAxisIndex:0
},
{
name:'Employment'.type:'bar'.data: [330.450.850].yAxisIndex:1}};Copy the code1.2 Complex multi-axis
Effect:
The main thing to do is to set min, Max, and interval values for each Y-axis as follows
/* * * data1 volume series data * datA2 profit series data */
const data1=[50.12.16.11.16.20];
const data2=[-150.120.160, -110.160.1000];
// Ideal number of rows (actual number of rows will vary)
let rowNum=6;
/* Data extreme * max1 maximum volume data * max2 maximum profit data * MIN1 minimum volume data * min2 minimum profit data * */
let max1=Math.max(... data1);let max2=Math.max(... data2);let min1=Math.min(... data1);let min2=Math.min(... data2);/* Extreme ratio */
const rat1=min1/max1;
const rat2=min2/max2;
/* Ratio size comparison */
const ratState=rat1>rat2;
/* Set minimum * If the minimum ratio of series 1 is greater than the minimum ratio of series 2, let the minimum of series 1 be equal to its maximum multiplied by the extreme ratio of series 2 * Otherwise, let the minimum of series 2 be equal to its maximum multiplied by the extreme ratio of series 1. * Because the number of rows must be the same! * * /
if(ratState){
min1=rat2*max1;
}else{
min2=rat1*max2;
}
/* * inter1 line height of sales * * inter2 line height of profits * */
let inter1=Math.ceil((max1-min1)/rowNum);
let inter2=Math.ceil((max2-min2)/rowNum);
console.log(inter1,inter2);
/* Fine-tune the extreme value */
min1=Math.floor(min1/inter1)*inter1;
max1=Math.ceil(max1/inter1)*inter1;
min2=Math.floor(min2/inter2)*inter2;
max2=Math.ceil(max2/inter2)*inter2;
/ / method
/* Find the number of rows */
const maxRowNum=Math.max(max1/inter1,max2/inter2);
const minRowNum=Math.min(min1/inter1,min2/inter2);
/* Extreme fine tuning */
min1=inter1*minRowNum;
max1=inter1*maxRowNum;
min2=inter2*minRowNum;
max2=inter2*maxRowNum;
2 / / method
const rowNum1 = (max1-min1)/inter1;
const rowNum2 = (max2-min2)/inter2;
rowNum = Math.max(rowNum1,rowNum2);
if(rowNum! =rowNum1){1 / / adjustment
max1 = rowNum1*inter1;
}else if(rowNum! =rowNum2){2 / / adjustment
max2 = rowNum2*inter2;
}
Copy the codeThen will min1 respectively, max1 inter1, min2, max2, inter2 value is assigned to two y
2. Asynchronous data
Effect:
2.1 setOption after data request is received
const myChart = echarts.init(document.getElementById('main'));
fetch('./data/China.json')
.then((res) = > res.json())
.then(data= > {
/* Register map */
echarts.registerMap('china', data);
/* Configuration item */
const option = {
title: {
text: 'Map of China'.left:'center'
},
series: {
type: 'map'.map: 'china'}};/* Displays charts based on configuration items */
myChart.setOption(option);
})
Copy the code2.2 What is setOption configured first? Append Option after data is requested
const myChart = echarts.init(document.getElementById('main'));
/* What is configured first */
myChart.setOption({
title: {
text: 'Map of China'.left:'center'}}); myChart.showLoading() fetch('./data/China.json')
.then((res) = > res.json())
.then(data= > {
myChart.hideLoading()
/* Register map */
echarts.registerMap('china', data);
/* After the request to data, add configuration */
myChart.setOption({
series: {
type:'map'.map:'china',}}); })Copy the code3. The data set
3.1 Simple Use
Effect:
// Initializes the echarts instance based on the prepared DOM
const myChart = echarts.init(document.getElementById('main'));
/ / the data source
const source=[
['Big front end'.'Number of students'.'Employment'],
['html'.30.40],
['css'.20.30],
['js'.40.50]]/ * const source = [{' big front ':' HTML ', 'learning number: 30,' employment: 40}, {' big front ':' CSS ', 'learning number: 20,' employment: 30}, {' big front end ':'js',' learning number ':40,' employed number ':50},]*/
// Specify the chart configuration items and data
const option = {
* / / * illustration
legend: {},/* * dataset * source data source [] * */
dataset:{source},
/*x axis * type Axis type * category axis, discrete data * value value axis, continuous data * */
xAxis: {type:'category'.// data:['html','css','js']
},
yAxis: {type:'value'
},
/* Series list */
series:[
{
// name:' number of students ',
type:'bar'./ / data: (30, 40)
},
{
type:'bar'}]};// Display the chart using the configuration items and data you just specified.
myChart.setOption(option);
Copy the code3.2 Row and Column Mapping
Effect:
/ / the data source
const source=[
['Big front end'.'Number of students'.'Employment'],
['html'.20.25],
['css'.10.15],
['js'.30.40]].// Specify the chart configuration items and data
const option = {
legend: {},
tooltip: {},
/* * DATASET dataset * source data source [] * seriesLayoutBy row mapping * COLUMN based column mapping * ROW based row mapping * */
dataset: {
source,
},
/*grid [{},{}] Create multiple grids in an echarts instance and set their position * bottom bottom margin, e.g. '55%' * top top margin, e.g. '55%' * */
grid:[
{bottom:'55%'},
{top:'55%'}]./* Create two x axes belonging to two grids * type axis type, such as category * gridIndex plot index position * */
xAxis: [{type: 'category'.gridIndex:0},
{type: 'category'.gridIndex:1}]./* Create two y-axes belonging to two grids */
yAxis:[
{type:'value'.gridIndex:0},
{type:'value'.gridIndex:1}]./* * series * type Chart type * seriesLayoutBy column mapping * Column mapping, default * ROW row mapping * xAxisIndex x index * yAxisIndex Y index * */
series: [{type: 'bar'},
{type: 'bar'},
{
type: 'bar'.xAxisIndex:1.yAxisIndex:1.seriesLayoutBy:'row'
},
{
type: 'bar'.xAxisIndex:1.yAxisIndex:1.seriesLayoutBy:'row'
},
{
type: 'bar'.xAxisIndex:1.yAxisIndex:1.seriesLayoutBy:'row'}]};Copy the code3.3 Dimension Mapping
Effect:
/ / the data source
const source=[
['html'.20.25],
['css'.10.15],
['js'.30.40]].// Dimensions map
const dimensions=[null, {name:'Number of students'}, 'Employment'];
// Specify the chart configuration items and data
const option = {
legend: {},
tooltip: {},
dataset: {source,dimensions},
xAxis: {type: 'category'},
yAxis: {},
series: [{// name:' class number ',
type: 'bar'}, {type: 'bar',}]};Copy the code3.4 Coding Mapping
If you just want to show the number of jobs, you can use the code mapping effect:
// Dimension mapping
const dimensions=['Big front end'.'Number of students'.'Employment'];
/ / the data source
const source =[
['html'.20.25],
['css'.10.15],
['js'.30.40]];Copy the code// Specify the chart configuration items and data
const option = {
title: {text: dimensions[0].left:'center'
},
legend: {},tooltip: {},dataset: {dimensions,source},
/* Sets the category axis and value axis */
xAxis: {type:'category'},
yAxis: {type:'value'},
/ * encode encoding mapping * x x axis dimension * * y y dimension seriesName series, n | | [n] / n, m,... * tooltip message, n | | [n] / n, m,... * * /
series: {type:'bar'.encode: {// seriesName:2,
// x:0,
x:'Big front end'.// y:2,
y:'Employment'.tooltip: [1.2]}}};Copy the code3.5 Encoding extension mapping
Effect:
/ / configuration items
let option=null;
// Request data asynchronously
fetch('./lib/table.json')
.then((res) = > res.json())
.then(data= > {
// Display data
show(data);
});
function show(data){
let sizeValue = '57%';
let symbolSize = 5;
option = {
/ / hint
tooltip: {},/* Create four drawing areas */
grid: [{right: sizeValue, bottom: sizeValue},
{left: sizeValue, bottom: sizeValue},
{right: sizeValue, top: sizeValue,bottom:'10%'},
{left: sizeValue, top: sizeValue,bottom:'10%'}]./ * x * /
xAxis: [
/* * type coordinate axis type * value Value axis, applicable to continuous data * category axis, applicable to discrete category data * time axis * log logarithm axis * gridIndex Index of the grid where the X axis is located, The default value is the first grid * name axis name * axisLabel Settings for axis calibration labels * rotate Angle for the calibration labels * interval Display interval for axis calibration labels. * 0 forces display of all labels * 1 displays one label at a time * boundaryGap boundaryGap * false has no gap * true has gap * */
{type: 'value'.gridIndex: 0.name: 'income'.axisLabel: {rotate: 50}},
{type: 'category'.gridIndex: 1.name: 'countries'.axisLabel: {rotate: 50,}},
{type: 'category'.gridIndex: 2.name: 'countries'.axisLabel: {rotate: 50}},
{type: 'value'.gridIndex: 3.name: 'life'.axisLabel: {rotate: 50}}].yAxis: [{type: 'value'.gridIndex: 0.name: 'life'},
{type: 'value'.gridIndex: 1.name: 'income'},
{type: 'value'.gridIndex: 2.name: 'population'},
{type: 'value'.gridIndex: 3.name: 'population'}].dataset: {
/* * dimensions map [] * string, such as 'someName', equivalent to {name: 'someName'} * Object * name String * type Type * number, default, indicates common data. * ordinal, 'ordinal' for string data, such as class, text, if you want to use it on the number line *... * * /
dimensions: ['income'.'life'.'population'.'countries'.'years']./* Data source */
source: data
},
series: [
/* * type Diagram type * Scatter diagram * symbolSize Scatter size * xAxisIndex X axis index bit * yAxisIndex Y axis index bit * encode encoding map * x x coordinate dimension map * y * tooltip tip mapping * itemStyle itemStyle * opacity * */
{
type: 'scatter'.symbolSize: symbolSize,
xAxisIndex: 0.yAxisIndex: 0.encode: {
x: 'income'.y: 'life'.tooltip: [0.1.2.3.4]},itemStyle: {opacity:0.3}}, {type: 'scatter'.symbolSize: symbolSize,
xAxisIndex: 1.yAxisIndex: 1.encode: {
x: 'countries'.y: 'income'.tooltip: [0.1.2.3.4]},itemStyle: {opacity:0.3}}, {type: 'scatter'.symbolSize: symbolSize,
xAxisIndex: 2.yAxisIndex: 2.encode: {
// x: 'income ',
x: 'countries'.y: 'population'.tooltip: [0.1.2.3.4]},itemStyle: {opacity:0.3}}, {type: 'scatter'.symbolSize: symbolSize,
xAxisIndex: 3.yAxisIndex: 3.encode: {
x: 'life'.y: 'population'.tooltip: [0.1.2.3.4]},itemStyle: {opacity:0.3}}};Copy the code4. Area scaling
Effect:
/ / the data source
const source = [
//x y z
[2.1.5],
[4.2.10],
[6.3.15],
[8.4.20],
[10.5.25],
[12.6.30],
[14.7.35],
[16.8.40],
[18.9.45]];const option = {
tooltip: {},
/* Toolbox * feature{} * dataZoom{} box selection zoom zoom * */
toolbox: {feature: {dataZoom: {}}}./* * x axis * min min * dataMin Max * dataMax Max * */
xAxis: {
type: 'value'.min: 'dataMin'.max: 'dataMax',},yAxis: {
type: 'value'.min: 'dataMin'.max: 'dataMax',},/* * dataZoom area zoom [{},{}] * type zoom mode * inside * slider scale * xAxisIndex scale on which x axis * yAxisIndex scale on which y axis * start start bit, 100% [0,100] * end bit, 100% [0,100] * */
dataZoom:[
{
type:'inside'.// start:50,
// end:80
},
{
type:'slider'.yAxisIndex:0
},
{
type:'slider'.xAxisIndex:0},]./* Data set */
dataset:{source},
/* Series list */
series: [{type: 'scatter'.symbolSize: function (param) {
return param[2]; }}},];Copy the code5. Visual mapping
Effect:
/* * visualMap {} * type * continuous * piecewise * min The starting position of the mapping interval, such as the receiving position of the 0 * Max mapping interval, For example, whether 90 * calculable is to display the handle for dragging, it is only applicable to display items within this range of continuous * range []. * inRange custom color range * color[] color map * symbolSize[] size map * * for example * */
visualMap: {type:'continuous'.min:0.max:100.calculable:true./ / range: [1, 9],
// dimension:1,
inRange: {// color:['#00acec','orange','green'],
symbolSize: [0.100].colorHue: [0.360]}},Copy the code6. The event
6.1 Mouse Events, take Click as an example
Echarts definition:
The mouse event parameters are the attributes of the event object’s data. For graph click events, the basic parameters are as follows, while other charts such as pie charts may have some additional parameters. For example, pie charts will have the percent attribute representing the percentage, as described in params of the label Formatter callback function for each chart type.
{
// The name of the component to which the currently clicked graphic element belongs,
// The value can be 'series', 'markLine', 'markPoint', 'timeLine', etc.
componentType: string,
// Series type. The values can be: 'line', 'bar', 'pie', etc. Makes sense when componentType is 'series'.
seriesType: string,
// Series index in the passed option.series. Makes sense when componentType is 'series'.
seriesIndex: number,
// Series name. Makes sense when componentType is 'series'.
seriesName: string,
// Data name, category name
name: string,
// The index of the data in the passed data array
dataIndex: number,
// The raw data item passed in
data: Object.// Sankey and graph contain both nodeData and edgeData.
// dataType will be 'node' or 'edge', indicating whether the current click is on node or edge.
// Most other charts have only one type of data, dataType is meaningless.
dataType: string,
// The data value passed in
value: number|Array.// The color of the data graph. Makes sense when componentType is 'series'.
color: string,
// User-defined data. Only in Graphic Component and Custom Series
{type: 'circle', info: {some: 123}}
info: *}Copy the codemyChart.on('click'.(param) = >{
console.log(param);
})
Copy the code6.2 Component Interaction
Take legendselectChanged as an example:
myChart.on('legendselectchanged'.(param) = >{
console.log(param);
})
Copy the code6.3 Triggering chart action: dispatchAction
Effect:
/* Use the dispatchAction method to highlight and prompt a sector * type Action type triggered * highlight highlight * showTip display prompt * downplay unhighlight * hideTip unprompt * seriesIndex Series index, used to find a series * dataIndex data all, used to find an element * */ in a series
myChart.dispatchAction({
type:'highlight'.seriesIndex:0.dataIndex:3
})
// myChart.dispatchAction({
// type:'showTip',
// seriesIndex:0,
// dataIndex:3
// })
// myChart.dispatchAction({
// type:'downplay',
// seriesIndex:0,
// dataIndex:3
// })
// myChart.dispatchAction({
// type:'hideTip',
// seriesIndex:0,
// dataIndex:3
// })
Copy the code7. The rich text
Effect:
/ / data
const data=[
{name:'Yang Jian'.value:80.img:'./images/yj.jpg'},
{name:'ruban'.value:60.img:'./images/lb.jpg'},
{name:'Shen Mengxi'.value:40.img:'./images/smx.jpg'},
{name:'Zhuge Liang'.value:30.img:'./images/zgl.jpg'}]; data.forEach(item= >{
/ * custom tag label * formatter text fragment * '{style name | text} \ n line' * the style of the text block * * textBorderWidth textBorderColor text stroke color text stroke width *... * Rich rich text, Write style * width width * height height * backgroundColor backgroundColor * image background image * fontSize text size * lineHeight lineHeight * fontWeight text bold *... * * /
item.label = {
formatter:'{img|}\n{name|'+item.name+'}\n'+'{val | strength:'+item.value+'} '.rich: {img: {width: 50.height: 50.backgroundColor: {image: item.img
}
},
name: {fontSize: 14.lineHeight: 20,}}}})/* Configuration item */
const option = {
title: {text:'Hero power'},
tooltip: {trigger: 'item'}
series: {
type: 'pie',
data,
radius:'70%',}};Copy the code