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 这两个版本不一致，最后安装一致就可以了

相关阅读:
时间序列的栅格数据Sen+MK分析（R语言）源自徐洋——NDVI时间序列分析之Sen+MK分析全过程梳理
redis常用命令
gradle android 配置 build 变体
DNS 系列（三）：如何免受 DNS 欺骗的侵害
来源稳定的l2逐笔接口数据去哪找？
我们如何在工作与生活中找到平衡点？
产业集群的转型升级需要各个方面的协同转型——以河北吉力宝为例
降本增效这九个月，爱奇艺从“穿越火线”，到“冷静增长”
科教文汇杂志科教文汇杂志社科教文汇编辑部2022年第15期目录
什么是伺服电机？Parker派克伺服电机盘点

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