pictorialBar.vue
3.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
<div>
<basic ref="basic" :chartId="chartId" :chartData="chartData"></basic>
</div>
</template>
<script>
import mixin from './mixin';
export default {
mixins: [mixin],
data() {
return {
}
},
methods: {
/**
* 预处理option参数
* */
preChartData(cdata) {
return cdata;
},
/**
* 处理option参数
* */
dealChartData(optionFormat) {
// 特殊配置项
let {
grid,
_color,
usePercent = true
} = optionFormat.otherConf;
optionFormat.color = _color||[new this.$echarts.graphic.LinearGradient(0,0,0,1,[
{
offset:0,
color:'#f4cedd'
},
{
offset:1,
color:'#f16595'
}
])];//this.getRandomColors(optionFormat.series.length);
optionFormat.grid = grid || { top: 20, right: 0, bottom: 20, left: 40 };
optionFormat.legend = {show:false};
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
lineStyle: {
color: "#444"
}
};
let yAxis = {
type: "value",
splitLine: {
show: true,
lineStyle:{
color:'#eee'
}
},
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false }
};
optionFormat.xAxis = Object.assign({},optionFormat.xAxis,{
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: '#000',
interval:0
}
});
optionFormat.yAxis = yAxis;
let totalNum = 0;
optionFormat.series.forEach((item,index) => {
if(usePercent){
item.data.forEach(dataItem => {
totalNum += (dataItem instanceof Object?parseInt(dataItem.value):dataItem);
});
}
item.type = 'pictorialBar';
item.symbol = 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z';
//item.barCategoryGap = '-130%';
item.label = {
position: 'top',
distance:20,
verticalAlign:'top',
show:true,
formatter:function(params){
if(usePercent){
let ratio = (params.value / totalNum * 100).toFixed(2) + '%';
return ratio+'/'+params.value;
}
return params.value;
},
color:'#f16595',
fontSize:14
}
});
let option = Object.assign({}, optionFormat);
option.tooltip.formatter = params => {
let htmls = "";
htmls += `<div style="font-size:14px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px;padding-right:15px;text-align: left;">${params[0].name}</div><div>`;
params.forEach((item,idx) => {
htmls += `<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">${painter.$t('echarts.traffic')}：<span style="color:#5093fa">${item.value|| "--"}</span></p>`;
let ratio = (item.value / totalNum * 100).toFixed(2) + '%';
htmls += `<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">${painter.$t('echarts.proportion')}：<span style="color:#5093fa">${ratio|| "--"}</span></p>`;
});
htmls += "</div>";
return htmls;
};
return option;
}
},
created() {
}
}
</script>
<style scoped>
.chart {
position: relative;
height: 500px;
}
</style>