Use Echarts a total of three steps.

Today, the project uses echarts do statistics;

Summarized as follows:

echarts is the Apache open source projects, especially easy to use, you can do all kinds of charts;

Go look at the official website echarts: https://www.echartsjs.com/zh/index.html

Project references echarts.js file

Use echarts total of three steps:

The first step: initialize a chart

var myChart =echarts.init(document.getElementById( [ID] ));

Part II: make a option

the option = {

    xAxis: {  type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },

    yAxis: {  type: 'value'  },

    series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'  }]

};

Part III: the option loaded into

myChart.setOption(option);

 

【Precautions】

1. chart should be placed in a high degree of parent control

2. option has a variety of attributes, detailed settings directly to the network and an example of official api, is to force, then it can not find Baidu;

3. Adaptive chart form, reference blog: https://blog.csdn.net/YLH19970086/article/details/80071823

    window.onresize =function(){for(var i = 0; i<charts.length;i++){charts[i].resize;}}