// 单线折线图
drawonelineCharts(){
var echarts = require("echarts");
var lineCharts = document.getElementsByClassName('lineChart'); // 对应地使用ByClassName
this.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'); // 对应地使用ByClassName
this.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=this
response.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.data
this.$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
}],
]
},
},
]
};
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
