<template> <div class="chartBox" :id="id"></div> </template> <script setup name="pieChartGszl"> import { guid } from "@/utils/ruoyi"; const { proxy } = getCurrentInstance(); import { nowSize } from "@/utils/util.js"; import moment from "moment"; const emit = defineEmits(["updateKey"]); const props = defineProps({ //刷新标志 refresh: { type: [String, Number], default: 1, }, //数据 echartData: { type: Object, default: {}, }, }); const id = guid(); const myChart = shallowRef(""); let activeName = ref(null); watch( () => props.refresh, (value) => { //先销毁实例 myChart.value && myChart.value.dispose(); intChart(); } ); //自适应 function resizeTheChart() { nextTick(() => { if (myChart.value) { myChart.value.resize(); } }); } //初始化 function intChart() { var data = [ { name: "泵站指令", value: 0, }, { name: "视频调度", value: 60, }, { name: "语音调度", value: 80, }, { name: "车辆调度", value: 100, }, ].sort(function (a, b) { return b.value - a.value; }); var max = Math.max(...data.map((item) => item.value)) + 100; function array2obj(array, key) { let resObj = {}; for (let i = 0; i < array.length; i++) { resObj[array[i][key]] = array[i]; } return resObj; } function getData(data) { let res = { series: [], yAxis: [], }; for (let i = 0; i < data.length; i++) { res.series.push({ name: i, type: "pie", clockwise: false, emphasis: { scale: false, }, radius: [63 - i * 8 + "%", 58 - i * 8 + "%"], center: ["25%", "50%"], label: { show: false, }, itemStyle: { label: { show: false, position: "center", }, labelLine: { show: false, }, borderWidth: 5, }, data: [ { value: data[i].value, name: data[i].name, }, { value: max - data[i].value, name: "", itemStyle: { color: "#27689594", borderWidth: 0, }, tooltip: { show: true, }, emphasis: { scale: false, }, }, ], }); } return res; } var objData = array2obj(data, "name"); var optionData = getData(data); myChart.value = proxy.echarts.init(document.getElementById(id)); myChart.value.clear(); // 绘制图表 myChart.value.setOption({ tooltip: { show: true, // formatter: "{a}:{d}%" }, legend: { // x: 'lefr', left: 220, y: "center", itemGap: 10, itemWidth: 10, itemHeight: 10, icon: "rect", formatter: function (name) { return "{title|" + name + "}{value|" + objData[name].value + "次" + "}"; }, textStyle: { rich: { title: { width: 10, fontSize: 16, color: "#fff", padding: [0, 0, 0, 10], }, value: { fontSize: 16, color: "rgb(0, 222, 255)", padding: [0, 100], }, }, }, }, color: ["#0E8CFDFF", "#08DA80FF", "#2ECAFFFF", "#FF915BFF", "#F5BA45FF"], grid: { top: "0", left: "50%", containLabel: false, }, yAxis: [ { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { interval: 0, inside: true, textStyle: { color: "#fff", fontSize: 16, }, show: true, }, data: optionData.yAxis, }, ], xAxis: [ { show: false, }, ], series: optionData.series, }); myChart.value.on("click", (params) => { activeName.value = params.dataIndex; emit("updateKey", activeName.value); myChart.value.resize(); }); } onMounted(() => { intChart(); window.addEventListener("resize", resizeTheChart); }); onBeforeUnmount(() => { myChart.value && myChart.value.dispose(); }); </script> <style lang="scss" scoped> .chartBox { width: 100%; height: 100%; } </style>