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]进行查阅。
