Vue 集成 Echarts 图表库

我们在使用 Vue 时很经常需要用到图表绘制，但基于原生进行绘制步骤复杂。

ECharts 是 Apache 旗下开源的纯 Javascript 的图表库，我们只需在项目中引入相应依赖，即可实现高效图表绘制。

下面介绍具体使用步骤。

1. 工程依赖

在 Vue 项目根目录新建命令行窗口运行下行命令：

npm install echarts --save

在项目根目录 main.js 文件中引入依赖。

// 引入 Echarts
// 直接使用 import echarts from 'echarts' 会异常，所以替换成下行
import * as echarts from 'echarts'
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts

2. 基本使用

在页面中我们只需定义块的大小即可，通过 JS 获取 DOM 并填充内容。

需要注意一点，这里的高度设置百分比的话是不起作用的，默认完整填充。

<template>
  <div class="chart">
    <div id="pie" style="width: 70%; height: 100%; margin: 0 auto;"></div>
  </div>
</template>

图表内容的填充 JS 代码如下，不同的图表我们要更换的只是 option 的值。

Echarts 官方参考模板：Echars 模板。

export default {
  name: "DataChart",
  methods: {
    pieChart(){
      // document.getElementById()
      var pieGraph = this.$echarts.init(document.getElementById('pie'));
      // 配置图表信息
      var option = {
        title: {
          text: '数据趋势',
          top: 'bottom',
          left: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', '2015', '2016', '2017'],
          source: [
            { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
            { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
            { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
            { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
      pieGraph.setOption(option);
    }
  }
}

3. 调整块大小

用于容纳 Echars 的块直接通过 CSS 设置宽高是无效的，必须在 JS 添加如下代码之后方可设置大小。

export default {
  name: "DataChart",
  props: {
    // 设置容器的宽、高，解决外部设置无效问题
    width: {
      type: Number,
      default: null
    },
    height: {
      type: Number,
      default: null
    }
  }
}

4. 标题调整

通过设置 option 中的 title 调整图表的标题。

• text ：控制标题内容。
• top ：控制标题垂直显示位置，可取值top、bottom。
• left ：控制标题水平显示位置，可取值left、 right、 center。
• textStyle ：控制标题字体样式。

title: {
  text: '数据趋势',
  top: 'bottom',
  left: 'center',
  textStyle: {
    fontSize: 16
  }
}