vue+echarts实现多条折线图


Posted in Vue.js onMarch 21, 2022

本文实例为大家分享了vue+echarts实现多条折线图的具体代码,供大家参考,具体内容如下

数据未使用json格式,直接写在页面

大致效果

vue+echarts实现多条折线图

页面代码:

<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 100%;height: 300px;"></div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        name: '',
        data() {
            return {
                charts: '',
      /*    opinion: ["1", "3", "3", "4", "5"],*/
        xdata:["1/16","1/17","1/18","1/19","1/20","1/21","1/22","1/23","1/24","1/25","1/26","1/27","1/28","1/29","1/30","1/31","2/1","2/2","2/3","2/4","2/5","2/6","2/7","2/8","2/9","2/10","2/11","2/12","2/13","2/14","2/15","2/16","2/17","2/18","2/19","2/20","2/21","2/22","2/23","2/24","2/25","2/26","2/27","2/28","2/29","3/1","3/2","3/3","3/4","3/5","3/6","3/7","3/8","3/9","3/10","3/11","3/12","3/13","3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23","3/24","3/25","3/26","3/27","3/28","3/29","3/30","3/31","4/1","4/2","4/3","4/4","4/5","4/6","4/7","4/8","4/9","4/10","4/11","4/12","4/13","4/14","4/15","4/16","4/17","4/18","4/19","4/20","4/21","4/22","4/23","4/24","4/25","4/26","4/27","4/28","4/29","4/30","5/1","5/2","5/3","5/4","5/5"],
        adata: [0,0,0,0,291,440,571,830,1287,1975,2744,4515,5974,7710,9689,11790,14376,17203,20437,24324,28018,31147,34542,37109,40158,42638,44653,58761,63851,66491,68500,70550,72436,74185,75002,75891,76288,76741,77150,77658,78064,78497,78824,79251,79824     ,80026     ,80151     ,80270     ,80409     ,80552     ,80651     ,80695     ,80735     ,80754     ,80778     ,80793     ,80813     ,80824     ,80844     ,80860     ,80881 ,80894,80928,80967,81008,81054,81093,81171,81218,81285,81340,81394,81439,81470,81518,81554 ,81589,81620,81639,81669,81708,81740,81802 ,81865,81907     ,81953     ,82052     ,82160,82249,82295,82341,82692,82719,82735,82747,82758,82788,82798,82804,82816,82827,82830,82836,82858,82862,82874,82875,82877,82880,82881,82883 ],
        bdata: [0,0,0,0,0,9 ,17 ,25 ,41 ,56 ,80 ,106 ,132 ,170 ,213 ,259 ,304 ,361 ,425 ,490 ,563 ,636 ,722 ,811 ,908 ,1016 ,1113 ,1259 ,1380 ,1523 ,1665 ,1770 ,1868 ,2004 ,2118 ,2236 ,2345 ,2442 ,2592 ,2663 ,2715 ,2744 ,2788 ,2835 ,2870 ,2912 ,2943 ,2981 ,3012 ,3042 ,3070 ,3097 ,3119 ,3136 ,3158 ,3169 ,3176 ,3189 ,3199 ,3213 ,3226 ,3237 ,3245 ,3248 ,3255 ,3261 ,3270 ,3277 ,3281 ,3287 ,3292 ,3295 ,3300 ,3304 ,3305 ,3312 ,3318 ,3322 ,3326 ,3329 ,3331 ,3331 ,3333 ,3335 ,3336 ,3339 ,3339 ,3341 ,3341 ,3342 ,3342 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ],
        cdata: [0,0,0,0,0,0,28 ,34 ,38 ,49 ,51 ,60 ,103 ,124 ,171 ,243 ,328 ,475 ,630 ,892 ,1153 ,1540 ,2049 ,2649 ,3280 ,3996 ,4740 ,5642 ,6723 ,8096 ,9419 ,10851 ,12552 ,14376 ,16157 ,18266 ,20658 ,22888 ,24734 ,27323 ,29745 ,32495 ,36117 ,39002 ,41625 ,44462 ,47204 ,49856 ,52045 ,53726 ,55404 ,57065 ,58600 ,59897 ,61475 ,62793 ,64111 ,65541 ,66911 ,67749 ,68679 ,69601 ,70420 ,71150 ,71740 ,72244 ,72703 ,73159 ,73650 ,74051 ,74588 ,74971 ,75448 ,75770 ,76052 ,76238 ,76408 ,76571 ,76751 ,76964 ,77078 ,77167 ,77279 ,77370 ,77455 ,77525 ,77575 ,77663 ,77738 ,77816 ,77892 ,76979 ,77029 ,77062 ,77084 ,77123 ,77151 ,77207 ,77257 ,77346 ,77394 ,77474 ,77555 ,77578 ,77610 ,77642 ,77685 ,77713 ,77766 ,77853 ,77911 ]
            }
    },
 
        methods: {
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
          title: {
            text: '中国疫情统计'
          },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['累计确诊','累计死亡','累计治愈']//图例
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
 
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {//横坐标
                         name: "日期",
                        type: 'category',
                        boundaryGap: false,
                          data: this.xdata
                    
                    },
                    yAxis: {
                         name: "数量",
                        type: 'value'
                    },
                    //三条折线就有三种series,可以更改type以改变是否为折线
                    series: [{
                        name: '累计确诊',
                        type: 'line',
                        data: this.adata,
                    },{
                        name: '累计死亡',
                        type: 'line',
                        data: this.bdata
                    },{
                        name: '累计治愈',
                        type: 'line',
                        data: this.cdata
                    }]
                })
            }
        },
        //调用
        mounted() {
            this.$nextTick(function() {
                this.drawLine('main')
            })
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue使用echarts实现折线图
浅谈Vue的computed计算属性
VUE中的v-if与v-show区别介绍
Mar 13 #Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 #Vue.js
Vue2.0搭建脚手架
Vue.js中v-for指令的用法介绍
Mar 13 #Vue.js
Vue如何清空对象
Mar 03 #Vue.js
You might like
php保存任意网络图片到服务器的方法
2015/04/14 PHP
js tab 选项卡
2009/04/26 Javascript
js模拟类继承小例子
2010/07/17 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JSONP之我见
2015/03/24 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
单链表反转python实现代码示例
2018/02/08 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python列表(List)知识点总结
2019/02/18 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
python 制作网站小说下载器
2021/02/20 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
电气自动化自荐信
2013/10/10 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
村庄绿化方案
2014/05/07 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
个人优缺点总结
2015/02/28 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python