vue+echarts实现疫情折线图

效果：

代码：

1. <<template>
2.     <div>
3.         <div id="left1" style = "height:800px;width:100%"></div>
4.     </div>
5. </template>
7. <script>
8. //疫情数据
10. //
12. export default {
13.     data() {
14.         return {
16.             data:{
17.                 //疫情数据太多 放不下 要的滴滴我
18.             }
19.         };
20.     },
22.     mounted() {
23.         //初始化echarts
24.         var left1Chart = this.$echarts.init(document.getElementById('left1'))
25.         //配置项
26.         var option = {
27.             //标题
28.             title:{
29.                 text:"全国累计趋势",
30.                 textStyle:{
31.                     color:'blue'
32.                 },
33.                 left:'left'
34.             },
35.             //触发类型(就是鼠标移上去 能够显示信息 不配置默认没有)
36.             tooltip:{
37.                 trigger:'axis',
38.                 axisPointer:{
39.                     type:'line',                    //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
40.                     lineStyle:{
41.                         color:'#7171C6'
42.                     }
43.                 }
44.             },
45.             //图例组件
46.             legend:{
47.                 data:["累计确诊","累计治愈","累计死亡"],
48.                 left:"right"
49.             },
50.             //图形位置(就是图例组件的位置)
51.             grid:{
52.                 left:'4%',
53.                 right:'6%',
54.                 bottom:'4%',
55.                 top:50,
56.                 containLabel:true
57.             },
58.             //x轴(横)
59.             xAxis:[{
60.                 type:'category',
61.                 data:[]
62.             }],
63.             //y轴(竖)
64.             yAxis:[{
65.                 type:'value',
66.                 //坐标轴刻度标签的相关设置。
67.                 axisLabel:{
68.                     color:'blue',
69.                     fontSize:12,
70.                     //对y轴数据格式进行处理
71.                     formatter:function(value){
72.                         if(value >= 1000){
73.                             value = value / 1000 + 'k'
74.                         }
75.                         return value;
76.                     }
77.                 },
78.                 //y轴线设置显示 默认显示y轴
79.                 axisLine:{
80.                     show:true
81.                 },
82.                 //与x轴平行的线样式
83.                 splitLine:{
84.                     show:true,                  //是否显示分割线
85.                     lineStyle:{                 //分割线样式
86.                         color:'#17273B',
87.                         width:1,
88.                         type:'solid',
89.                     }
90.                 }
91.             }],
92.             series:[{
93.                 name:'累计确诊',         //要与图例名字对应
94.                 type:'line',            //折线图
95.                 smooth:true,            //平滑曲线显示  
96.                 data:[]                 //数据区域
97.             },{
98.                 name:"累计治愈",
99.                 type:'line',
100.                 smooth:true,
101.                 data:[]
102.             },{
103.                 name:"累计死亡",
104.                 type:'line',
105.                 smooth:true,
106.                 data:[]
107.             }]
108.         };
110.         //获得疫情数据
111.         var chinaDayList = this.data.chinaDayList
114.         //遍历每一天的数据
115.         for(var day of chinaDayList){
116.             console.info(day)
117.             //x轴 时间
118.             option.xAxis[0].data.push(day.date)
119.             //累计确诊
120.             option.series[0].data.push(day.confirm)
121.             //累计治愈
122.             option.series[1].data.push(day.heal)
123.             //累计死亡
124.             option.series[2].data.push(day.dead)
125.         }
127.         //使用刚指定的配置项和数据显示图标
128.         left1Chart.setOption(option);
129.     },
131.     methods: {
132.         
133.     },
134. };
135. </script>
137. <style lang="scss" scoped>
139. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。