这是给自己写的 记忆不太好
展示效果
视图代码
<div> //按钮部分
<div>分析维度:</div>
<div class="margin-top">
<div>
<el-button
v-for="(item, index) in buttons"
:key="index"
:disabled="item.disabled"
@click="btn(item)"
>{{ item.name }}</el-button
>
</div>
</div>
</div>
// 图展示区域
<div class="flex" style="height: 25vh; overflow: auto">
<div :class="areas.length == 0 ? 'meiyoushuju' : 'youshuju'">
暂无数据
</div>
<div v-for="(item, index) in areas" :key="index">
<div
class="chartsis chart"
@click="echarts(item, index)"
:class="subscript == index ? 'background-color' : ''"
></div>
<span class="span">{{ item.groupKeyDisplay }}</span>
</div>
</div>
引入对应的echarts
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
ToolboxComponent,
} from "echarts/components";
功能部分
export default defineComponent({
setup(){
// 对应的点击按钮
let buttons = ref([
{ name: "国际区域", disabled: false, groupName: 0 },
{ name: "国家", disabled: false, groupName: 1 },
{ name: "国内大区", disabled: false, groupName: 2 },
{ name: "省", disabled: false, groupName: 3 },
{ name: "品牌", disabled: false, groupName: 7 },
{ name: "产品类别", disabled: false, groupName: 8 },
{ name: "渠道", disabled: false, groupName: 5 },
{ name: "部门", disabled: false, groupName: 6 },
{ name: "业务员", disabled: false, groupName: 4 },
]);
// 存储点击区域后的数据
let areas = ref([]);
return{
buttons ,
areas
}
methods:{
// 点击对应区域显示该区域的信息图
btn(item: any) {
let datas = {
groupWhere: "",
groupName: item.groupName,
month: this.TimeData.month,
year: this.TimeData.year,
};
if (this.panduan == null) {
ElMessage.error("请先选中查询日期");
} else {
this.textSize = item.name;
item.disabled = true;
this.lists.push(item.name);
// 仪表盘
groupreach(datas).then((res) => {
this.areas = res.data;
this.$nextTick(() => { //这里是页面加载完后进行数据处理 数据更新后会更新到视图上
let roseCharts = document.getElementsByClassName("chartsis"); // 对应地使用ByClassName5
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
PieChart,
LegendComponent,
ToolboxComponent,
CanvasRenderer,
]);
for (let i = 0; i < this.areas.length; i++) {
let myEchart = echarts.init(roseCharts[i]);
myEchart.setOption({
series: [
{
type: "gauge",
axisLine: {
lineStyle: {
width: 5,
color: [
[0.3, "#fd666d"],
[0.7, "#67e0e3"],
[1, "#37a2da"],
],
},
},
pointer: {
itemStyle: {
color: "auto",
},
},
axisTick: {
distance: -5,
length: 5,
lineStyle: {
color: "#fff",
width: 2,
},
},
splitLine: {
distance: -5,
length: 5,
lineStyle: {
color: "#fff",
width: 4,
},
},
axisLabel: {
color: "auto",
distance: 7,
fontSize: 8,
},
detail: {
valueAnimation: true,
formatter:
"达成率" +
(res.data[i].completeRate != 0
? (res.data[i].completeRate * 100).toFixed(3)
: res.data[i].completeRate) +
"%",
color: "auto",
fontSize: 8,
},
data: [
{
value:
res.data[i].completeRate != 0
? (res.data[i].completeRate * 100).toFixed(3)
: res.data[i].completeRate,
},
],
},
],
});
}
});
// console.log(this.areas, this.lists);
});
}
},
}
})