关于vue-echarts6.0插件的使用

关于

vue-echarts是一款基于echarts的vue组件封装，可以帮助我们更加方便的在vue中使用echarts。

安装

Npm

npm i echarts vue-echarts

Yarn

yarn add echarts vue-echarts

浏览器

<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

使用

引入 Vue和 vue-echarts

import Vue from 'vue'
import ECharts from 'vue-echarts' 

手动引入 ECharts 各模块来减小打包体积

import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

如果需要配合 ECharts 扩展使用，只需要直接引入扩展包即可，以 ECharts-GL 为例：

需要安装依赖：

npm install --save echarts-gl

并添加如下引用

import 'echarts-gl'

注册组件后即可使用

Vue.component('v-chart', ECharts)

调用组件

    <v-chart :options="polar"/>

注意

1. 最新版本的vue-echarts配置与echarts配置尽量保持一致了
2. 直接对option进行赋值，默认是合并配置的
3. 想要不合并配置，可以使用update-options这个属性，详情请看vue-echarts文档 例如：

// template
 <v-chart
  ref="chart1"
  class="chart__item"
  :option="opt.chart1"
  :update-options="{ notMerge: true }"
  :autoresize="true"
/>

// script
export default {
 data () {
    return {
      opt: {
        chart1: {},
      }
    }
 },
 fetchData(){
     // todo...
     this.opt.chart1 = res
 }
}