vue+echarts 实现两个小例子

ゝ一世哀愁。 2022-12-07 12:50 170阅读 0赞

[echarts][]  
来吧，今天写一个关于vue+echarts绘制图表的教程，写的原因很简单， 最近有不少人问，这是其一，其二是我的博客里面没有一片关于echarts的相对比较能看的教程，所以今天就写一篇，我们以折线图和饼图作为例子实现，原因是他们的数据格式相对柱状图来讲比较简单，这个学会了，可以应付绝大多数的图表，当然不包括3D图，虽然echarts支持3D图的绘制，但是这里不涉及，本文主要从几个注意的点说，因为毕竟怎么使用它已经被广大的博友写烂了，这里也就不耽误时间。  
引入：

##### 如果你是vue2.0的版本，引入的方式还是一样： #####

npm install echarts

##### 如果是vue3.0的话，引入方式稍微改变： #####

npm add echarts

##### 全局引入它： #####

import echarts from 'echarts
    Vue.prototype.$echarts = echarts

##### 按需引入： #####

let echarts = require("echarts/lib/echarts");
    // 引入折线图等组件
    require("echarts/lib/chart/line");
    require("echarts/lib/chart/bar");
    require("echarts/lib/chart/radar");
    // 引入提示框和title组件，图例
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/component/legend");

##### 上面是如何引入它，不多废话，下面说如何使用它 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70_pic_center]

//生成折线图
                drowChart_line() { 
                    let _this = this;
                    let workflow_line = _this.$echarts.init(document.getElementById('workflow_line'), 'light')
                    workflow_line.setOption({ 
                        legend: { 
                            data: this.line_desc// 描述信息
                            //格式：["OCMS","UPM"]
                        },
                        xAxis: { 
                            type: 'category',
                            data: this.month_line_Lists, // x轴数据
                            //格式：["30","31","32","33","34","35","36","37","38","39"]
                            name: this.line_unit,   // x轴名称单位
                            // x轴名称样式
                            nameTextStyle: { 
                                fontWeight: 600,
                                fontSize: 18
                            }
                        },
                        yAxis: { 
                            type: 'value',
                            // y轴名称样式
                            nameTextStyle: { 
                                fontWeight: 600,
                                fontSize: 18
                            }
                        },
                        tooltip: { 
                            trigger: 'axis'   // axis item none三个值
                            confine: true, 
                        },
                        series: this.series_line_Lists
                        
                    },true) //这里的true一定要有，不然的话会导致你的图表不根据数据的变化进行更新
                },

*  这里的this.series\_line\_Lists格式为：

[{ "name":"OCMS","data":[0,2,0,1,2,0,0,0,0,0],"type":"line"},{ "name":"UPM","data":[0,0,0,1,0,0,0,0,0,0],"type":"line"}]}}

##### 注意的点： #####

*  末尾的true

> 这里的true如果不加的话，会导致vue的数据更新了，视图层面的数据也更新了，但是折线图却没有任何更新

*  函数执行结束绘制图表

> echarts使用的是canvas绘制，如果你说的数据是在图出现以后返回的，会导致绘制失败，如果你的数据是在data里面定义的，那么你需要保证数据加载结束进行绘制图表，所以你的绘制函数需要在mounted里执行，这样就保证了数据加载结束进行绘制图表了。

*  confine

> 这个属性是说我们的提示浮层不会超出div的限制，会一直随着鼠标移动达到跟随的一个效果，这也是网上最头疼的一个事情

*  legend

> 这个属性是类型图例或者备注的一个东西，一般的话，默认的配置就是可以的的，但是如果你的数据项比较多的时候，配置一下type: ‘scroll’,就需要分页展示了，例如下图：  
> ![在这里插入图片描述][2020091610144747.png_pic_center]  
> ![在这里插入图片描述][20200916101454803.png_pic_center]

##### 饼图 #####

drowChart_pie() { 
                    let _this = this;
                    // 基于准备好的dom，初始化echarts实例
                    let workflow_pie = this.$echarts.init(document.getElementById('workflow_pie'), 'light')
                    this.loading = false
                    workflow_pie.setOption({ 
                        tooltip: { 
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: { 
                            type: 'scroll',
                            orient: 'vertical',
                            left: 'left',
                            data: this.desc_data
                            //['p1','p2','p3','p4']
                        },
                        series: [
                            { 
                                name: '来源',
                                type: 'pie',
                                radius: '70%',
                                center: ['50%', '60%'],
                                data: this.series_data,
                                //[{name:'p1',value:2},{name:'p2',value:4},{name:'p3',value:2},{name:'p4',value:3},]
                                itemStyle: { 
                                    emphasis: { 
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal: { 
                                        label: { 
                                            show: true,
                                            //position: 'inner', //在内部显示
                                            //formatter: '{b} : {c} ({d}%)'
                                            formatter: '{b} : {c} ({d}%)' //只显示百分比
                                        },
                                        labelLine: { show: true}, //是否显示连接线
                                    }
                                },
                                emphasis: { 
                                    itemStyle: { 
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                        ],
    
                    })
                }

> 这里的两个demo只是想介绍一下echarts怎么使用，别的一些图表也都只是一些data格式不同，刚好这两个demo是我使用的，所以借此机会记录一下，中间的一些坑也可以帮助一些和我一样对这个不熟悉这个的小伙伴当作一个参考

[echarts]: https://echarts.apache.org/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e80e5cce6bd2437280e3fae03281f174.png
[2020091610144747.png_pic_center]: /images/20221123/068b31623590482e8b2d097e36b5c463.png
[20200916101454803.png_pic_center]: /images/20221123/8d37e26a5dfc4e8f8e82d2545af87c69.png