echarts圆环图

DongDong.1

已于 2022-06-16 11:16:58 修改

阅读量651

点赞数

分类专栏： echarts

于 2022-06-13 14:09:19 首次发布

本文链接：https://blog.csdn.net/qq_37150922/article/details/125258849

版权

Echarts 饼图图表配置 JavaScript 数据可视化

关键词由CSDN通过智能技术生成

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

    initDevice() {
      let trendDom = echarts.init(document.getElementById("device"));
      let option = {
        title: { //圆环中间的文字
          text: this.titles,
          textAlign:'center',
          subtext: "设备",
          left: "39%",
          top: "center",
          textStyle: {
            fontSize: 20,
            color: "#333",
            lineHeight: 10,
            textAlign: "center",
          },
          subtextStyle: {
            fontSize: 14,
            fontWeight: 100,
            color: "#333",
            textAlign: "center",
          },
        },
        tooltip: {
          trigger: "item",
          transitionDuration: 0, //防止鼠标移入时页面出现抖动
        },
        color: ["rgb(19, 218, 147)", "rgb(255, 197, 66)", "rgb(82, 192, 245)"],
        legend: {
          icon: "circle",
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 30, // 设置间距
          top: "30%",
          right: "5%",
          orient: "vertical",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            center: ["40%", "50%"],
            avoidLabelOverlap: true//是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
            label: {
              position: "outside",
              formatter: "{b}\n{d} %",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: this.data,
          },
        ],
      };
      trendDom.setOption(option);
    },