getBarData1() {
//测试数据
let dataValArr = [[1,2],[5],[2,4,6]];
let dataTypeArr = [["定位类","数据类"],["定位类"],["设备类","传感器","IOS"]];
var chartDom = document.getElementById('gjtjLeft');
if (!chartDom) return;
if (this.myChart_gjtj_left != null && this.myChart_gjtj_left != "" && this.myChart_gjtj_left != undefined) {
this.myChart_gjtj_left.dispose();
this.myChart_gjtj_left = null;
}
this.myChart_gjtj_left = this.$echarts.init(chartDom);
this.myChart_gjtj_left.clear();
var option;
option = {
title: {
text: '告警类型统计',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 14
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '5%',
right: '4%',
top: '20%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: dataTypeArr[0],
axisLabel: { //字体颜色
color: "#fff",
fontSize: 10,
},
axisLine: { //线颜色
lineStyle: {
color: "#737784",
type: 'dashed'
}
},
axisTick: {
show: false,
}
}],
yAxis: [{
type: 'value',
axisLabel: { //字体颜色
color: "#fff",
fontSize: 10,
},
axisLine: { //线颜色
lineStyle: {
color: "#737784",
}
},
//y轴区域内
splitLine: {
show: true,
lineStyle: {
color: "#737784",
type: 'dashed'
}
},
}],
series: [{
type: 'bar',
barWidth: '60%',
data: dataValArr[0],
barWidth: '15%',
itemStyle: { //颜色渐变代码
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: 'rgba(0,192,254,1)'
},
{
offset: 0.5,
color: 'rgba(0,192,254,0.7)'
},
{
offset: 1,
color: 'rgba(0,192,254,0.1)'
}
]
)
},
label: { //label要加入normal才可生效,label即为x轴对应Y轴的值
show: true,
color: '#fff', //设置渐变时候控制不到颜色,只能通过全局textStyle来控制
position: 'top', //柱状图上数字的定位
fontSize: 12
}
}]
};
option && this.myChart_gjtj_left.setOption(option);
//在此假设2秒更新一次数据;
let i = 0;
setInterval(()=>{
if(i > 1) i = -1;
i++;
let option = this.myChart_gjtj_left.getOption();
option.xAxis[0].data = dataTypeArr[i];
option.series[0].data = dataValArr[i];
option && this.myChart_gjtj_left.setOption(option,true);
},2000)
},
echarts 图表数据更新
最新推荐文章于 2024-06-20 15:06:48 发布