Vue集成echarts十问

一、如何安装和引入

安装

1	npm install echarts --save

其他安装方式：官网参考

全局引入

1 2	// 全局引入 import echarts from 'echarts';

按需引入

// 引入echarts主程序
import echarts from 'echarts/lib/echarts';
// 引入条形图
import 'echarts/lib/chart/bar';
// 引入grid组件
import 'echarts/lib/component/grid';
// 引入title组件
import 'echarts/lib/component/title';
// 引入tooltip组件
import 'echarts/lib/component/tooltip';
// 引入legend组件
import 'echarts/lib/component/legend';

推荐使用按需引入，以减少包体积大小

二、如何初始化

在 template 中添加一个 div 标签，并设置其宽高，作为 echarts 初始化的 DOM 容器

1
2
3

<template>
  <div ref="chart" style="width: 500px; height: 500px;"></div>
</template>

注意：未设置 DOM 容器宽高时，echarts 将不会渲染

在 mounted 钩子中初始化 echarts 实例

export default {
  data() {
    return {
      // 维护图表实例，在后面重绘时使用
      chartInstance: '',
    };
  },
  mounted() {
    // 图表选项
    const options = {};
    // 初始化图表实例
    this.chartInstance = echarts.init(this.$refs.chart);
    // 设置图表选项
    this.chartInstance.setOptions(options);
  },
};

三、如何响应数据变化进行重绘

将 options 作为计算属性，根据传入的 props 进行计算，当依赖的 props 变化时，options 同时进行变化，然后监听 options 变化进行重绘。一个简单的条形图示例如下：

export default {
  props: {
    // 数据示例：[{cateogry: 'Mon', value: 100}, {category: 'Tue', value: 200}]
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 维护echarts实例，初始化时设置，重绘时使用
      chartInstance: '',
    };
  },
  computed: {
    // options作为计算属性，依赖list属性计算所得
    options() {
      const xAxisData = this.list.map((item) => item.category);
      const barData = this.list.map((item) => item.value);
      return {
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: barData,
            type: 'bar',
          },
        ],
      };
    },
  },
  watch: {
    // 监听options，发生变化时，使用新值进行图表重绘
    options(newValue) {
      this.chartInstance && this.chartInstance.setOption(newValue);
    },
  },
  mounted() {
    // 当dom挂载之后进行echarts初始化
    this.chartInstance = echarts.init(this.$refs.chart);
    this.chartInstance.setOption(this.options);
  },
};

四、如何自适应容器大小

1、获取外部容器（组件父元素）的大小

2、设置图表的容器的大小为获取的组件父元素大小

修改 mounted 钩子中 echarts 初始化代码如下：

export default {
  mounted() {
    // 获取组件父元素及其计算样式
    const parentNode = this.$el.parentNode;
    const parentNodeStyle = window.getComputedStyle(parentNode);
    // 设置图表的容器大小为组件父元素大小
    this.$refs.chart.style.width = parentNodeStyle.width;
    this.$refs.chart.style.height = parentNodeStyle.height;
    // 初始化图表
    this.chartInstance = echarts.init(this.$refs.chart);
    this.chartInstance.setOption(this.options);
  },
};

echarts 通过 tooltip 的 formatter 属性，支持用户对 tooltip 进行自定义，formatter 属性有两个类型，一个是字符串模板，