1.效果图
初始类别，一级分类
点击行业分类后，进入二级分类，右下角有返回上一级
点击寄递行业中心1，进入三级分类，右下角有返回上一级
2.icon路径：https://wudan.blog.csdn.net/article/details/104039526
3.完整代码
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize"; // 动态自适应
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chartAnalysisPie",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
},
data() {
return {
chart: null,
mockData: { //初始数据
name: "工厂分类",
values: [
{ value: 335, name: "寄递行业" },
{ value: 310, name: "服装" },
{ value: 234, name: "餐饮 " },
{ value: 135, name: "建材" },
],
},
isShowBack: false, // 是否显示返回上一级
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart(item) {
let that = this;
// , "macarons"
this.chart = echarts.init(this.$el);
this.chart.setOption({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
orient: "vertical",
left: 15,
itemWidth: 14,
textStyle: {
color: "rgba(132, 214, 255, 1)",
},
},
toolbox: {
right: 40,
bottom: 20,
feature: {
myTool1: {
show: that.isShowBack,
title: "返回上一级",
icon:
"path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z",
// 点击返回事件
onclick: function (params) {
// alert("myToolHandler1");
// 点击返回时判断此次的类别 此次类别为二级类别（"工作中心分类"），将其赋值为一
// 级类别的数据，将其返回上一层
if (params.option.series[0].name == "工作中心分类") {
that.chart.dispose();
that.chart = null;
that.mockData = {
name: "工厂分类",
values: [
{ value: 335, name: "寄递行业" },
{ value: 310, name: "服装" },
{ value: 234, name: "餐饮 " },
{ value: 135, name: "建材" },
],
};
that.isShowBack = false;
that.initChart();
} else if (params.option.series[0].name == "工位分类") {
that.chart.dispose();
that.chart = null;
that.mockData = {
name: "工作中心分类",
values: [
{ value: 135, name: "寄递行业中心" },
{ value: 10, name: "服装中心" },
{ value: 202, name: "餐饮中心" },
{ value: 95, name: "建材中心" },
{ value: 55, name: "测试中心" },
],
};
that.initChart();
}
console.log(params.option.series[0].name);
console.log(params.option.series[0].data);
// params.option.series[0].name = '工作中心分类'
// params.option.series[0].data = [
// { value: 135, name: "寄递行业中心" },
// { value: 10, name: "服装中心" },
// { value: 202, name: "餐饮中心" },
// { value: 95, name: "建材中心" },
// ];
},
},
},
},
series: [
{
name: that.mockData.name,
type: "pie",
radius: "80%",
center: ["50%", "50%"],
data: that.mockData.values,
label: {
position: "inside",
formatter: "{c}",
// formatter: "{c}件\n{d}%",
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
// 图表点击事件
this.chart.on("click", function (params) {
console.log(params);
console.log(params.data.name);
//点击的类别是一级类别，将图表数据赋值二级类别的数据
if (params.seriesName == "工厂分类") {
that.chart.dispose();
that.chart = null;
that.isShowBack = true;
that.mockData = {
name: "工作中心分类",
values: [
{ value: 135, name: "寄递行业中心" },
{ value: 10, name: "服装中心" },
{ value: 202, name: "餐饮中心" },
{ value: 95, name: "建材中心" },
{ value: 55, name: "测试中心" },
],
};
that.initChart();
} else if (params.seriesName == "工作中心分类") {
that.chart.dispose();
that.chart = null;
that.isShowBack = true;
that.mockData = {
name: "工位分类",
values: [
{ value: 51, name: "寄递行业工位" },
{ value: 3, name: "服装工位" },
{ value: 19, name: "餐饮工位" },
{ value: 21, name: "建材工位" },
],
};
that.initChart();
}
});
},
},
};
</script>
