弹窗里面画echarts图 el-popover
处分
{{punishList.dj}}人
样式:
方法:
async handlePunishment(type, index) {
let params = Object.assign({}, this.params);
params.dataType = type;
let res = await getAction("/casetrial/getSecondPunish", params);
let arr = res.data.punishList;
// console.log(arr, "情况统计下钻");
let data = [];
if (arr.length > 0) {
arr.forEach(item => {
data.push({
value: item.count,
name: item.level
});
});
let str = "punishment" + index;
// console.log(this.$refs[str], "this.$refs[str]");
const myChart = this.$echarts.init(this.$refs[str]);
// console.log(myChart, "myChart this.$refs[str]");
this.drawPunishmentEcharts(myChart, type, data);
}
},
// 情况统计下钻 图形
drawPunishmentEcharts(myChart, title, echartData) {
const colorList = [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "#006AFF" // 0% 处的颜色
},
{
offset: 0,
color: "#8CE2FF" // 100% 处的颜色
}
]
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#92F092" // 0% 处的颜色
},
{
offset: 1,
color: "#4BB84B" // 100% 处的颜色
}
]
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#8BA7D8" // 0% 处的颜色
},
{
offset: 1,
color: "#8FABDA" // 100% 处的颜色
}
]
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#22B3FF" // 0% 处的颜色
},
{
offset: 1,
color: "#62C6FA" // 100% 处的颜色
}
]
}
];
let formatNumber = function(num) {
let reg = /(?=(\B)(\d{3})+$)/g;
return num.toString().replace(reg, ",");
};
let option = {
color: colorList,
title: {
text: title,
show: true, // 是否显示标题,默认 true。
padding: [10, 0, 5, 0],
textStyle: {
color: "white",
fontSize: fontChart(18),
fontFamily: "Alibaba PuHuiTi",
fontWeight: 600
},
left: "center"
},
tooltip: {
trigger: "item",
borderColor: "rgba(255,255,255,.3)",
backgroundColor: "rgba(13,5,30,.6)",
borderWidth: 1,
padding: 5,
textStyle: {
color: "#fff"
}
},
legend: {
// orient: "vertical",
bottom: 10,
// right: 5,
itemWidth: 20,
itemHeight: 10,
itemGap: 15,
borderRadius: 4,
textStyle: {
color: "white",
fontFamily: "Alibaba PuHuiTi",
fontSize: fontChart(16),
fontWeight: 400
}
},
series: [
{
type: "pie",
roseType: "radius",
radius: ["5%", "50%"],
center: ["50%", "45%"],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: "#15213F",
borderWidth: 4
}
},
label: {
normal: {
formatter: e => {
let newStr = " ";
let start = 0; //开始截取位置
let end = 0; //截取结束位置
const name_len = e.name.length; //每个内容名称的长度
const max_name = 5; //每行显示的最大长度
const new_row = Math.ceil(name_len / max_name); //显示行数
if (name_len > max_name) {
//如果名称长度大于每行最大显示长度，则
for (let i = 0; i < new_row; i++) {
//循环行数
let old = ""; //每次截取的字符
start = i * max_name; //截取的起点
end = start + max_name; //截取的终点
if (i == new_row - 1) {
//如果是最后一行
old = e.name.substring(start);
} else {
old = e.name.substring(start, end) + "\n"; //截取内容加换行
}
newStr += old; //拼接字符串
}
} else {
//否则不变显示
newStr = e.name;
}
return (
"{value|" +
formatNumber(e.value) +
"%" +
"}\n{name|" +
newStr +
"}"
);
},
rich: {
name: {
fontSize: fontChart(14),
color: "#F0F0F0"
},
value: {
fontSize: fontChart(18),
fontWeight: "bolder",
color: "#F0F0F0"
}
},
overflow: "none"
}
},
labelLine: {
length: 1,
length2: 5
}
}
]
};
option && myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
},