关于echarts:echarts配置饼图pro

echarts配置饼图pro

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.本期的分享到了这里就完结啦,心愿对你有所帮忙!让咱们一起致力走向巅峰!