ECharts from introduction to advanced 6000 words long, with pictures and texts

Keywords: Javascript Front-end html data visualization echarts

Echarts quick start

  1. Import the echorts.js file
  2. Prepare a box to present the chart
  3. Initialize the ecarts instance object
  4. Prepare configuration items
  5. Set the configuration item to the ecarts instance object
<div style='width: 600px; height: 400px;'></div>
<script src="./lib/echarts.js"></script>
<script>
  // Initialize the ecarts instance based on the prepared dom
  let myChart = echarts.init(document.querySelector('div'));
  // Specify configuration items and data for the chart
  let option = {
    title:{
      text:'ECharts Entry example',
      link:'https://jiaqicoder.com',
      textStyle:{
        color:'pink',
        fontStyle:'normal'
      }
    },
    xAxis:{
      type:'category', // Category axis
      data:['shirt','cardigan','Chiffon shirt','trousers'] 
    },
    yAxis:{
      type:'value', // Numerical axis
    },
    series:[{
      name:'sales volume',
      type:'bar', //line pie
      data:[5,10,15,20]
    }]
  }
    // Display the chart using the configuration item and data you just specified.
    myChart.setOption(option);
</script>

Related configuration:

  • xAxis: x axis in direct coordinate system
  • yAxis: y axis in rectangular coordinate system
  • Series: list of series. Each series determines its own chart type by type
  • title : Title component, including main title and subtitle.

General configuration

General configuration refers to the configuration that can be used by any chart.

title

  • Text style

    title:{
      text:'Performance display',
      textStyle:{
        color:'red',
        fontSize:'28px',
        fontWeight:800,
      },
    },
    
  • Title border

    borderWidth:5,
    borderColor:'blue',
    borderRadius:5
    
  • Title Position

    title:{
      text:'Performance display',
      textStyle:{
        color:'red',
        fontSize:'28px'
      },
    borderWidth:5,
    borderColor:'blue',
    borderRadius:5,
    left:100,
    top:20,
    },
    

    The value of top can be a specific pixel value such as 20, a percentage relative to the height and width of the container such as' 20% ', or' top ',' middle ',' bottom '.

    If the value of top is' top ',' middle ',' bottom ', the component will be aligned automatically according to the corresponding position.

Prompt tooltip

tooltip: prompt box component, which is used to configure the display box when the mouse slides over or clicks the chart.

  • Trigger type: trigger (optional)

    • 'item'

      Data item graph trigger is mainly used in scatter chart, pie chart and other charts without category axis.

    • 'axis'

      Coordinate axis trigger is mainly used in histogram, line chart and other charts that will use category axis.

    • 'none'

      Nothing triggers.

  • Trigger timing: trigger on (optional)

    • 'mousemove'

      Triggered when the mouse moves.

    • 'click'

      Triggered when the mouse clicks.

    • 'mousemove|click'

      Triggered when the mouse moves and clicks at the same time.

  • Formatting: formatter

    The prompt box floating layer content formatter supports two forms: String template and callback function.

    String template:

    Template variables include {a}, {b}, {c}, {d}, {e}, which respectively represent series name, data name, data value, etc. stay trigger When it is' axis', there will be multiple series of data. At this time, the index of the series can be represented by {a0}, {a1}, {a2}. The meanings of {a}, {b}, {c}, {d} under different chart types are different. Among them, variables {a}, {b}, {c}, {d} represent data under different chart types, with the following meanings:

    • Broken line (area) chart, column (bar) chart, K-line chart: {a} (series name), {b} (category value), {c} (value), {d} (none)
    • Scatter chart (bubble chart): {a} (series name), {b} (data name), {c} (numeric array), {d} (none)
    • Map: {a} (series name), {b} (area name), {c} (combined value), {d} (none)
    • Pie chart, dashboard, funnel chart: {a} (series name), {b} (data item name), {c} (value), {d} (percentage)
    tooltip:{
      trigger:'axis',// 'item'
      triggerOn:'click',
      formatter:'{b} What's your score {c}', //{b} (category value), {c} (value)
    }
    

    Callback function format:

    It supports returning HTML strings or creating DOM instances.

    The first parameter arg is the data set required by the formatter

    tooltip:{
      trigger:'axis',// 'item'
      triggerOn:'click',
      formatter:function(arg){
        console.log(arg); // You can print to see what the value is
        return `${arg[0].name}Your score is ${arg[0].data}`; // The return value will be presented in the page
      }
    },
    

Tool button toolbox

Built in five tools: export picture, data view, dynamic type switching, data area scaling and reset.

toolbox:{
  feature:{
    saveAsImage:{}, // Save as picture
    dataView:{}, //Data view
    restore:{}, // Reset function
    dataZoom:{}, // Area scaling
    magicType:{
      type:['line','bar']    // Switch chart type
    }
  }
},

legend

Legend: legend. It is used to filter series. It needs to be used with series.

  • The data in legend is an array
  • The value of data in legend must be consistent with the name value of a group of data in the series array
series: [
  {
    name: 'grade scores of Chinese',
    type: 'bar',
    data: [98, 88, 78, 80]
  },{
    name:'Mathematics achievement',
    data:[42,55,99,88],
    type:'bar'
  }
],
legend:{
  data:['grade scores of Chinese','Mathematics achievement'], // If the name in the series has a value, the data in the legend may not be written
}

Common charts for ECharts

  • bar chart
  • Line chart
  • Scatter diagram
  • Pie chart
  • Map
  • Radar chart
  • Instrument cluster diagram

Histogram

Implementation steps

  • The most basic code structure of ECharts:

    Introduce js file, set DOM container, initialize object, and set options

  • x-axis data:

    Data 1: ['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu']

  • y-axis data:

    Data 2: [88,92,79,79]

  • Chart type:

    Set type:bar under series

<body>
  <div style="width: 600px;height: 400px;"></div>
  <script src="./lib/echarts.js"></script>
  <script>

    let myCharts = echarts.init(document.querySelector('div'));
    myCharts.setOption({
      title: {
        text:'achievement'
      },
      xAxis: {
        type: 'category',
        data: ['Zhang San','Li Si','Wang Wu','Zhao Liu']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: 'achievement',
        data: [5, 10, 15, 20],
        type: 'bar'
      }],
    });
  </script>
</body>

Common effects

  • Marking:

  • Max min (mark points with markpoints)

    series: [{
      name: 'achievement',
      data: [5, 10, 15, 20],
      type: 'bar',
      markPoint:{
        data:[{
          type:'max',
          name:'Maximum'
        },{
          type:'min',
          name:'minimum value'
        }]
      }
    }]
    

  • Average value (markLine)

```js
series: [{
  name: 'achievement',
  data: [5, 10, 15, 20],
  type: 'bar',
  markPoint:{
    data:[{
      type:'max',
      name:'Maximum'
    },{
      type:'min',
      name:'minimum value'
    }]
  },
  markLine:{
    data:[
      {
        type:'average',name:'average value'
      }
    ]
  }
}],
```

![image-20210924114211478](https://img-blog.csdnimg.cn/img_convert/8c3d9ed360918c9ea879bfa349b9c3c5.png)
  • Display:

    • Value display (label)

      series: [{
        name: 'achievement',
        data: [5, 10, 15, 20],
        type: 'bar',
        markPoint:{
          data:[{
            type:'max',
            name:'Maximum'
          },{
            type:'min',
            name:'minimum value'
          }]
        },
        markLine:{
          data:[
            {
              type:'average',name:'average value'
            }
          ]
        },
        label:{
          show:true,
        }
      }],
      

    • Column width (barWidth)

      series: [{
        name: 'achievement',
        data: [5, 10, 15, 20],
        type: 'bar',
        markPoint:{
          data:[{
            type:'max',
            name:'Maximum'
          },{
            type:'min',
            name:'minimum value'
          }]
        },
        markLine:{
          data:[
            {
              type:'average',name:'average value'
            }
          ]
        },
        label:{
          show:true,
          position:'inside'
        },
        barWidth:'50%' // Adjust to 50% of the default width
      }],
      
    • Transverse histogram

      Change the histogram to horizontal:

      xAxis: {
        type: 'value'
      },
      yAxis: {
        data: ['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu'],
        type: 'category',
      }
      

Line chart

Implementation steps

  • The most basic code structure of ECharts:

    Introduce js file, set DOM container, initialize object, and set options

  • x-axis data:

    Data 1: ['January', 'February', 'March', 'April', 'may', 'June']

  • y-axis data:

    Data 2: [88,92,79,79,39,99]

  • Chart type:

    Set type: line under series

let myChart = echarts.init(document.querySelector('div'));
myChart.setOption({
  title:{
    text:'Master Kang instant noodle sales',
    textStyle:{
      color:'blue'
    }
  },
  xAxis:{
    data:['1 month','2 month','3 month','4 month','5 month','6 month'],
    type:'category'
  },
  yAxis:{
    type:'value',
  },
  series:{
    name:'Sales volume of Master Kang',
    type:'line',
    data:[35,29,38,88,69,89],
  },
  tooltip:{
    trigger:'item',
    formatter:'{b}Our sales volume is{c}'
  }
})

Common effects

  • sign

    • Max min markPoint

      series:{
        name:'Sales volume of Master Kang',
        type:'line',
        data:[35,29,38,88,69,89],
        markPoint:{
          data:[
            {type:'max'},
            {type:'min'}
          ]
        },
      },
      
    • Average markLine

      series:{
        name:'Sales volume of Master Kang',
        type:'line',
        data:[35,29,38,88,69,89],
        markPoint:{
          data:[
            {type:'max'},
            {type:'min'}
          ]
        },
        markLine:{
          data:[
            {type:'average'}
          ]
        }
      }
      

      [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (IMG ikyajfli-1632987640708) (C: \ users \ singhand \ appdata \ roaming \ typora \ user images \ image-20210924153332983. PNG)]

    • Label interval markArea

      series:{
        name:'Sales volume of Master Kang',
        type:'line',
        data:[35,29,38,88,69,89],
        markPoint:{
          data:[
            {type:'max'},
            {type:'min'}
          ]
        },
        markLine:{
          data:[
            {type:'average'}
          ]
        },
        markArea:{
          data:[
            [
              {xAxis:'1 month'}, // Start month
              {xAxis:'2 month'}, // End month
            ],
            [
              {xAxis:'3 month'}, // Start month
              {xAxis:'5 month'}, // End month
            ],
          ]
        }
      },
      

  • Line control:

    • smooth

      series:{
        name:'Sales volume of Master Kang',
        type:'line',
        data:[35,29,38,88,69,89],
        smooth:true
      },
      

    • Line style lineStyle

      series:{
        name:'Sales volume of Master Kang',
        type:'line',
        data:[35,29,38,88,69,89],
        smooth:true,
        lineStyle:{
          color:'green',
          type:'dotted', //solid dashed
        }
      },
      
    • Fill style areaStyle

      Note the difference between and markArea.

      series:{
        name:'Sales volume of Master Kang',
        type:'line',
        data:[35,29,38,88,69,89],
        smooth:true,
        lineStyle:{
          color:'green',
          type:'dotted', //solid dashed
        },
        areaStyle:{
          color:'pink'
        }
      },
      

      All codes: A Pen by liujiaqi222 (codepen.io)

    • Next to edge boundaryGap

      By default, there is a distance from the edge. Note that the bundaryGap is placed in xAxis.

      xAxis: {
        data: ['1 month', '2 month', '3 month', '4 month', '5 month', '6 month'],
        type: 'category',
        boundaryGap:false, // Set to no gap
      },
      

    • scale away from 0 value

      If the values are almost the same and the values are large, it is found that the coordinates of the y-axis still start from 0.

      At this point, you can set the value of the scale property to true to allow axis scaling.

      yAxis: {
        type: 'value',
        scale:true
      },
      

    • Stack diagram (the attribute value of stack should be set to the same)

      If there are two different lines, their values fluctuate greatly, and the following overlap will occur, which is easy to dazzle people at this time.

      Therefore, you can set the stack attribute value of the two lines to the same value (any setting). At this time, the first line is still the first line, and the second line is the sum (superposition) of the original two lines.

      series: [{
        name: 'Sales volume of Master Kang',
        type: 'line',
        data: [3091, 900, 300, 2006, 1510, 1813],
        stack: 'all',
        // For a series with the same stack attribute value, the value of the subsequent series will be superimposed on the value of the previous series
        // Second line
      }, {
      
        name: '',
        type: 'line',
        data: [2000, 2328, 3282, 230, 1889, 1123],
        stack: 'all',
      }],
      

Scatter diagram

Scatter plot can help us infer the correlation between variables.

Implementation steps

  • Introduce js file, create DOM container, initialize object and set option

  • x-axis data and y-axis data: two-dimensional array

    Array 1: [[height 1, weight 1], [height 2, weight 2], [height 3, weight 3]]

  • Chart type:

    Set type:scatter under series

    The type of xAxis and yAxis should be set to value

    const myChart = echarts.init(document.querySelector('div'));
    myChart.setOption({
      xAxis: {
        type: 'value',
        scale:true
      },
      yAxis: {
        type: 'value',
        scale:true
      },
      series: [{
        data: axisdata,
        type: 'scatter'
      }]
    })
    

Common effects

  • Bubble chart has different effects

    • The size of scatter points is different

    • The color of scatter points is different

      series: [{
        data: axisdata,
        type: 'scatter',
        // symbolSize:10, / / change the size of scatter points
        // Different elements have different sizes of scatter points
        symbolSize: function (arg) {
          const height = arg[0];
          const weight = arg[1];
          if ((weight / Math.pow(height / 100, 2) > 25)) {
            return 15;
          } 
            return 5;
          
        },
        // Control style
        itemStyle: {
          // color:'green'
          color: function (arg) {
            const height = arg.data[0];
            const weight = arg.data[1];
            if ((weight / Math.pow(height / 100, 2) > 25)) {
            return 'pink';
          } 
            return 'blue';
          
          }
        }
      }]
      

  • Ripple animation effect

    type: effectScatter

    series: [{
      data: axisdata,
      type: 'effectScatter',
      showEffectOn:'emphasis', // render (displayed after the page is loaded) emphasis (displayed when the mouse is over)
      rippleEffect:{
        scale:5
      },
    }]
    

Common configuration of rectangular coordinate system

Rectangular coordinate system chart: bar chart, broken line chart, scatter chart

Configuration 1: grid

grid is used to control the layout and size of the direct coordinate system.

grid:{
  show:true, // Display grid
  borderWidth:10, // frame
  borderColor:'pink', //Border color
  // Location and size of grid
  top:120,  
  left:120,
  width:600,
  height:140,
},

Configuration 2: axis

The coordinate axes are divided into x-axis and y-axis. There are at most two positions of x-axis and y-axis in a grid.

  • Axis type

    Value: value axis, which automatically reads data from target data

    Category: category axis. This type needs to set category data through data

  • Display position

    xAxis: the value can be top or bottom

    yAxis: can be left or right

Configuration 3: Area zoom dataZoom

dataZoom is used for data scaling and data range filtering. Both x-axis and y-axis can be owned.

dataZoom is an array, which means that multiple area scalers can be configured.

  • type

    Slider: slider

    inside: built in, zoom by mouse wheel or two fingers

    dataZoom:[{
      type: 'inside' // slider inside: built in, zooming by mouse wheel or two fingers
    }],
    
  • Indicates the axis of the dataZoom action

    xAxisIndex: set which x-axis is controlled by the scaling component. Generally, write 0

    yAxisIndex: set which y-axis is controlled by the scaling component. Generally, write 0

    dataZoom: [
      {
        // slider inside: built in, zooming by mouse wheel or two fingers
        type: 'slider', 
        xAxisIndex:0
      },
      {
        type: 'slider', 
        yAxisIndex:0
      }
    ],
    
  • Indicates the scaling of the initial state

    start: the starting percentage of the data window range

    End: percentage of the end of the data window range

    dataZoom: [
      {
        // slider inside: built in, zooming by mouse wheel or two fingers
        type: 'slider', 
        xAxisIndex:0
      },
      {
        type: 'slider', 
        yAxisIndex:0,
        start:0,
        end:50 //It refers to 50% of the highest point
      }
    ],
    

Pie chart

Pie chart can help users quickly understand the proportion of data of different classifications.

Implementation steps

  • The most basic code structure of ECharts:

    Introduce js file, set DOM container, initialize object, and set options

  • Data preparation:

    [{name: 'Taobao', value:11232},{name: 'Xianyu', value:5632},{name: 'Jingdong', value:7885},{name: 'pinduoduo', value:4632}]

  • Chart type:

    Set type:pie under series

    const myChart = echarts.init(document.querySelector('div'));
    myChart.setOption({
      series:[{
        type:'pie',
        data:[{name:'TaoBao',value:11232},{name:'Idle fish',value:5632},{name:'JD.COM',value:7885},{name:'Pinduoduo',value:4632}]
      }]
    });
    

Common effects

  • Display value

    label.formatter

    series:[{
      type:'pie',
      data:[{name:'TaoBao',value:11232},{name:'Idle fish',value:5632},{name:'JD.COM',value:7885},{name:'Pinduoduo',value:4632}],
      label:{
        // Show label 
        show:true, //The default is true
        //Determines what text is displayed
        // formatter:'{b}-{c}-{d}%', / / taobao-11232-28.23%
        formatter:function(arg){
          return `${arg.name}-${arg.value}`;
        }
      }
    }]
    

  • ring

    Set two radii: ['40%,' 80% ']

    series: [{
      type: 'pie',
      data: [{ name: 'TaoBao', value: 11232 }, { name: 'Idle fish', value: 5632 }, { name: 'JD.COM', value: 7885 }, { name: 'Pinduoduo', value: 4632 }],
      // 20 stands for 20px; 20% represents half the smaller value relative to the height or width of its container
      radius: ['40%', '80%'],   // The smaller circle radius is 40% and the larger is 80%
    
    }]
    
  • Nightingale map:

    roseType:'radius'

    myChart.setOption({
      series: [{
        type: 'pie',
        data: [{ name: 'TaoBao', value: 11232 }, { name: 'Idle fish', value: 5632 }, { name: 'JD.COM', value: 7885 }, { name: 'Pinduoduo', value: 4632 }],
        roseType: 'radius' //The radius of each piece of Nightingale pie chart is different
      }]
    });
    

  • Select effect

    // If set to single, the selected part will deviate from the dot by a small segment, and the other previously selected blocks will come back
    // selectedMode:'single' 
    selectedMode:'multiple', // If other blocks are selected, the deviation will not come back
    // Set the distance of deviation
    selectedOffset:30
    

Map

Maps can help us quickly analyze the data differences in different geographical locations from a macro perspective. Official website document

How to use maps and charts:

  • Baidu map Api

    You need to apply for the access key of Baidu map

  • Vector map

    You need to prepare the data for the vector map

Implementation steps

  • The most basic code structure of ECharts:

    Introduce js file, set DOM container, initialize object, and set options

  • Prepare the vector map json file of China and put it in the directory of json/map /

  • Get china.json using ajax

  • Register the map json data with the ecarts global object in the callback function

    echarts.registerMap('chinaMap',chinaJson)

  • Set type:'map' map:'chinaMap' under the geo node

    const myChart = echarts.init(document.querySelector('div'));
    fetch('./JSON/map/china.json').then(res=>res.json()).then((data)=>{
      echarts.registerMap('chinaMap',data); //The ecarts global object registers the map json data
      myChart.setOption({
        geo:{
          type:'map', 
          map:'chinaMap'
        }
      })
    })
    

Common configuration

  • Zoom drag

    roam

  • Name display

    label

  • Initial scale

    zoom

  • Map center point

    center

const myChart = echarts.init(document.querySelector('div'));
fetch('./JSON/map/china.json').then(res=>res.json()).then((data)=>{
  echarts.registerMap('chinaMap',data);
  myChart.setOption({
    geo:{
      type:'map',
      map:'chinaMap',
      roam:true, // Setting allows zooming and dragging of the map
      // scale only drag move only
      label:{
        show:true, //Show all labels
      },
      zoom:1,//Set initial scale
      center:[99,40] //Set a region as the center according to longitude and latitude
    }
  })
})

Common effects

Different cities display different colors

  1. Show basic map of China

  2. Set urban air quality in series

  3. Associate the data under series with geo

    geoIndex:0 ,type:'map'

  4. Combined with visual map

    min max inRange

        const myChart = echarts.init(document.querySelector('div'));
        const airData = [
            { name: 'Beijing', value: 39.92 },
            { name: 'Tianjin', value: 39.13 },
            { name: 'Shanghai', value: 31.22 },
            { name: 'Chongqing', value: 66 },
            { name: 'Hebei', value: 147 },
            { name: 'Henan', value: 113 },
            { name: 'Yunnan', value: 25.04 },
            { name: 'Liaoning', value: 50 },
            { name: 'Heilongjiang', value: 114 },
            { name: 'Hunan', value: 175 },
            { name: 'Anhui', value: 117 },
            { name: 'Shandong', value: 92 },
            { name: 'Xinjiang', value: 84 },
            { name: 'Jiangsu', value: 67 },
            { name: 'Zhejiang', value: 84 },
            { name: 'Jiangxi', value: 96 },
            { name: 'Hubei', value: 273 },
            { name: 'Guangxi', value: 59 },
            { name: 'Gansu', value: 99 },
            { name: 'Shanxi', value: 39 },
            { name: 'Inner Mongolia', value: 58 },
            { name: 'Shaanxi', value: 61 },
            { name: 'Jilin', value: 51 },
            { name: 'Fujian', value: 29 },
            { name: 'Guizhou', value: 71 },
            { name: 'Guangdong', value: 38 },
            { name: 'Qinghai', value: 57 },
            { name: 'Tibet', value: 24 },
            { name: 'Sichuan', value: 58 },
            { name: 'Ningxia', value: 52 },
            { name: 'Hainan', value: 54 },
            { name: 'Taiwan', value: 88 },
            { name: 'Hong Kong', value: 66 },
            { name: 'Macao', value: 77 },
            { name: 'South China Sea Islands', value: 55 }
        ]
        fetch('./JSON/map/china.json').then(res => res.json()).then(data => {
          // console.log(data);
          echarts.registerMap('chinaMap',data);
          myChart.setOption({
            geo:{
              map:'chinaMap',
              type:'map'
            },
            series:[{
              data:airData,
              // Associate the data under series with geo
              geoIndex:0, //Associate the air quality data with the 0th geo configuration
              type:'map',
            }],
            visualMap:{
              min:0,
              max:300,
              inRange:{
                color:['white','red'] //Modify color
              }
            }
          })
        })
    

    In addition, another attribute is calculable, which is set to true. You can filter it by dragging the handle. The following figure filters the data from 0 to 118

Map and scatter chart are used together

  1. Add a new object to the series

  2. Prepare the scatter data and set the data for the new object

  3. Configure the type of the new object

    type:effectScatter

  4. Let the scatter chart use the map coordinate system

    coordinateSystem:'geo'

  5. Make the ripple effect more obvious

    rippleEffect:{scale:10}

    series: [
      {
        type: 'effectScatter',
        data: scatterData,
        coordinateSystem: 'geo', // Indicates the coordinate system used for scatter points, geo's coordinate system
        rippleEffect: {
          scale: 10, //Sets the size of the effect of the ripple animation
        }
      }
    ],
    

Radar chart

Radar chart can be used to analyze the comparison between multi-dimensional data and standard data.

Implementation steps

  • The most basic code structure of ECharts:

    Introduce js file, set DOM container, initialize object, and set options

  • Define the maximum value of each dimension under the radar node

    indicator:[{name: 'ease of use', max:100},{name: 'function', max:100},{name: 'taking photos', max:100},{name:' running points', max:100},{name: 'endurance', max:100}]

  • Prepare product specific data

    Data: [{Name: 'Huawei mobile 1', value: [48, 88, 99, 66, 77]}, {Name: 'Xiaomi Mobile', value:[88, 90, 89, 95, 87]}]

  • Chart type

    Set type:radar under series

    const myChart = echarts.init(document.querySelector('div'));
    myChart.setOption({
      radar: {
        indicator: [{ name: 'Ease of use', max: 100 }, { name: 'function', max: 100 }, { name: 'photograph', max: 100 }, { name: 'Run points', max: 100 }, { name: 'Endurance', max: 100 }],
    
      },
      series: [{
        type: 'radar',
        data: [{ name: 'Huawei mobile 1', value: [48, 88, 99, 66, 77] }, { name: 'Mi phones', value:[88, 90, 89, 95, 87] }]
      }]
    })
    

Common configuration

  • Display value

    label:true

  • Area (configured under the series node)

    areaStyle:{}

  • Configure the display type of the outermost layer of the radar chart (configured under the radar node)

    shape: 'circle' / / polygen by default

    myChart.setOption({
      radar: {
        indicator: [{ name: 'Ease of use', max: 100 }, { name: 'function', max: 100 }, { name: 'photograph', max: 100 }, { name: 'Run points', max: 100 }, { name: 'Endurance', max: 100 }],
        shape:'circle' // The default is polygon
      },
      series: [{
        type: 'radar',
        data: [{ name: 'Huawei mobile 1', value: [48, 88, 99, 66, 77] }, { name: 'Mi phones', value:[88, 90, 89, 95, 87] }],
        areaStyle:{}
      }],
      label:{
        show:true
      },
       legend:{}
    })
    

Dashboard

The instrument panel is mainly used for progress control and data range monitoring.

Implementation steps

  • The most basic code structure of ECharts:

    Introduce js file, set DOM container, initialize object, and set options

  • Prepare data and set it to data under series

    data: [{value:97}]

  • Chart type:

    Set type:gauge under series

    const myChart = echarts.init(document.querySelector('div'));
    myChart.setOption({
      series: [
        {
          data: [
            { value: 97 },// Each object represents a pointer
            // Each object represents a pointer
          ],
          type: 'gauge'
        }
      ]
    })
    

Common effects

  • Value range:

    min, max to control

    myChart.setOption({
      series: [
        {
          data: [
            { value: 97 },// Each object represents a pointer
            // Each object represents a pointer
          ],
          type: 'gauge',
          min:50 //Range of control instrument cluster
        }
      ],
    })
    

summary

Summary of characteristics

  • Bar chart: the bar chart describes the classification data and shows how many are in each classification?, The meaning expressed in the chart lies in the ranking comparison of different categories of data
  • Line chart: line chart is more used to show the "change trend" of data over time
  • Scatter chart: scatter chart can help us infer the correlation between data of different dimensions. For example, in the previous example, we can see that height and weight are positively correlated. The higher the height, the heavier the weight; Scatter charts are also often used in map annotation.
  • Pie chart: pie chart can help users quickly understand the proportion of data of different classifications
  • Maps: maps can help us quickly see the differences of data in different geographical locations from a macro perspective
  • Radar chart: radar chart can be used to analyze the comparison between multi-dimensional data and standard data
  • Dashboard: dashboard can more intuitively show the progress or actual situation of an indicator

Configuration item summary

Echarts advanced

Display correlation

theme

Built in theme

Echarts has two built-in themes: light dark.

  • It can be declared in the initialization object method init

    const chart = echarts.init(dom,'light');

Custom theme

  1. stay Theme Editor Edit theme in

  2. Download the theme, which is a js file

  3. Import theme js file

  4. Using themes in init methods

palette

Palette

It is a set of colors from which graphics and series automatically select colors.

  • Themes palette

    The operation is the same as the theme defined above

  • Global palette

    If configured, the theme's palette will be overwritten: myCharts.setOption({color:['red','green','blue ']})

  • Local palette

    series:[{type:'bar',color:['red','green','blue']}]

Color gradient

  • Linear gradient

    series: {
      data: [83, 98, 90, 89, 92],
      type: 'bar',
      markPoint: {
        data: [
          {
            type: 'max',
            name: 'Maximum'
          },
          {
            type:'min',
            name:'minimum value'
          }
        ]
      },
      markLine:{
        data:[{
          type:'average',
          name:'average value'
        }]
      },
      label:{
        show:true,
        position:'inside'
      },
      barWidth:'40%',
      itemStyle:{
        color:{
          type:'linear', // Linear gradient
          x:0, // Defines the direction of the color ramp
          y:0,
          x2:0,
          y2:1,
          colorStops:[
            {offset:0,color:'red'}, // The color at 0 percent is red
            {offset:1,color:'pink'} // The color at 100 percent is blue 
          ]
        }
      }
    }
    

  • Radial Gradient

    itemStyle:{
      // color:{
      //   type:'linear', / / linear gradient
      //   x:0, / / define the direction of the color gradient
      //   y:0,
      //   x2:0,
      //   y2:1,
      //   colorStops:[
      //     {offset:0,color:'red'}, / / the color at 0% is red
      //     {offset:1,color:'pink'} / / the color at 100% is blue 
      //   ]
      // }
      color:{
        type:'radial',
        x:0.5, // x coordinate of the center of the circle
        y:0.5, // y coordinate of circle center
        r:1, // radius
        colorStops:[
          {offset:0,color:'red'},
          {offset:1,color:'blue'}
        ]
    
      }
    }
    

style

Direct style and highlight style, with higher priority, will override the effect of theme and palette

Direct style

itemStyle, textStyle, lineStyle, areaStyle, label

myChart.setOption({
  title:{
    text:'Test of pie chart',
    // 2.textStyle
    textStyle:{
      color:'red'
    }
  },
  series: {
    color: ['blue', 'red', 'purple', 'pink', 'green'],
    type: 'pie',
    data: [{
      name: 'Zhang San', value: 33,
      // 1.itemStyle controls the style of Zhang San area
      itemStyle: {
        color:'yellow'
      },
      // 3.label
      label:{
        color:'green'
      }
    },
    { 'name': 'Wang Wu', value: 44 },
    { 'name': 'Zhao Liu', value: 54 },
    { 'name': 'Li Si', value: 39 },
    { 'name': 'Lao Zhang', value: 63 }
    ],
    label: {
      show: true,
      formatter: '{b}-{c}',
    }
  }
})

Highlight style

Wrap itemstyle, TextStyle, linestyle, areastyle and label in emphasis

series: {
  color: ['blue', 'red', 'purple', 'pink', 'green'],
  type: 'pie',
  data: [{
    name: 'Zhang San', value: 33,
    // 1.itemStyle controls the style of Zhang San area
    itemStyle: {
      color:'yellow'
    },
    // 3.label
    label:{
      color:'green'
    },
    // Highlight style
    emphasis:{
      itemStyle:{color:'pink'},
      label:{color:'black'}
    }
  },
  { 'name': 'Wang Wu', value: 44 },
  { 'name': 'Zhao Liu', value: 54 },
  { 'name': 'Li Si', value: 39 },
  { 'name': 'Lao Zhang', value: 63 }
  ],
  label: {
    show: true,
    formatter: '{b}-{c}',
  }
}
})

self-adaption

When the size of the browser changes, the chart can adapt and change accordingly.

  1. Listen for window size change events (resize)

  2. The resize in the Echarts instance object can be called in the event handler.

    window.addEventListener('resize',()=>{
        myChart.resize();
    })
    

Use of animation

Load animation

Ecarts has built-in animation for loading data. We just need to show or hide it at the right time

  • Show load animation

    myChart.showLoading()

  • Hide loading animation

    myChart.hideLoading()

    const myChart = echarts.init(document.querySelector('div'));
    myChart.showLoading();
    fetch('./Json/data.json').then(res => res.json()).then(data =>{
      myChart.hideLoading();
      const dataArr = data.map(item =>[item.height,item.weight]);
      myChart.setOption({
        xAxis:{
          type:'value',
          scale:true
        },
        yAxis:{
          type:'value',
          scale:true,
        },
        series:{
          type:'scatter',
          data:dataArr
        }
      })
    })
    

Incremental animation

All data updates are implemented through setOption, without considering what changes have taken place in the data.

The old and new options do not cover each other, but are integrated with each other. When setting a new option, you only need to consider the changed part.

const btnmodify = document.querySelector('#modify');
const btnadd = document.querySelector('#add');
btnmodify.addEventListener('click', () => {
  const newData = [25, 33, 55, 66];
  // The old and new option s do not cover each other, but are integrated with each other
  // When setting a new option, you only need to consider the changed part.
  myCharts.setOption({
    series: [{
      data: newData,

    }],
  });
})
btnadd.addEventListener('click', () => {
  const newData = [66, 72, 65, 88, 43];
  const newName = ['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu', 'Xiao Wu'];
  myCharts.setOption({
    xAxis: {
      data: newName
    },
    series: [{
      data: newData,

    }],
  })
})

All codes: https://codepen.io/liujiaqi222/pen/ZEyPGNp

Animation configuration

  • Turn on animation

    animation:true

  • Animation duration

    animationDuration:1000 (in milliseconds)

  • Jog animation

    animationEasing:'bounceOut'

    myCharts.setOption({
      animation: true,
      animationDuration: function (arg) {
        console.log(arg); // The index value of the animation element is printed
        return arg * 2000;
      },
      animationEasing: 'bounceOut', // linear wait
    });
    
  • Animation threshold

    animationThreshold:10 / / only 10 animations of the same type are displayed at most

Interactive API

Global ecarts object

overall situation Ecarts object It is an object that can be used directly after importing the echorts.js file

  • init initializes the ecarts instance object and uses the topic

  • registerTheme registers a topic. Only registered topics can be used in the init method

  • registerMap register map data

    fetch('./JSON/map/china.json').then(res=>res.json()).then((data)=>{
      // Register map
      echarts.registerMap('chinaMap',data);
      myChart.setOption({
        geo:{
          type:'map',
          map:'chinaMap',
          roam:true, // Setting allows zooming and dragging of the map
          // scale only drag move only
          label:{
            show:true, //Show all labels
          },
          zoom:1,//Set initial scale
          center:[99,40] //Set a region as the center according to longitude and latitude
        }
      })
    })
    
  • connect

    There can be multiple independent charts in a page, and each chart corresponds to an ECharts instance object.

    connect can realize multi graph Association. The incoming linkage target is the ECharts instance object and supports arrays. When saving the picture, it will automatically splice, refresh button, reset button, prompt box linkage, legend selection, data range modification, etc.

    echarts.connect([mychart1,mychart2])
    

echartsInstance object

Ecartsinstance object Is the return value after calling the eckarts.init method

  • setOption

    Set or modify the configuration items and data of the chart instance. You can call the setOption method multiple times (the new configuration and the old configuration will be merged).

  • resize

    Recalculate and chart

    const myChart = echarts.init(dom);
    window.addEventListener('resize',()=>{
        myChart.resize();
    })
    
  • on\off

    Bind or unbind event handler

    • Mouse event

      // Listen to events
      myChart.on('click',function(arg){
        console.log(arg);
        console.log('click...');
      });
      
    • ECharts event

      Common events: legendSelectChanged, 'dataZoom', 'pieSelectChanged', 'mapSelectChanged', etc

      myChart.on('legendSelectChanged',function(arg){
        console.log(arg); //Print selected status
      })
      
  • dispatchAction

    Trigger certain behaviors (use code to simulate user behavior)

    mCharts.dispatchAction({
        type:'hightlight', //Event type
        seriesIndex:0, //Chart index
        dataIndex:1 //Which item in the chart is highlighted
    })
    
  • clear

    Clearing the current instance will remove all components and charts in the instance;

    After clearing, you can setOption again

    myChart.clear(); // The entire chart will not be displayed
    myChart.setOption(option); // The chart will be displayed again
    
  • dispose

    Destroy the instance. After the instance is destroyed, it can no longer be used

    myChart.clear(); 
    myChart.setOption(option);   // Will report an error
    

Map',
roam:true, / / set allow zoom and drag map
//scale only drag move only
label:{
show:true, / / show all tags
},
zoom:1, / / set the initial zoom scale
center:[99,40] / / set a region as the center according to longitude and latitude
}
})
})



- connect

There can be multiple independent charts in a page, and each chart corresponds to one ECharts Instance object.

connect Multi graph association can be realized, and the incoming linkage target is ECharts Instance object, support array. When saving the picture, it will automatically splice, refresh button, reset button, prompt box linkage, legend selection, data range modification, etc.

```js
echarts.connect([mychart1,mychart2])

echartsInstance object

Ecartsinstance object Is the return value after calling the eckarts.init method

  • setOption

    Set or modify the configuration items and data of the chart instance. You can call the setOption method multiple times (the new configuration and the old configuration will be merged).

  • resize

    Recalculate and chart

    const myChart = echarts.init(dom);
    window.addEventListener('resize',()=>{
        myChart.resize();
    })
    
  • on\off

    Bind or unbind event handler

    • Mouse event

      // Listen to events
      myChart.on('click',function(arg){
        console.log(arg);
        console.log('click...');
      });
      
    • ECharts event

      Common events: legendSelectChanged, 'dataZoom', 'pieSelectChanged', 'mapSelectChanged', etc

      myChart.on('legendSelectChanged',function(arg){
        console.log(arg); //Print selected status
      })
      
  • dispatchAction

    Trigger certain behaviors (use code to simulate user behavior)

    mCharts.dispatchAction({
        type:'hightlight', //Event type
        seriesIndex:0, //Chart index
        dataIndex:1 //Which item in the chart is highlighted
    })
    
  • clear

    Clearing the current instance will remove all components and charts in the instance;

    After clearing, you can setOption again

    myChart.clear(); // The entire chart will not be displayed
    myChart.setOption(option); // The chart will be displayed again
    
  • dispose

    Destroy the instance. After the instance is destroyed, it can no longer be used

    myChart.clear(); 
    myChart.setOption(option);   // Will report an error
    

Posted by skyer2000 on Thu, 30 Sep 2021 16:25:07 -0700