You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.4 KiB
86 lines
2.4 KiB
import React, { Component } from 'react';
|
|
import * as echarts from 'echarts';
|
|
class XColumn extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
const { xAxis, yAxis, domId } = this.props;
|
|
this.createCharts(xAxis, yAxis, domId);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
let { xAxis, yAxis, domId } = nextProps;
|
|
if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(yAxis) != JSON.stringify(this.props.yAxis)) {
|
|
this.createCharts(xAxis, yAxis, domId);
|
|
}
|
|
}
|
|
|
|
createCharts = (xAxis, yAxis, domId) => {
|
|
this.clearEchart();
|
|
let chartDom = document.getElementById(domId);
|
|
this.chart = echarts.init(chartDom);
|
|
let option = this.getOption(xAxis, yAxis);
|
|
this.chart.setOption(option);
|
|
this.onSize = () => {
|
|
this.chart.resize();
|
|
}
|
|
window.addEventListener("resize", this.onSize);
|
|
};
|
|
// 组件销毁删除监听
|
|
componentWillUnmount() {
|
|
window.removeEventListener("resize", this.onSize)
|
|
}
|
|
clearEchart = () => {
|
|
if (this.chart) {
|
|
this.chart.dispose();
|
|
}
|
|
};
|
|
|
|
getOption = (xAxis, yAxis) => {
|
|
let option = {
|
|
title: {
|
|
text: '实时故障点位分析'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {},
|
|
grid: {
|
|
left: '3%',
|
|
right: '10%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01]
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: yAxis
|
|
},
|
|
series: [
|
|
{
|
|
name: '异常数',
|
|
type: 'bar',
|
|
data: xAxis,
|
|
barMaxWidth: 30,//柱子最大宽度
|
|
}
|
|
]
|
|
};
|
|
return option;
|
|
};
|
|
|
|
render() {
|
|
const { domId, width, height } = this.props;
|
|
return <div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />;
|
|
}
|
|
}
|
|
|
|
export default XColumn;
|