mounted() {
this.myChart = this.$echarts.init(document.getElementById(this.domId));
this.getChartsMsg();
},
methods: {
//初始化图
initEcharts(data) {
var option;
option = {
legend: { type: "scroll", top: 20 },
tooltip: { trigger: "item" },
dataset: {
source: data,
},
series: [
{
type: "pie",
radius: "50%",
center: ["25%", "50%"],
label: {
show: true,
position: "inside",
formatter: "{b}:({d}%)",
},
startAngle: 45, // 起始角度 45
clockwise: false, // 逆时针
markLine: {
lineStyle: {
type: "solid",
color: "#BFBFBF",
},
symbol: "none",
data: this.addOtherData(data, 3),
},
},
{
type: "pie",
radius: "30%",
center: ["75%", "50%"],
encode: {
itemName: "product",
value: "2016",
},
label: {
show: true,
position: "inside",
formatter: "{b}:({d}%)",
},
},
],
};
this.myChart.on("click", (params) => {
this.getOnlyEcharts(params.data);
});
this.myChart.setOption(option);
},
//请求数据
getChartsMsg() {
let source = [
["项目", "2021", "2022"],
["块1", 415.3],
["块2", 214.4],
["块3", 816.4],
["块4", 11.4],
["块5", 32.45],
["块块1", 1022],
["块块2", 1012.8],
["块块3", 1013.8],
];
setTimeout(() => {
this.initEcharts(source);
}, 0);
},
// 获取表标线 对应点坐标
getMarkLineData(percent) {
// 1.获取画布 width,height
let height = this.myChart.getHeight();
let width = this.myChart.getWidth();
// 2. 根据 series[0].center 获取圆心坐标
let x0 = width * 0.25; // 圆心x轴坐标
//3.圆边上点坐标
// let x1 = x0 + r * cos(ao * 3.14 /180 )
// let y1 = y0 + r * sin(ao * 3.14 /180 )
// “其他” 终点坐标series[0].startAngle 45
let x1 = x0 + (height / 4) * Math.cos((45 * 3.14) / 180);
let y1 = height * 0.5 - (height / 4) * Math.sin((45 * 3.14) / 180);
let ao = 360 * (percent / 100); // 扇形角度
let ao1 = 0; // 用来计算的坐标角度
ao1 = ao <= 45 ? 45 - ao : 360 - (ao - 45);
if (ao1 < 270 && ao1 > 45) ao1 = 270; // 角度当270用,要不样式不好看
let x2 = 0,
y2 = 0;
x2 = x0 + (height / 4) * Math.cos((ao1 * 3.14) / 180);
y2 = height * 0.5 - (height / 4) * Math.sin((ao1 * 3.14) / 180);
return [
[
{
x: x1,
y: y1,
},
{
x: "75%",
y: "35%",
},
],
[
{
x: x2,
y: y2,
},
{
x: "75%",
y: "65%",
},
],
];
},
// 添加其他
addOtherData(datasetSource, len) {
let percent = 0;
let sum = 0; // 总计
datasetSource.forEach((data, rowIndex) => {
if (rowIndex > 0) {
// 第一行数据不算
let count = 0;
for (let key of data) {
let value = isNaN(key) ? 0 : Number(key);
if (count === 1) sum += value;
count++;
}
}
});
let endData = datasetSource.slice(datasetSource.length - len);
let other = ["其他"];
for (let i = 0; i < endData.length; i++) {
let j = 0;
for (let key of endData[i]) {
let value = isNaN(key) ? 0 : key;
if (j) other[j] ? (other[j] += value) : other.push(value);
j++;
}
endData[i].splice(1, 0, "");
}
datasetSource.push(other);
// "其他"占比
percent = sum ? ((other[1] / sum) * 100).toFixed(2) : 100;
return this.getMarkLineData(percent);
},
},
请求数据直接调用 this.getChartsMsg() 即可