vue 集成 Echarts

1.首先在项目中导入echarts，在根目录下，输入npm install echarts --save，导入完成后在package.json中会有版本号，

2.在mian.js内引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

3.在需要使用的组件内给定一个div宽高，然后实例化echarts

let myChart = this.$echarts.init(document.getElementById('test'));

test是给定的div的id，然后就可以使用echarts，通过，myCharts.setOption({   

这里面写自己要的图表和样式，参考官方文档的配置项，

地址：http://echarts.baidu.com/option.html#title

   })

至此echarts已经引入完毕

4.在使用过程中遇到的问题记录下：

1）.图表自适应屏幕

目前使用的方法：获取浏览器宽高设置到div上，data是传入的id

let  worldMapContainer = document.getElementById(data);
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';

这样图表的大小就会自适应屏幕了，但是在浏览器测试放大或缩小屏幕时，不会自动刷新，这里使用

window.onresize = function () {
重新调用上面的方法，重置浏览器宽高
在加上
myChart.resize()函数就可以做到自适应屏幕了。
}

5.数据更新，图表重新渲染

使用echarts的clear()方法，给setOption({},true)方法加上true