Vue中使用echarts实现折线图

实现效果：

echarts使用说明请查看：Vue中使用echarts实现常用图表总结

option配置：

option = {
              legend: {
                 icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                 itemWidth: 10,  // 设置宽度
                 itemHeight: 4, // 设置高度
                 itemGap: 24, // 设置间距
                data: ['温度', '湿度'],
                textStyle: {
                    //文字样式
                    color: '#c1dafc',
                    fontSize: '12'
                },
                right: '30%',
                selectedMode: 'single'
              },
              tooltip: {
                  trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                splitLine: {
                    lineStyle: {
                        color: '#29457e'
                    }
                },
                axisLabel:{
    		        interval: 0
    	        },
                data: ['1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时',
                '9小时', '10小时', '11小时', '12小时', '13小时', '14小时', '15小时', '16小时',
                '17小时', '18小时', '19小时', '20小时', '21小时', '22小时', '23小时','24小时']
              },
              yAxis: [
                {
                  type: 'value',
                  axisTick:{       //y轴刻度线
                    show: false
                  },
                  name: '单位：(°C)',
                  min: 0,
                  max: 50,
                  interval: 10,
                  axisLabel: {
                    formatter: '{value}'
                  }
                }
              ],
              series: [
                {
                  name: '温度',
                  type: 'line',
                  itemStyle : {  
                                normal : {  
                                    lineStyle:{  
                                        color:'#b1de6a'  
                                    }  
                                }  
                  }, 
                  data: [2.0, 4.9, 7.0, 23.2, 25.6, 23, 25, 21, 26, 20, 25, 36, 48, ]
                },
                {
                  name: '湿度',
                  type: 'line',
                  itemStyle : {  
                                normal : {  
                                    lineStyle:{  
                                        color:'#4ab0ee'  
                                    }  
                                }  
                  }, 
                  data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 54, 63]
                }
              ]
            }

数据动态显示改变series中的data值即可

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~