121 lines
2.8 KiB
JavaScript
121 lines
2.8 KiB
JavaScript
|
|
import React, { Component } from 'react';
|
|
import './Chart3.less'
|
|
import ReactECharts from 'echarts-for-react';
|
|
|
|
|
|
|
|
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
|
|
|
|
|
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
|
var fontColor = '#fff'
|
|
var lineColor = 'rgba(33, 50, 89,0.8)'
|
|
|
|
function makeseries(data, name, color) {
|
|
if (data) {
|
|
let All = []
|
|
for (let i in data) {
|
|
All.push({
|
|
name: name[i],
|
|
type: 'line',
|
|
showSymbol: false,
|
|
symbol: "circle",
|
|
data: data[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
color: color[i]
|
|
},
|
|
itemStyle: {
|
|
|
|
color: color[i],
|
|
|
|
},
|
|
})
|
|
}
|
|
return All;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
class Chart3 extends Component {
|
|
|
|
|
|
getOption = () => ({
|
|
|
|
title: {
|
|
text: '风机运行频率',
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "#52FFF8"
|
|
},
|
|
},
|
|
|
|
legend: {
|
|
right: "0%",
|
|
width: "70%",
|
|
height: "14%",
|
|
itemWidth: 17,
|
|
itemHeight: 13.5,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: "#F1F1F3",
|
|
},
|
|
// itemStyle: {
|
|
// color: "rgba(222, 9, 9, 1)"
|
|
// },
|
|
data: name
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%', containLabel: true
|
|
},
|
|
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
|
axisLabel: {
|
|
show: true,
|
|
color: fontColor,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: lineColor,
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
color: fontColor,
|
|
},
|
|
axisLine: {
|
|
show:true,
|
|
lineStyle: {
|
|
color: lineColor,
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: lineColor,
|
|
},
|
|
},
|
|
},
|
|
series: makeseries(this.props.data, name, color)
|
|
})
|
|
|
|
render() {
|
|
return (
|
|
<div className='LeftChart3itemDetailBorder'>
|
|
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
|
</div >
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Chart3;
|