官网奉上 ECharts
vue项目中可以引入echarts 或者 vue echarts，大致区别如下：
echarts就是官方的js库；
vue-echarts是封装后的vue插件，功能一致只是把它封装成vue插件 这样更方便以vue的方式去使用
具体引入方式：在Vue中使用echarts的两种方式
这里主要介绍引入官方 echarts
强迫症 代码洁癖的看这里 (按需引入echarts)：
如果在main.js中引入报错的话请自行根据载包的目录进行修改(即到node_module中找到文件路径)
一般先在官网的实例中找到想要的效果，点击进去拷贝代码到项目中。
官网实例
以下是大概结构
dom结构
echarts绘制结构
如果对效果不满意，再到官网配置项查找相对应属性进行设置。注意：文档尽量用最新版的
配置项
例如：series属性控制要显示的图表类型，可以是柱体图、饼图、折线图、或者地图
series属性
echarts地图
series{ type: map }
因为地图精度的提高，echarts 官方不再内置地图数据增大代码体积。这是官方以百度地图为底图的实例：ECharts Examples
ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
两种方式引入
这里推荐两个地图json下载链接：地图选择器 、ECharts 地图数据在线生成工具
如果发现地图上的文字不居中，打开地图 js 或 Json 文件，找到地图描述的（"properties":{"name":"XX省","cp":[101.04524,23.062507],"childNum":1},）内容，将（"cp":[xx,xx]）内容删除，省名就会自动在该省的地图中间了，否则会默认在省会或首府位置显示
地图下钻
类似 省市区三级下钻 这种需求，可以参考一下 GitHub - dongkelun/vue-echarts-map: Vue版本Echarts中国地图钻取
echarts自适应
echarts图表的尺寸自适应，是靠监听 window 的 onresize 来实现的，而有时候需要实现 window 窗口大小不变，echarts 容器 尺寸变化时图表也能够自适应。官方文档也有对类似的需求进行说明
比如项目中有对菜单折叠的需求，每次折叠菜单echarts图表都无法进行自适应，参考以下链接
dom元素增加resize,以及echart增加resize
echarts图表初始大小问题及echarts随窗口变化自适应 - 一只爱吃糖的小羊 - CSDN博客
由于项目中的echarts 容器宽度是百分数来控制，并不能很好通过上面两种方法解决
皮一下
于是有了对echarts图表销毁重新绘制的想法，通过调用官方的api：dispose()进行销毁再重新绘制。这里要注意：dispose()和clear()的区别 清除echarts 实例 - jiang_mingyi的博客 - CSDN博客
每次点击伸缩菜单，通过循环对当前路由所有echarts实例进行销毁再绘制，添加定时器对性能进行优化，而且最主要原因可能是容器宽度有延迟
echarts 调整图表在容器当中的大小
有时候发现echarts图表并不能很好布满容器，这主要跟grid属性有关 echarts 调整图表大小的方法 - 你说什么我听不见 - CSDN博客
echarts 柱状图legend图例不显示
legend中数据要和series中name的值保持一致，饼图、折线图没有这个要求
网友评论