Vue-ECharts使用说明

Vue-ECharts使用说明

vue-echarts 是在Apache Echarts官网的echarts使用方法上二次封装的组件，方便我们创建echarts图应用到我们的项目中。

参考：

vue-echarts 官网：https://github.com/ecomfe/vue-echarts

Apache Echarts 官网：https://echarts.apache.org/zh/index.html

1-安装

1、安装echarts、vue-echarts模块

npm insatll echarts vue-echarts

2、如果是vue2(vue version < 2.8.0)的环境，需要安装@vue/composition-api模块

npm i -D @vue/composition-api

2-示例

下面以一个折线图为例子进行说明

<template>
  <div style="height: 100%;">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script>
// 官方：按需引入echarts所需的模块
import { use } from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 第三方组件模块
import VChart from 'vue-echarts';

// 注册安装模块(插件)
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])
  
export default {
  name: 'LineCharts',
  components: { //注册组件
    VChart
  },
  data: function() {
    return {
      option: { //配置选项属性
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
    }
  }
}

之后，在任意模版页面使用这个折线图的组件即可，也可以按照上面的格式直接在模版页面中使用(代码冗余)，使用效果如下：

在上面的示例中，我们引入的第三方模块组件，也就是Vue-echarts这个模块下封装的组件，直接使用该组件我们就不需要按照官网的注册方式去初始化chart的dom元素，也不需要通过setOption去注册option选项配置，简化了操作。

除去引入该组件这部操作，其他部分都是按照echarts官方示例代码中按需引入的方式编写；也就是引入echarts/core中的use注册方法、图例、图例中用到的选项组件模块以及echarts/renderers中的渲染函数。

注意：

有的模块可能没有看到具体在哪里使用，但是如果页面渲染不正常，就可以在游览器控制台看具体是哪一个模块没有引发了报错，根据报错提示信息引入即可。
常见的这类模块比如 GridComponent、TooltipComponent、CanvasRenderer 等。

3-自定义优化图表思路

在上面介绍完了vue-echarts的便捷使用，如果我们需要直接自定义图，一般的步骤是：

• 在Apache Echarts官网的示例中[https://echarts.apache.org/examples/zh/index.html]找到你想要做图的类型(比如折线图、饼图、散点图等)，引入大致的代码模块结合vue-echarts进行渲染。
• 基本能够渲染示例之后，你就需要去编写option配置了，该配置复杂的不在数据，其实很多时间是在调整样式，具体每个属性对应的样式调节可以参考Apache Echarts官网的配置API[https://echarts.apache.org/zh/option.html#title]进行查阅。