Vue-ECharts 6 遷移記錄

Vue-ECharts 6 遷移記錄

vue-echarts 已經支持 ECharts 5，同時支持 Vue.js 2/3

官方demo

Vue 2

import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// 手動引入 ECharts 各模塊來減小打包體積

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

// 全局註冊組件（也可以使用局部註冊）
Vue.component('v-chart', ECharts)

new Vue(...)

!!! 需要引用 包 vue/composition-api npm i -D @vue/composition-api

舊版本

import ECharts from 'vue-echarts'

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

export default {
  components: {
    'v-chart': ECharts
  },

新版本

import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  MarkLineComponent
} from 'echarts/components'
use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent,
  MarkLineComponent
])

export default {
  components: {
    'v-chart': VChart
  },

總結

與之前相比多了個 GridComponent

// `cartesian` coordinate system. For some historical
// reasons, it is named as grid, for example:
// chart.setOption({
//     grid: {...},
//     xAxis: {...},
//     yAxis: {...},
//     series: [{...}]
// });
use(GridComponent);

引用
https://github.com/ecomfe/vue-echarts/blob/main/README.md
https://github.com/apache/echarts/blob/master/src/echarts.all.ts
https://echarts.apache.org/zh/api.html#echartsInstance.setOption