我正在参加「掘金·启航计划」;

缘由

从百度将 echarts 捐赠给 apache 基金会后， echarts 一直在发展更新中，现在 echarts 已经更新到 v5.x了

vue-echarts 版本已经到了 v6.x;

但是。。。

我上次用 echarts 已经是x年前了，现在文档一上来就是 vue3语法，但自己的项目因种种原因没有升级，或者自己还没学 vue3 语法等等。。。。；

解决方案

看着官网的示例，将 vue3语法转成 vue2 语法

官网示例

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, defineComponent } from 'vue';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default defineComponent({
  name: 'HelloWorld',
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: 'dark',
  },
  setup() {
    const option = ref({
      title: {
        text: 'Traffic Sources',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
      },
      series: [
        {
          name: 'Traffic Sources',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: 'Direct' },
            { value: 310, name: 'Email' },
            { value: 234, name: 'Ad Networks' },
            { value: 135, name: 'Video Ads' },
            { value: 1548, name: 'Search Engines' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    });

    return { option };
  },
});
</script>

<style scoped>
.chart {
  height: 100vh;
}
</style>

分析

还是熟悉的味道，先引入再使用，咳咳，这是编程不变的思想
使用了新语法， use
echarts 使用了分包，减少打包体积
echarts 适配 vue3语法
使用 vue3 语法写 vue 组件
本质只是将数据传入到 echarts 组件中的 option 参数中

ok，接下来用 vue2 思想替换

vue2 思想替换

先整一波全局引入

import 'echarts'

组件语法替换

通过分析的第六点，我们知道了只要能拿到数据并传入就行了，那就开始使用我们属性的vue2语法吧

import VChart from 'vue-echarts'
export default {
  components: {
    VChart
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    getOptions (result) {
      return data
    }
  },
  mounted () {
    this.option = this.getOptions(data)
  }
}

完整代码

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
const data = {
      title: {
        text: 'Traffic Sources',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
      },
      series: [
        {
          name: 'Traffic Sources',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: 'Direct' },
            { value: 310, name: 'Email' },
            { value: 234, name: 'Ad Networks' },
            { value: 135, name: 'Video Ads' },
            { value: 1548, name: 'Search Engines' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }

import VChart from 'vue-echarts'
export default {
  components: {
    VChart
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    getOptions (result) {
      return data
    }
  },
  mounted () {
    this.option = this.getOptions(data)
  }
}
</script>

<style scoped>
.chart {
  height: 100vh;
}
</style>

附上在线code观看地址

stackblitz.com/edit/vue-ec…

总结

现在前端领域的技术日新月异，各种框架层出不穷，但是总该还是有迹可循的，遇到问题不要慌，掌握思想，用自己喜欢的方式也可以用上新版的组件

关于我将vue3语法降级到vue2那点小事

缘由