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值即可