vue2使用vue-echarts报错记录

vue2使用vue-echarts报错记录

提示找不到vue-demi，tslib

以前使用vue-echarts也没用过这两个依赖（vue-demi是和vue2、vue3版本相关的插件，可能是新版本的问题），为了解决报错和提示，最后还是安装了这两个不清楚具体用途的依赖。

    "echarts": "^5.1.2",
    "tslib": "^2.3.0",
    "vue": "^2.6.11",
    "vue-demi": "^0.12.1",
    "vue-echarts": "^6.0.0",
    "@vue/composition-api": "^1.0.5",

安装好了后，就没警告和报错了。

仅仅在一个单独的页面里面使用echarts, 没有全局引入。

npm install vue-echarts   
// 因为以前碰过一次echart版本对不上，废了很大功夫才搞清，所以现在都有阴影，不敢直接一起安装了
// 在node_modus中找到vue-echarts的echarts版本和tslib的版本
npm install echarts@5.1.2
npm install vue-demi   // 解决了报错
npm install tslib@2.3.0 // 解决了警告

// MyChart.vue组件
<template>
    <v-chart v-if="option" class="chart" :option="option" />
</template>

<script>
// import ECharts from 'vue-echarts'
// import 'echarts'
// 这种复杂的写法是从npmjs的网站上找到的
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import ECharts from "vue-echarts";

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


export default {
  components: {
    'v-chart': ECharts
  },
  props: {
    option: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      // option: null,
      // {
      //   tooltip: {
      //     trigger: 'item'
      //   },
      //   legend: {
      //     bottom: '0',
      //     left: 'center'
      //   },
      //   series: [
      //     {
      //       name: '数据分布图',
      //       type: 'pie',
      //       center: ["50%", "45%"],
      //       radius: ['50%', '80%'],
      //       color: ['#ee6666', '#fac858', '#5470c6', '#91cc75', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      //       avoidLabelOverlap: false,
      //       itemStyle: {
      //         borderRadius: 10,
      //         borderColor: '#fff',
      //         borderWidth: 2
      //       },
      //       label: {
      //         show: false,
      //         position: 'center'
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: '12',
      //           fontWeight: 'bold'
      //         }
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       data: [
      //         { value: 1048, name: 'Search Engine' },
      //         { value: 484, name: 'Union Ads' }
      //       ]
      //     }
      //   ]
      // },
    }
  }
}
</script>

<style lang="less" scoped>
.chart {
  height: 200px;
}
</style>