【Echarts】echarts进度条，echarts联动，点击柱状图联动下面的柱状图
getBadWeatherChart() {
const that = this;
let option = {
tooltip: {
// 鼠标移入的住
trigger: 'item',
backgroundColor: '#fff',
triggerOn: 'click',
// position: function(point, params, dom, rect, size) {
// // 固定在顶部
// console.log(point);
// console.log(dom);
// // return [point[0], '25%'];
// },
position: 'top',
axisPointer: {
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'|'cross' cross为混合显示
shadowStyle: {
color: 'rgba(127,196,251,0.3)'
}
},
confine: true,
formatter: params => {
console.log(params);
return (
'' +
'事故数量' +
// params[0].value +
'24起，9%'
);
}
},
xAxis: {
type: 'category',
show: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 50,
// label: {
// show: true,
// position: 'inside',
// }
itemStyle: {
normal: {
label: {
show: true,
position: 'insideBottom',
textStyle: {
color: '#FFF'
}
},
color: function(params) {
return AccidentEportraitAnalysisComponent
.sevenColor[params.dataIndex];
}
}
}
}
]
};
that.badWeatherTopChart = echarts.init(that.chartRef.nativeElement);
that.badWeatherTopChart.setOption(option);
that.badWeatherTopChart.dispatchAction({
type: 'showTip',
// 可选，数据的 index
seriesIndex: 0,
dataIndex: 0,
position: ['10%', '32%']
});
that.badWeatherTopChart.dispatchAction({
type: 'highlight',
// 可选，数据的 index
seriesIndex: 0,
dataIndex: 0
});
let datatest = [18203, 23489, 29034, 104970, 131744, 630230],
datacz = [
[18203, 23489, 29034, 104970, 131744, 630230],
[122, 2333489, 292034, 1, 1, 2],
[24, 23, 43, 56, 23, 12]
];
this.badWeatherTopChart.on('click', function(params) {
console.log(params);
that.badWeatherTopChart.dispatchAction({
type: 'downplay'
});
that.badWeatherTopChart.dispatchAction({
type: 'highlight',
// 可选，数据的 index
dataIndex: params.dataIndex
});
datatest = datacz[params.dataIndex] || [45, 32, 234, 23, 2, 23];
that.getBadWeatherChart2(datatest);
that.cdr.markForCheck();
});
that.getBadWeatherChart2(datatest);
that.cdr.markForCheck();
}
getBadWeatherChart2(data) {
this.badWeatherTopChart2 = {
tooltip: [
{
show: false
}
],
legend: {
data: ['2011年', '2012年']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
show: false
}
],
yAxis: {
axisTick: {
show: false // 取消y轴的刻度线
},
type: 'category',
data: [
'事故程度A',
'事故程度B',
'事故程度C',
'事故程度D',
'事故程度E',
'事故程度F'
]
},
color: new (echarts as any).graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#0076C3' },
{ offset: 1, color: '#6CB4ED' }
]),
series: [
{
type: 'bar',
barWidth: 20,
silent: true,
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
textStyle: {
color: '#000'
},
formatter: ' {c} 起'
}
}
},
data: data
}
]
};
}
横向bar
option = {
title: {
text: '影响程度Top5',
left: 'left',
top: '10',
textStyle: {
fontSize: '14',
color: '#8aeafd'
}
},
grid: {
left: '10px',
right: '40px',
bottom: '10',
top: '40px',
containLabel: true
},
tooltip: {
trigger: 'axis',
confine: true,
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'category',
inverse: true,
axisTick: {
show: false
},
axisLabel: {
show: true,
color: '#45b5dc',
fontSize: '14'
},
axisLine: {
show: false
},
data: ['影响程度1','影响程度2','影响程度3','影响程度4','影响程度5']
},
series: [{
name: '',
type: 'bar',
barWidth: 14,
stack: '',
label: {
show: true,
position: 'right',
textStyle: {
color: '#ccc759',
fontSize: '14'
}
},
itemStyle: {
normal: {
color: '#199ed2',
barBorderRadius: 5,
}
},
data: [10,20,30,40,20]
}]
};
