vue项目中引入安装2个版本的echarts

背景

以前老旧的项目中使用的Vue-echarts,它依赖的是echarts 3点几的版本，现在新加入了需求需要使用echarts中的一些新特性，直接升级echarts版本会导致以前的图表报错，无法正常工作，为了兼容以前的的图表并且能够使用新版本echarts的功能，就想是否一个项目中是否能引入两个版本的echarts呢？答案是可以的。

安装

// 默认会安装最新版本的
npm install echarts5@npm:echarts@5

在package.json文件的dependencies中就会出现，我们可以看到同时也安装了echarts3

"echarts": "^3.8.5",
"echarts-wordcloud": "^1.1.0",
"echarts5": "npm:echarts@5",

安装成功后可以在项目node_modules中看到echarts5

这时候就可以在项目中使用echarts5的特性了

使用

• 全部引入

import * as Echarts from 'echarts5';
// 或者
var echarts = require('echarts5');

• 按需加载 以柱状图为例

import * as echarts from 'echarts5/core';
import { GridComponent } from 'echarts5/components';
import { BarChart } from 'echarts5/charts';
import { CanvasRenderer } from 'echarts5/renderers';

echarts.use([GridComponent, BarChart, CanvasRenderer]);

// 或者
const echarts = require('echarts5/lib/echarts');
require('echarts5/lib/component/grid');
require('echarts5/lib/chart/bar');

echarts常用组件封装

<template>
  <div id="echarts" ref="echarts" style="width: 100%; height: 100%"></div>
</template>

<script>
// 引入 ECharts 主模块;;
const echarts = require('echarts5/lib/echarts');
// 引入柱状图
// require('echarts5/lib/chart/line');
// 引入饼图
require('echarts5/lib/chart/pie');
// 引入柱状图
require('echarts5/lib/chart/bar');
// 引入仪表盘
require('echarts5/lib/chart/gauge');
// 引入坐标,提示框和标题,图例组件; 只需要饼图和曲线图
require('echarts5/lib/component/grid');
require('echarts5/lib/component/tooltip');
require('echarts5/lib/component/title');
require('echarts5/lib/component/graphic');
require('echarts5/lib/component/legend');

const cfg = {
  // 仪表盘
  gaugeOptions: options => {
    const data = options.data || [];
    return {
      tooltip: {
        formatter: '{b} : {c}%',
      },
      series: [
        {
          type: 'gauge',
          title: {
            show: true,
            offsetCenter: [-2, '25%'],
            color: 'rgba(0,0,0,0.45)',
            fontSize: 12,
          },
          detail: {
            formatter: '{value}',
            offsetCenter: ['0', '50%'],
            fontSize: 22,
          },
          progress: {
            show: true,
            width: 14,
            itemStyle: {
              color: '#3082dc',
              opacity: 0.8,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 14,
              color: [[1, '#e8e8e8']],
              shadowBlur: 2,
              shadowColor: 'rgba(176, 174, 174, 1)',
              shadowOffsetX: 1.5,
              opacity: 0.66,
            },
          },
          splitLine: {
            show: true,
            distance: -14,
            lineStyle: {
              color: '#fff',
              width: 1,
            },
          },
          axisTick: {
            show: true,
            distance: -14,
            lineStyle: {
              color: '#fff',
            },
          },
          axisLabel: {
            distance: 22,
            color: 'rgba(0,0,0,0.25)',
            fontSize: 12,
          },
          pointer: {
            show: true,
            length: '65%',
            width: 4,
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 10,
            itemStyle: {
              borderWidth: 4,
              borderColor: '#6294d6',
            },
          },
          itemStyle: {
            color: '#6294d6',
          },
          data,
          radius: '65%',
          center: ['50%', '50%'],
        },
      ],
    };
  },
  // 饼图
  pieOptions: options => {
    const data = options.data || [];
    const {
      text, unit, legendShow, labelShow, graphic,
    } = options;
    return {
      title: {
        zlevel: 0,
        // eslint-disable-next-line no-nested-ternary
        text: `${text === undefined ? '' : `${text}%`}`,
        top: '45%',
        left: '48.5%',
        textAlign: 'center',
        textStyle: {
          rich: {
            value: {
              color: '#303133',
              fontSize: 24,
              fontWeight: 'bold',
            },
            name: {
              color: '#666',
              lineHeight: 20,
            },
          },
        },
      },
      legend: {
        show: legendShow,
        data,
        formatter(name) {
          const value = data.find(ele => ele.name === name);
          return `${value.name}:${value.value}${unit || value.unit}`;
        },
        bottom: 0,
        itemHeight: 0,
      },
      tooltip: {
        trigger: 'item',
        formatter(params) {
          return `${params.marker}${params.data.name}：${params.data.value}${unit || params.data.unit}`;
        },
      },
      graphic: {
        type: 'image',
        z: 3,
        style: {
          image: null,
          width: 40,
          height: 40,
        },
        left: 'center',
        top: 'middle',
        ...graphic,
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: true,
          center: ['50%', '50%'], // 饼图x,y位置
          itemStyle: {
            normal: {
              borderColor: '#fff',
              borderWidth: 3,
              color(params) {
                const colorList = [
                  '#61DDAB',
                  '#3380DC',
                  '#B4D6FF',
                  '#C7F6E5',
                  '#667798',
                  '#D0D6E1',
                  '#F7C02D',
                  '#FFECBA',
                  '#7666FA',
                  '#D7D0FF',
                  '#78D3F8',
                  '#D0F2FD',
                  '#9967BD',
                  '#E3D1ED',
                  '#FF9D50',
                  '#FFE0C8',
                  '#008685',
                  '#BBDEDF',
                  '#F08CB4',
                  '#FFE0EE',
                  // 以上为国双自定义 下面为随意添加
                  '#749f83',
                  '#ca8622',
                  '#bda29a',
                  '#6e7074',
                  '#546570',
                  '#c4ccd3',
                ];
                return colorList[params.dataIndex];
              },
            },
          },
          label: {
            alignTo: 'edge',
            normal: {
              show: labelShow,
              formatter(arg) {
                return `${arg.name}(${arg.value}${arg.data.unit}) \n ${arg.percent}%`;
              },
            },
            emphasis: {
              show: labelShow,
            },
          },
          labelLine: {
            show: labelShow,
            emphasis: {
              show: labelShow,
            },
          },
          data,
        },
      ],
    };
  },
  // 普通bar图
  barOptions: options => {
    const {
      xAxis, yAxis, title, data, barMaxWidth, formatter, seriesName, grid, linearStart, linearEnd, showBackground,
    } = options;
    const { legendShow, labelShow } = options;
    return {
      title: {
        text: title || '',
      },
      tooltip: {
        trigger: 'axis',
        formatter: formatter || '{c}',
        axisPointer: {
          type: 'shadow',
          shadowColor: 'rgba(0, 0, 0, 1)',
          shadowBlur: 10,
        },
      },
      legend: {
        show: legendShow,
      },
      grid: {
        left: '0%',
        right: '5%',
        bottom: '5%',
        top: '5%',
        containLabel: true,
        ...grid,
      },
      xAxis: {
        type: 'value',
        ...xAxis,
      },
      yAxis: {
        type: 'category',
        ...yAxis,
      },
      series: [
        {
          name: seriesName,
          data,
          type: 'bar',
          showBackground: showBackground || false,
          itemStyle: {
            normal: {
              barBorderRadius: [4, 4, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0, 1, 1, 0,
                [
                  { offset: 0, color: linearStart || '#c6dffb' },
                  { offset: 1, color: linearEnd || '#3585dd' },
                ],
              ),
            },
          },
          barMaxWidth,
          label: {
            normal: {
              show: labelShow,
              position: 'insideLeft',
              color: '#000',
              formatter(params) {
                if (params.data.value === 0) {
                  return '';
                }
              },
            },
          },
        },
      ],
    };
  },
};

export default {
  name: 'Chart',
  data() {
    return {
      chart: null,
    };
  },
  props: {
    chartType: {
      type: String,
      default: 'pie',
    },
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {
    this.$watch(
      'options',
      options => {
        if (!this.chart) this.drawChart();
        else this.chart.setOption(this.getOptions(), true);
      },
      { deep: true },
    );
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      if (this.chart) return;
      const myChart = echarts.init(this.$el);
      myChart.setOption(this.getOptions());

      window.addEventListener('resize', myChart.resize);
      this.chart = myChart;
      if (this.chartType === 'bar') {
        this.chart.getZr().on('click', (params) => {
          const position = [params.offsetX, params.offsetY];
          if (this.chart.containPixel('grid', position)) {
            const index = this.chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
            this.$emit('getBar', index);
          }
        });
      }
    },
    getOptions() {
      const type = `${this.chartType}Options`;
      const options = cfg[type](this.options);
      return options;
    },
    updateOption() {
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    destroy() {
      window.removeEventListener('resize', this.chart.resize);
      this.chart.dispose();
      this.chart = null;
    },
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.destroy();
  },
};
</script>