118 lines
2.9 KiB
JavaScript
118 lines
2.9 KiB
JavaScript
|
|
import React, { Component } from 'react';
|
|
import './Chart4.less'
|
|
import ReactECharts from 'echarts-for-react';
|
|
|
|
|
|
|
|
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
|
var fontColor = '#fff'
|
|
var lineColor = 'rgba(33, 50, 89,0.8)'
|
|
|
|
|
|
|
|
|
|
|
|
class Chart3 extends Component {
|
|
|
|
|
|
getOption = () => ({
|
|
|
|
|
|
|
|
legend: {
|
|
right: "0%",
|
|
width: "70%",
|
|
height: "14%",
|
|
itemWidth: 17,
|
|
itemHeight: 13.5,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: "#F1F1F3",
|
|
},
|
|
|
|
data: name
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '5%',
|
|
top:'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: {
|
|
|
|
name:'发电量',
|
|
type: 'line',
|
|
showSymbol: true,
|
|
symbol: "circle",
|
|
symbolSize:8,
|
|
symbolBorder:"rgba(17, 36, 246,0.1)",
|
|
data: [200,320,121,125,585,213,521,326,542,258,632,145,258,632,145],
|
|
lineStyle: {
|
|
width: 1,
|
|
color:"rgba(246, 23, 106,0.9)",
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(246, 23, 106,0.3)' },
|
|
{ offset: 0.5, color: 'rgba(246, 23, 106,0.2)' },
|
|
{ offset: 1, color: 'rgba(246, 23, 106,0.1)' }
|
|
]),
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#F6176A',
|
|
color: "rgba(4, 20, 36,0.8)",
|
|
},
|
|
|
|
}
|
|
})
|
|
|
|
render() {
|
|
return (
|
|
<div className='ButtonChart4itemDetailBorder'>
|
|
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
|
</div >
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Chart3;
|