在 Vue 项目里使用 ECharts 图标库

2021 年 11 月 22 日
本文字数：1565 字
阅读完需：约 5 分钟

ECharts 是一个 JavaScript 实现的开源图标库，能兼容绝大多数浏览器（IE8+），底层依赖 ZRender（一个轻量级的 Canvas 类库），能高度个性化定制数据可视化图标。

ECharts 官网地址：https://echarts.apache.org/v4/zh/feature.html

一、在 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>