You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

209 lines
5.1 KiB
Vue

<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "230px",
},
chartData: {
type: Array,
default: [],
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(newValue, oldValue) {
this.chart.dispose();
this.chartData = newValue;
this.initChart(); //值发生改变则渲染一次echarts
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
var ydata = [];
var color = [
"#8d7fec",
"#5085f2",
"#e75fc3",
"#f87be2",
"#f2719a",
"#fca4bb",
"#f59a8f",
"#fdb301",
"#57e7ec",
"#cf9ef1",
];
var xdata = [];
if (this.chartData) {
this.chartData.forEach((item) => {
let a = {};
a.name = item.productName;
a.value = item.quantitySplit;
xdata.push(item.productName);
ydata.push(a);
});
}
this.chart.setOption({
// backgroundColor: "rgba(255,255,255,1)",
color: color,
legend: {
orient: "vartical",
x: "left",
top: "0%",
left: "32%",
bottom: "0%",
data: xdata,
itemWidth: 8,
itemHeight: 8,
itemGap: 16,
/*formatter:function(name){
var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
for(var i = 0; i < option.series[0].data.length; i++){
if(name==oa[i].name){
return ' '+name + ' | ' + oa[i].value + ' | ' + (oa[i].value/num * 100).toFixed(2) + '%';
}
}
}*/
formatter: function (name) {
return "" + name;
},
},
series: [
{
type: "pie",
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度0 ~ 360
radius: ["50%", "85%"],
center: ["20%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
//图形样式
normal: {
borderColor: "#ffffff",
borderWidth: 6,
},
},
label: {
normal: {
show: false,
position: "center",
formatter: "{text|{b}}\n{c} ({d}%)",
rich: {
text: {
color: "#666",
fontSize: 14,
align: "center",
verticalAlign: "middle",
padding: 8,
},
value: {
color: "#8693F3",
fontSize: 20,
align: "center",
verticalAlign: "middle",
},
},
},
emphasis: {
show: true,
textStyle: {
fontSize: 24,
},
},
},
data: ydata,
},
],
});
let dataCount1 = ydata.length;
this.chart.on("mouseover", (e) => {
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
// 根据当前option中data的length遍历取消其他高亮
for (let i = 0; i < dataCount1; i++) {
if (i != e.dataIndex) {
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: i,
});
}
}
});
//鼠标移出后显示之前默认高亮的那块,其他取消高亮
this.chart.on("mouseout", (e) => {
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
if (e.dataIndex !== 0) {
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
} else {
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
}
});
setTimeout(() => {
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 1,
});
}, 500);
},
},
};
</script>