vue-echart的使用

一、引用vue-echart，一定要注意版本，特别是vue，不然有问题

<!DOCTYPE html>
<html>
  <head>
    <style>
      #app {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <v-chart autoresize :option="option" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
    <script>
      Vue.component('v-chart', VueECharts);

      new Vue({
        el: '#app',
        mounted(){

        },
        data() {
          return {
            option: {
              textStyle: {
                fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
              },
              title: {
                text: 'Traffic Sources',
                left: 'center',
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} 
{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)',
                    },
                  },
                },
              ],
            },
          };
        },
      });
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

二、输出 esm、cjs 和 umd 格式

esm 是“EcmaScript module”的缩写。

cjs 是“CommonJS module”的缩写。

umd 是“Universal Module Definition”的缩写，它可以在

esm 被认为是“未来”，但 cjs 仍然在社区和生态系统中占有重要地位。esm 对打包工具来说更容易正确地进行 treeshaking，因此对于库来说，拥有这种格式很重要。或许在将来的某一天，你的库只需要输出 esm。

在这里插入图片描述
这种有可能的错误是引入的vue的版本问题

Vue packages version mismatch:

vue@2.6.14 vue-template-compiler@2.7.14 这两个版本不一致，最后安装一致就可以了

相关阅读:
代码随想录算法训练营第四十八天|121. 买卖股票的最佳时机 122.买卖股票的最佳时机II
大数据常见面试题：1
中国石油大学(北京)-《油田化学》第三阶段在线作业
算法训练与程序竞赛题目集合（L1）
docker系统笔记-03镜像的创建管理和发布
不懂管理，迟早把团队带废（附PPT和表格模板）
OpenHarmony 3GPP协议开发深度剖析——一文读懂RIL
Java面试题之Java集合面试题 50道（带答案）
@Override 的作用
Linux 常用systemctl service 脚本

原文地址：https://blog.csdn.net/weixin_40466351/article/details/127853055