欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue学习【一】vue引用封装echarts并展示多个echarts图表

程序员文章站 2023-11-18 10:22:16
大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下。 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香)。阿里的G2和百度的echarts都是很不错的,echarts上手难度小,并且用户多,文档多,生态环境较好, ......

大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下。

现在开始第一章:vue引用并封装echarts

在文章开始前,我先舔波echarts(真香)。阿里的g2和百度的echarts都是很不错的,echarts上手难度小,并且用户多,文档多,生态环境较好,所以中小项目的话echarts就是首选。加个题外话,我把g2、echarts都po出来,大家凭喜好选取。

g2官方demo地址:

echarts官方demo地址:

现在开始干活,进入echarts网址中,我们能看到,图表的主要参数都在option这函数里,如图1所示。我们将option()放到vue中的methods中即可引用。

vue学习【一】vue引用封装echarts并展示多个echarts图表

图1

在项目中打开命令行(直接在地址栏输入cmd即可打开dos面板),输入命令,如图2 所示。

npm install echarts

vue学习【一】vue引用封装echarts并展示多个echarts图表

图2

打开项目,创建views文件夹,存放父组件index.vue,在components文件夹下创建echartscom.vue子组件,如图3所示。echartscom.vue中主要放option(),用来实现图表渲染,index.vue存放数据,echartscom.vue引用index.vue的数据从而形成父子组件间的传值。

vue学习【一】vue引用封装echarts并展示多个echarts图表

图3

思路说完了,接下来就是代码,代码比我说得清楚,看他别看我,skr。

子组件,echartscom.vue

 1 <!-- echartscom.vue -->
 2 <template>
 3   <div class="charttest">
 4     <div style="width:400px;height:400px;" :id="echarts" class="echarts" ref="echarts">
 5     </div>
 6   </div>
 7 </template>
 8  
 9 <script>
10   import echarts from 'echarts'
11   export default {
12     name:'echartscom',
13     data() {
14       return {};
15     },
16     methods: {
17       drawcharts() {
18         var mychart = echarts.init(document.getelementbyid(this.echarts));
19         mychart.setoption({
20           tooltip: {
21             trigger: 'item',
22             formatter: '{a} <br/>{b}: {c} ({d}%)'
23           },
24           legend: {
25             orient: 'vertical',
26             x: 'left',
27             data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
28           },
29           series: [
30             {
31               name: '访问来源',
32               type: 'pie',
33               radius: ['50%', '70%'],
34               avoidlabeloverlap: false,
35               label: {
36                 normal: {
37                   show: false,
38                   position: 'center'
39                 },
40                 emphasis: {
41                   show: true,
42                   textstyle: {
43                     fontsize: '30',
44                     fontweight: 'bold'
45                   }
46                 }
47               },
48               labelline: {
49                 normal: {
50                   show: false
51                 }
52               },
53               data: [
54                 { value: 335, name: '直接访问' },
55                 { value: 310, name: '邮件营销' },
56                 { value: 234, name: '联盟广告' },
57                 { value: 135, name: '视频广告' },
58                 { value: 1548, name: '搜索引擎' }
59               ]
60             }
61           ]
62         });
63       }
64     },
65     computed: {
66       echarts() {
67         return 'echarts' + math.random() * 100000;
68       }
69     },
70     mounted() {
71       this.drawcharts();
72     },
73     components: {}
74   };
75 </script>
76  
77 <style></style>

 

父组件,index.vue

 1 <!-- index.vue -->
 2 <template>
 3   <echartscom />
 4 </template>
 5  
 6 <script>
 7   import echartscom from '@/components/echartscom.vue'
 8   export default {
 9     data() {
10       return {};
11     },
12     methods: {
13     },
14     mounted() {},
15     components: {
16       echartscom
17     }
18   };
19 </script>
20  
21 <style></style>

npm run dev 运行一下,看下结果,如图4所示。

vue学习【一】vue引用封装echarts并展示多个echarts图表

图4

目前为止,我们的工作完成大半了,接下来就是父子间传值了。传值目前我们用props,vuex以后会说到,并且小型项目的话,用vuex显得繁琐庞大,因此不建议用,等到项目较大,多个父子页面传值时,vuex便如神兵天降。

说一下props传值思路,在父组件中,把值放在data()中,子组件通过props引入父组件的数组名,即可传值,对props感兴趣的朋友可以专门上百度/google/bing学习(免得有的小伙伴说我舔百度)

1 props: {
2       父组件数组名: {
3         type: array,
4         default: () => []
5       }
6     },

 代码如下,算了还是全po出来吧,免得有的小伙伴迷糊了。

父组件:index.vue

 1 <!-- index.vue -->
 2 <template>
 3   <div>
 4     <div v-for="(chardata,index) in msg" :key="index" class="test">
 5       <echartscom :chartdata="chardata" autoresize />
 6     </div>
 7   </div>
 8 </template>
 9  
10 <script>
11   import echartscom from '@/components/echartscom.vue'
12   export default {
13     data() {
14       return {
15         msg:{
16           chartdata1: [
17               {value:335, name:'直接访问'},
18               {value:310, name:'邮件营销'},
19               {value:234, name:'联盟广告'},
20               {value:135, name:'视频广告'},
21               {value:1548, name:'搜索引擎'}
22           ],
23           chartdata2: [
24               {value:335, name:'直接访问'},
25               {value:310, name:'邮件营销'},
26               {value:234, name:'联盟广告'},
27               {value:135, name:'视频广告'},
28               {value:1548, name:'搜索引擎'}
29           ],
30         }
31       };
32     },
33     methods: {
34     },
35     mounted() {},
36     components: {
37       echartscom
38     }
39   };
40 </script>
41  
42 <style>
43   .test{
44     float: left;
45   }
46 </style>

  子组件:echartscom.vue

 1 <!-- echartscom.vue -->
 2 <template>
 3   <div class="charttest">
 4     <div style="width:400px;height:400px;" :id="echarts" class="echarts" ref="echarts">
 5     </div>
 6   </div>
 7 </template>
 8  
 9 <script>
10   import echarts from 'echarts'
11   export default {
12     name:'echartscom',
13     props: {
14       chartdata: {
15         type: array,
16         default: () => []
17       }
18     },
19     data() {
20       return {
21       };
22     },
23     methods: {
24       drawcharts() {
25         var mychart = echarts.init(document.getelementbyid(this.echarts));
26         mychart.setoption({
27           tooltip: {
28             trigger: 'item',
29             formatter: '{a} <br/>{b}: {c} ({d}%)'
30           },
31           legend: {
32             orient: 'vertical',
33             x: 'left',
34             data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
35           },
36           series: [
37             {
38               name: '访问来源',
39               type: 'pie',
40               radius: ['50%', '70%'],
41               avoidlabeloverlap: false,
42               label: {
43                 normal: {
44                   show: false,
45                   position: 'center'
46                 },
47                 emphasis: {
48                   show: true,
49                   textstyle: {
50                     fontsize: '30',
51                     fontweight: 'bold'
52                   }
53                 }
54               },
55               labelline: {
56                 normal: {
57                   show: false
58                 }
59               },
60               data: this.chartdata
61             }
62           ]
63         });
64       }
65     },
66     computed: {
67       echarts() {
68         return 'echarts' + math.random() * 100000;
69       }
70     },
71     mounted() {
72       this.drawcharts();
73     },
74     components: {}
75   };
76 </script>
77  
78 <style></style>

  此时浏览器自动刷新,看一下结果如何,结果如图5所示。

vue学习【一】vue引用封装echarts并展示多个echarts图表

图5

本文内容较多,其实思路很简单,代码全都po出来了,可以复制代码先跑一遍,然后结合我的文字看代码,这样掌握得比较快。

下一章讲的是echarts动态传值,有喜欢的小伙伴联系我哦。