let option = { // backgroundColor: "#fff", title: { text: "{num|" + data.value + "}{key| %}", subtext: this.$t(`kpiSummary.${data.name}`), x: "50%", y: "61%", textAlign: "center", textStyle: { rich: { num: { fontWeight: "bold", color: "#333", fontFamily: "微软雅黑", fontSize: 25 }, key: { fontWeight: "bold", color: "#333", fontFamily: "微软雅黑", fontSize: 15 } } }, subtextStyle: { lineHeight: 20, fontSize: 15 } }, data: [ { name: data.name } ], // tooltip: { // trigger: "item", // formatter: `{a} <br/> rate: ${data.value} %` // }, // 原生图形元素组件 graphic: [ { type: "image", id: "logo", left: data.left, top: data.top, // eslint-disable-next-line no-dupe-keys z: -10, // 图高度 bounding: "raw", rotation: 0, //旋转 origin: [50, 50], //中心点 scale: [1.0, 1.0], //缩放 style: { image: data.url, // width: 129, // height: 65, opacity: 1 } } ], series: [ { // 主圆环 name: data.name, type: "pie", radius: ["40%", "60%"], center: ["50%", "40%"], startAngle: 225, color: [ { // 线性渐变 type: "linear", x: 1, y: 0, x2: 0, y2: 0, colorStops: [ { offset: 0, color: "#37D7B3" // 0% 处的颜色 }, { offset: 1, color: "#1FB5AD" // 100% 处的颜色 } ] }, "transparent" ], hoverAnimation: true, // 是否开启 hover 在 box 上的动画效果。 legendHoverLink: false, // 图例经过时是否显示高亮 z: 10, labelLine: { normal: { show: false } }, data: [ { value: (75 * data.value) / 100 }, { value: 100 - (75 * data.value) / 100 } ] }, { // 背景圆环 name: "", type: "pie", radius: ["40%", "60%"], center: ["50%", "40%"], silent: true, // 坐标轴是否是静态无法交互。 startAngle: 225, // 起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。 labelLine: { // 标签的视觉引导线配置。 normal: { show: false } }, z: 5, data: [ { value: 75, itemStyle: { color: "#F0F0F0" } }, { value: 25, itemStyle: { color: "transparent" } } ] } ] }; eg.setOption(option);
2021年09月11日 08点09分
6