关于echarts:echarts配置饼图pro

47次阅读

共计 1515 个字符，预计需要花费 4 分钟才能阅读完成。

1. 开发环境 vue+echarts
2. 电脑系统 windows10 专业版
3. 在应用 vue+echarts 开发的过程中, 咱们常常会应用到饼图, 上面是我应用的一些分享, 心愿对你有所帮忙!
4.echarts 官网案例, 通过简略, 效果图如下:

5. 代码如下:

this.Chenoption= {
        tooltip: {
          trigger: "item",
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: "vertical",
          left: 0,
          itemWidth: 30,
          show: false, // 管制右边方形状态的显示
          itemHeight: 16,
          textStyle: {
            fontSize: 16, // 字体大小
            color: "wheat", // 字体色彩
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            left: 0,
            radius: ["35%", "75%"], // 管制饼图的大小
            label: {formatter: '{b|{b}：} {per|{d}%}',
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 4, // 管制 悬浮信息边框的大小
              borderRadius: 4,
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: data,
          },
        ],
      };

6. 在做我的项目中, 咱们也会有其余的需要, 如何把百分比换成具体的数值, 成果如下:

7. 代码配置如下:

this.Chenoption= {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: ({c})",
        },
        legend: {
          orient: "vertical",
          left: 0,
          itemWidth: 30,
          show: false, // 管制右边方形状态的显示
          itemHeight: 16,
          textStyle: {
            fontSize: 16, // 字体大小
            color: "wheat", // 字体色彩
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            left: 0,
            radius: ["35%", "75%"], // 管制饼图的大小
            label: {formatter: "{b|{b}：}{per|{c}}",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 4, // 管制 悬浮信息边框的大小
              borderRadius: 4,
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: data,
          },
        ],
      };

8. 次要批改代码:

9. 本期的分享到了这里就完结啦, 心愿对你有所帮忙! 让咱们一起致力走向巅峰!

正文完