echarts遍历区域折线图，单线和多线

本文主要是介绍echarts遍历区域折线图，单线和多线，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

// 单线折线图drawonelineCharts(){var echarts = require("echarts");var lineCharts = document.getElementsByClassName('lineChart'); // 对应地使用ByClassNamethis.linecolor=['#01FFD4','#1C70DD','#01FFD4','#1C70DD','#01FFD4','#1C70DD']for(var i = 0;i < lineCharts.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素var myChart = echarts.init(lineCharts[i]);myChart.setOption({color:this.linecolor[i],// color:'#01FFD4',tooltip: {trigger: 'axis',axisPointer: {animation: false}},legend: {},grid: [{left: 40,right: 40,}, {left: 40,right: 40,}],xAxis: [{type: 'category',boundaryGap: false,axisLine: {onZero: true},data:this.linelist[i].xaxis,}, {gridIndex: 1}],yAxis: [{type: 'value',}, {gridIndex: 1}],series: [{name: this.linelist[i].chartTitle,type: 'line',smooth: true,symbol: 'circle',symbolSize: 9,showSymbol: false,markArea: {silent: true,label: {normal: {position: ['10%', '50%']}},data:[this.linelist[i].stackList]},data:this.linelist[i].yaxis}]},true)}},

// 双线折线图drawtwolineCharts(){var echarts = require("echarts");var lineCharts = document.getElementsByClassName('lineChart'); // 对应地使用ByClassNamethis.linecolor=['#01FFD4','#1C70DD','#01FFD4','#1C70DD','#01FFD4','#1C70DD']for(var i = 0;i < lineCharts.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素var myChart = echarts.init(lineCharts[i]);myChart.setOption({color:this.linecolor[i],// color:'#01FFD4',tooltip: {trigger: 'axis',axisPointer: {animation: false}},legend: {},grid: [{left: 40,right: 40,}, {left: 40,right: 40,}],xAxis: [{type: 'category',boundaryGap: false,axisLine: {onZero: true},data:this.linelist[i].xaxis,}, {gridIndex: 1}],yAxis: [{type: 'value',}, {gridIndex: 1}],series: this.linelist[i].yaxis},true)}},

折线图样式

//  中和岗位折线图getneutralizeline(){neutralizeline(this.time).then((response) => {let linecolor=['#01FFD4','#1C70DD']for (let i = 0; i < response.data.length; i++) {let _this=thisresponse.data[i].yaxis.forEach((item,index) => {_this.$set(item, 'type', 'line')_this.$set(item, 'smooth', true)_this.$set(item, 'itemStyle', {color:linecolor[index]})})}this.linelist=response.datathis.$nextTick(()=> {this.drawtwolineCharts()})})},

折线图数据

{"msg": "操作成功","code": 200,"data": [{"chartTitle": "中和PH值","legend": null,"unit": null,"xaxis": ["08:00","09:00","10:00","02:00","03:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "中和PH值","data": ["1","2","34","3","14.5","15.2","27","16.6","17.3"],"markArea": {"data": [[{"yAxis": 11},{"yAxis": 18}]]}}]},{"chartTitle": "中和糖度(12-14BX)","legend": null,"unit": null,"xaxis": ["08:00","09:00","10:00","23:00","00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "中和糖度(12-14BX)","data": ["11.7","12.4","13.1","13.8","14.5","5.4","34","11","21","12.4"],"markArea": {"data": [[{"yAxis": 12},{"yAxis": 16}]]}}]},{"chartTitle": "杀菌温度(A)","legend": null,"unit": null,"xaxis": ["08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "杀菌温度(A)","data": ["15.9","16.6","17.3","34.4","4.7","5.4","6.1","23.3","40"],"markArea": {"data": [[{"yAxis": 5},{"yAxis": 8}]]}},{"name": "杀菌温度(B)","data": ["6.1","9","14","7","16","23","4.23","15.6","23.5","43.2","45.3","43.2","3.5"],"markArea": {"data": [[{"yAxis": 5},{"yAxis": 7}]]}}]},{"chartTitle": "均值压力(A)","legend": null,"unit": null,"xaxis": ["03:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "均值压力(A)","data": ["13.8","35","15.2","23","8.9","24"],"markArea": {"data": [[{"yAxis": 11},{"yAxis": 15}]]}},{"name": "均值压力(B)","data": ["18","23","13.1","23","14.5","15.2","25","16.6","30"],"markArea": {"data": [[{"yAxis": 4},{"yAxis": 8}]]}}]},{"chartTitle": "高压压力(A)","legend": null,"unit": null,"xaxis": ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00"],"yaxis": [{"name": "高压压力(A)","data": ["11.7","12.4","22","32","14.5","15.2","12","34","46","24"],"markArea": {"data": [[{"yAxis": 19},{"yAxis": 25}]]}},{"name": "高压压力(B)","data": ["13.8","14.5","15.2","17","34","17.3","29","16.6","17.3"],"markArea": {"data": [[{"yAxis": 19},{"yAxis": 23}]]}}]}]
}

{"msg": "操作成功","code": 200,"data": [{"chartTitle": "辅料6","legend": null,"unit": null,"stackList": [{"yAxis": 5},{"yAxis": 12}],"xaxis": ["08:00","09:40","12:00","15:00","18:00","21:00","23:00","02:00","05:40","07:00"],"yaxis": ["7","10","13","16","19","22","25","28","34","3"]},{"chartTitle": "辅料5","legend": null,"unit": null,"stackList": [{"yAxis": 5},{"yAxis": 19}],"xaxis": ["08:00","09:40","12:00","15:00","18:00","21:00","23:00","02:00","05:40","07:00"],"yaxis": ["7","10","13","16","19","22","25","28","34","3"]}]
}

option = {
tooltip: {
trigger: 'axis',axisPointer: {
animation: false
}},
legend: {
data: ['流量'],
x: 'left'
},
axisPointer: {
link: {
xAxisIndex: 'all'
}},
grid: [{
left: 40,
right: 40,
}, {
left: 40,
right: 40,
}],
xAxis: [{type: 'category',
boundaryGap: false,
axisLine: {
onZero: true
},
data: ['0:00', '0:30',
'1:00', '1:30',
'2:00', '2:30',
'3:00', '3:30',
'4:00', '4:30',]
}, {
gridIndex: 1
}],yAxis: [{type: 'value',
}, {
gridIndex: 1
}],
series: [{
name: '数值',
type: 'line',
smooth: true,
markArea: {
silent: true,
data: [
[{
yAxis: 100,
}, {
yAxis: 200
}],
]
},
data: [113, 223, 332, 223, 232, 223, 322, 123, 222,32, 222, 232, 132, 123, 212]
},
{name:'报警',
type: 'line',
smooth: true,
data: [3,5,4,2,223, 332, 223, 232, 223, 322, 123, 222,32, 222, 232, 11,7,6],
markArea: {
silent: true,
data: [
[{
yAxis: 10,
}, {
yAxis: 90
}],
]
},
},
]
};

这篇关于echarts遍历区域折线图，单线和多线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---