2019-10-12 【前端】学会使用echarts

今天项目用到了echarts做统计；

做如下总结：

echarts是Apache开源项目，特别好用，可以做各种统计图；

先去echarts的官网看一下：https://www.echartsjs.com/zh/index.html

项目引用echarts.js文件

使用echarts总共分三步：

第一步：初始化一个chart

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

第二部：做一个option

var 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'  }]

};

第三部：把option装进去

myChart.setOption(option);

【注意事项】

1. chart应该放在一个有高度的父控件中

2. option有各种各样的属性，详细设置直接找官网例子和api，十分给力，实在找不到了再百度；

3. 统计图窗体自适应 ，参考博客：https://blog.csdn.net/YLH19970086/article/details/80071823

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