echarts使用踩坑记录

echarts的引入

在网上找的各种echarts使用，其中的引入大都是老版的引入方式，如果你是用的新版，引入方式需要在main.js中这样写

import * as echarts from ‘echarts’;//引入echarts
Vue.prototype.$echarts = echarts;

echarts使用地图时（比如中国地图)

echarts如果需要使用地图，比如中国地图，需要引入china.js文件，本文最后附上下载链接
而且地图js文件需要放在你需要使用的组件里面再引入，不能放在echars文件中，因为你的依赖上传到 git再下载依赖需要重新下载，而你新增的地图js文件不会随着下载，路径就会出错。所以哪里需要就在哪个文件夹里放

比如我这样

当页面需要两个及以上的echarts

你会发现echarts的大小不会随着屏幕尺寸的变化而变化，就算你设置了
window.onresize = myChart.resize;
也只有一个可以变化这时候需要改成

就可以都变化了

echarts图例的使用

formatter可以动态使用数据，rich富文本可以设置其中图例不同的字体样式和对齐方式

把数据设置好，可以做出来这种效果。建议大家去看官方文档中关于legend（图例）rich（富文本）formatter的介绍。

特别建议

如果echarts需要使用后台返回的数据，建议大家用watch监听你存数据的变量，拿到数据后重新执行你的echarts方法，确保不会拿到数据后出现echarts不渲染的问题

中国地图js文件

链接: https://pan.baidu.com/s/1bN8H7myiNU2Gu645H3ck2g
提取码：chin