<template>
<div>
<div id="textEcharts" style="width:100%;height: 295px;"></div>
</div>
</template>
<script>
export default {
name: 'textEcharts',
data() {
return {
dataItem:[
{
"key": "1",
"label": "一类",
"oneLevel": 5,
"twoLevel": 10,
"threeLevel": 15,
},
{
"key": "2",
"label": "二类",
"oneLevel": 19,
"twoLevel": 15,
"threeLevel": 20,
},
{
"key": "3",
"label": "三类",
"oneLevel": 4,
"twoLevel": 5,
"threeLevel": 0,
}
],
valData: [[],[],[]],
legendData: {
data: ['[0-10]','[10-20]', '[20-30]']
},
seriesData: [
{ name: '[0-10]', type: 'bar', stack: 'total', label: { show: true, formatter: this.formatterFun }, emphasis: { focus: 'series' },
data: [0, 0, 0],
},
{ name: '[10-20]', type: 'bar', stack: 'total', label: { show: true, formatter: this.formatterFun }, emphasis: { focus: 'series' },
data: [0, 0, 0]
},
{ name: '[20-30]', type: 'bar', stack: 'total', label: { show: true, formatter: this.formatterFun }, emphasis: { focus: 'series' },
data: [0, 0, 0]
}
],
xAxis: {
type: 'category',
axisLabel:{interval:0,rotate:0},
data: []
},
}
},
methods: {
//获取数据
getData(){
for (let item of this.seriesData) {
item.data = [];
}
this.drawChart();
},
// 堆叠条形图
drawChart() {
this.xAxis.data=[];
// 基于准备好的dom,初始化echarts实例
let textEcharts = this.$echarts.init(document.getElementById("textEcharts"));
let item = this.dataItem;
for (let i of item) {
//获取x轴显动态示
this.xAxis.data.push(i.label);
let index = this.xAxis.data.indexOf(i.label);
let sum = i.oneLevel + i.twoLevel + i.threeLevel ;
//计算当前数据占百分之多少
this.seriesData[0].data[index] = (parseFloat(i.oneLevel)/parseFloat(sum)*100).toFixed(2)
this.seriesData[1].data[index] = (parseFloat(i.twoLevel)/parseFloat(sum)*100).toFixed(2)
this.seriesData[2].data[index] = (parseFloat(i.threeLevel)/parseFloat(sum)*100).toFixed(2)
this.valData[0][index] = i.oneLevel;
this.valData[1][index] = i.twoLevel;
this.valData[2][index] = i.threeLevel;
}
let xAxisData = this.xAxis.data;
//x轴倾斜
if (item.length > 9) {
this.xAxis.axisLabel.rotate = 45
} else {
this.xAxis.axisLabel.rotate = 0
}
let seriesData = this.seriesData;
let valData = this.valData;
// 指定图表的配置项和数据
let option = {
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },
formatter: function(params) {//这里就是控制显示的样式
let relVal = params[0].name;
let serieIdx = xAxisData.indexOf(params[0].name);
for (let i = 0, l = params.length; i < l; i++) {
//marker 就是带颜色的小圆圈 seriesName x轴名称 value y轴值 后面就是计算百分比
relVal += '<br/>'+ params[i].marker + params[i].seriesName + ' : 数量 : '+ parseFloat(valData[i][serieIdx]) +', 百分比 : ' + seriesData[i]['data'][serieIdx] + "%";
}
return relVal;
},
},
legend:[{top:'bottom'}, {data: this.legendData}],
grid: { top:'10%', left: '4%', right: '5%', bottom: '23%', containLabel: true },
xAxis:this.xAxis,
yAxis: [
{ type: 'value',
axisLabel: { show: true, interval: 'auto', formatter: '{value} %' },
show: true, max:100, min:0
}
],
series:this.seriesData,
color:['#c2b5e5', '#cddc79','#f6cca6'],
};
// 使用刚指定的配置项和数据显示图表。
textEcharts.setOption(option,true);
window.addEventListener("resize",function(){
textEcharts.resize();
});
},
formatterFun: function(params) {
let seriesIndex = params.seriesIndex;
let dataIndex = params.dataIndex;
let val = this.valData[seriesIndex][dataIndex]
return val === 0 ? '' : val + '';
}
},
mounted() {
this.getData();
}
}
</script>
<style scoped>
</style>
(vue+echarts)堆叠图显示百分之多少
最新推荐文章于 2024-05-22 08:52:46 发布