在Vue项目里使用ECharts图标库-阿里云开发者社区

在Vue项目里使用ECharts图标库

2023-05-26 166

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在Vue项目里使用ECharts图标库

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>