nicky132 opened a new issue #15152:
URL: https://github.com/apache/echarts/issues/15152
import React, { Component } from 'react';
import './index.scss';
// 引入柱状图
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
class AlarmTrendyTest extends Component {
constructor(props){
super(props);
this.state = {
isFinished:false,
totalData:[],//告警总数
urgentData:[],//紧急告警
color:'#BD60F6'
}
}
drawEcharts(){
//环形图百分比
var AlarmTrendyTest_val =
document.getElementsByClassName("AlarmTrendyTest")[0];
var chart = echarts.init(AlarmTrendyTest_val);
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
emphasis: {
focus: 'series'
},
label:{ //---图形上的文本标签
show:false,
position:'insideTop', //---相对位置
rotate:0, //---旋转角度
color:'#eee',
},
itemStyle:{ //---图形形状
color:'#1890FF',
barBorderRadius:[18,18,18,18],
},
barWidth:'11', //---柱形宽度
barCategoryGap:'4', //---柱形间距
markPoint: {
position:'top',
symbol: 'circle',
itemStyle: {
normal: {
label: {
show: true,
color: '#fff',
formatter: function(param) {
if (param.data.coord[2]) {
let newOption = option;
option.series[0].markPoint.itemStyle.normal.color
= 'green';
return '正常运行'
} else {
let newOption = option;
option.series[0].markPoint.itemStyle.normal.color
= 'red';
return '无响应'
}
}
},
color: this.state.color //这里要根据不同数据，动态设置不同气泡的颜色
}
},
symbolSize: [50, 50],
symbolOffset: [0, 0],
data:[{
name: '啦啦',
coord: [0,140,false]
},
{
name: '天天',
coord: [1,200,true]
},
{
name: '委婉',
coord: [2,160,true]
},
{
name: '444',
coord: [3,90,true]
},
{
name: '555',
coord: [4,80,true]
},
{
name: '寄快递',
coord: [5,120,true]
},
{
name: '看看',
coord: [6,140,false]
},
]},
}]
}
option && chart.setOption(option,true);
chart.resize();//区域更新
window.addEventListener('resize', ()=>{chart.resize()})
}
componentDidMount(){
this.drawEcharts();
window.addEventListener('resize', this.drawEcharts())
}
componentDidUpdate(pre,old){
const {color} = this.state;
// alert(pre.color)
// alert(color)
// alert(pre.color != color)
// if(pre.color != color){
// this.drawEcharts()
// }
}
componentWillUnmount(){
window.removeEventListener('resize',this.drawEcharts())
}
render() {
return (
<div className="AlarmTrendyTest"></div>
)
}
}
export default AlarmTrendyTest
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
