ECharts是一个JavaScript实现的开源图标库，能兼容绝大多数浏览器（IE8+），底层依赖ZRender（一个轻量级的Canvas类库），能高度个性化定制数据可视化图标。
ECharts官网地址：echarts.apache.org/v4/zh/featu…
一、在Vue项目下安装：
npm install echarts --save
二、创建一个Chart.vue。在ECharts的官网 —— 文档里找一个案例代码。复制到Chart.vue文件里。
<template> <div ref="chartDom" style="height:100px"></div> </template> <script> import * as echarts from 'echarts'; export default { mounted(){ // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(this.$refs.chartDom); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } </script> <style> </style>
三、在需要使用的页面，通过components的方式申明Chart组件。
<template> <div> <Chart></Chart> </div> </template> <script> import Chart from "../views/Chart.vue";// 要改成自己项目的Chart.vue文件路径 export default { components:{ Chart } }; </script>
四、这个时候打开页面就能显示Echart的图标了。如下图
但需要注意的是，在使用图标的时候，他会在模版渲染之前就开始渲染，这个时候显示的话会变形。所以我们需要监听DOM容器的变化，DOM变化之后在重新绘制图表。
五、监听DOM变化。
这里我们需要用到一个第三方库resize-detector，先安装。
npm install resize-detector --save
但这种监听在浏览器变动的时候会触发多次，为了优化性能，我们还需要使用lodash。
npm install lodash --save
编码如下：
<template> <div ref="chartDom" style="height: 400px"></div> </template> <script> import * as echarts from "echarts"; import { addListener, removeListener } from "resize-detector"; import debounce from "lodash/debounce"; export default { created() { this.resize = debounce(this.resize, 300); }, mounted() { // 基于准备好的dom，初始化echarts实例 this.chart = echarts.init(this.$refs.chartDom); // 添加一个监听 addListener(this.$refs.chartDom, this.resize); // 绘制图表 this.chart.setOption({ title: { text: "ECharts 入门示例", }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }); }, beforeDestroy() { // 销毁监听和对象 removeListener(this.$refs.chartDom, this.resize); this.chart.dispose(); this.chart = null; }, methods: { resize() { console.log("resize()");//查看调用了多少次 this.chart.resize(); }, }, }; </script> <style></style>
ok，现在基本就搞完了。
ps： 如果报格式警告，那就安装一个exlint插件，然后一键改下格式就好了。
