<template> <div> <div class="chart" v-for="index of list.length" :key="index" :id="id + index" ></div> </div> </template> <script> import util from "@/helper/util.js"; import partten from "@/helper/partten.js"; import * as echarts from "echarts"; export default { name: "percent-pie", componentName: "percent-pie", props: { width: { type: String, default: "100%", }, height: { type: String, default: "18.519vh", }, // 传入数据 list: { type: Array, default: () => [], }, wpId: { type: String, default: "", }, total: { type: Number, default: 150, }, theme: { type: Boolean, default: false, }, colors: { type: Array, default: () => ["#FF9B23", "#1C99FF"], }, }, data() { return { id: "", chart: null, firstAnimation: true, }; }, computed: { datas() { return this.list.map((t) => { return t.value; }); }, }, methods: { resize() {}, initChart(value, index) { var currColor = value.color; var $dom = document.getElementById(this.id + (index + 1)); $dom.style.width = this.width; $dom.style.height = `calc(${this.height} / ${this.list.length} - 4px)`; let chart = echarts.init($dom); let option = { xAxis: { // max: value.total, splitLine: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, axisTick: { show: false, }, }, grid: { left: 16, top: 20, // 设置条形图的边s距 right: 0, bottom: 0, containLabel: true, }, yAxis: [ { type: "category", inverse: true, data: [value], axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false, }, }, ], series: [ // 内 { type: "bar", barWidth: 6, animation: this.firstAnimation, // legendHoverLink: false, // silent: true, itemStyle: { normal: { color: function (params) { return { type: "linear", x: 100, y: 10, x2: 1, y2: 0, colorStops: [ { offset: 0, color: currColor, // 0% 处的颜色 }, { offset: 1, color: currColor, // 100% 处的颜色 }, ], }; }, shadowBlur: 10, shadowColor: "rgba(255, 255, 255, 0.30)", }, }, label: { normal: { show: false, position: [0, -20], formatter: function (param) { return param.data.value; }, textStyle: { color: currColor, // this.$store.state.themeName === "dark" ? "#ffffff" : "#000", fontSize: 12, }, }, }, data: [value], z: 1, animationEasing: "elasticOut", }, // 三角 { type: "pictorialBar", symbolPosition: "end", animation: this.firstAnimation, data: [value.value], symbol: "triangle", symbolOffset: [0, -10], symbolSize: [5, 5], symbolRotate: 180, itemStyle: { normal: { borderWidth: 0, color: function (params) { return currColor; }, // shadowBlur: 2, // shadowColor: "rgba(255, 255, 255, 0.80)", }, }, }, // 分隔 { type: "pictorialBar", itemStyle: { normal: { color: this.theme ? "#fff" : "#000", }, }, animation: this.firstAnimation, symbolRepeat: "fixed", symbolMargin: 4, symbol: "rect", symbolClip: true, symbolSize: [1, 8], symbolPosition: "start", symbolOffset: [8, -1], // symbolBoundingData: value.total, symbolBoundingData: this.handleElectricDetail(value), symbolRotate: -15, data: [value], z: 2, animationEasing: "elasticOut", }, // 外边框 { type: "pictorialBar", animation: this.firstAnimation, symbol: "rect", // symbolBoundingData: value.total, symbolBoundingData: this.handleElectricDetail(value), itemStyle: { normal: { color: "none", }, }, label: { normal: { formatter: (params) => { return "{gm|}{f| " + params.data + "}"; }, rich: { f: { color: this.$store.state.themeName === "dark" ? "#fff" : "#000", fontSize: 14, lineHeight: 20, fontFamily: "Bicubik", }, gm: { backgroundColor: currColor, width: 4, height: 4, lineHeight: 20, verticalAlign: "middle", borderRadius: [50, 50, 50, 50], }, }, position: "right", distance: 8, // 向右偏移位置 show: true, }, }, // data: [+value.total], }, // 外框 { type: "bar", animation: this.firstAnimation, name: "外框", barGap: "-120%", // 设置外框粗细 data: [ { // value: value.total, value: this.handleElectricDetail(value), itemStyle: { normal: { color: "transparent", borderColor: currColor, // [, "#333"], borderWidth: 1, // 边框宽度 // barBorderRadius: 0, //圆角半径 opacity: 0.5, label: { // 标签显示位置 show: false, position: "top", // insideTop 或者横向的 insideLeft }, }, }, }, ], barWidth: 9, }, ], }; chart.clear(); chart.setOption(option); this.resize = function () { chart.resize(); }; window.removeEventListener("resize", this.resize); window.addEventListener("resize", this.resize); }, handleElectricDetail(value) { let number = 0 if (this.wpId === "GJNY_SXGS_DBXNY_ZGS0") { if (value.id === 'day') { number = 800 } else { number = 12000 } } else { if (value.id === 'day') { number = 400 } else { number = 4000 } } return number }, }, created() { this.id = "pie-chart-" + util.newGUID(); }, mounted() { // this.$nextTick(() => { // this.$el.style.width = this.width; // this.$el.style.height = this.height; // this.list.forEach((value, index) => { // this.initChart(value, index); // }); // this.firstAnimation = false; // }); }, // updated() { // this.$nextTick(() => { // this.list.forEach((value, index) => { // this.initChart(value, index); // }); // }); // }, watch: { list: { handler(val) { if (val && val.length) { this.$nextTick(() => { this.$el.style.width = this.width; this.$el.style.height = this.height; this.list.forEach((value, index) => { this.initChart(value, index); }); this.firstAnimation = false; }); } }, deep: true, immediate: true, }, "$store.state.theme"() { this.list.forEach((value, index) => { this.initChart(value, index); }); }, }, unmounted() { window.removeEventListener("resize", this.resize); }, }; </script> <style lang="less"> .chart { width: 100%; height: 100%; display: inline-block; cursor: default; } </style>