欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Highcharts实现3D饼图pie

程序员文章站 2022-06-09 23:34:03
...

Highcharts实现3D饼图pie

chartPie3D_market: function (docm) {
        let pieData = [];
        let slef = this;
        slef.NewMainCount.listY.forEach(function (item, index) {
          let op = {
            name: slef.NewMainCount.listX[index],
            y: slef.NewMainCount.listY[index]
          };
          pieData.push(op)
        });
        let myColors = ["#056ed9", "#fcc93a", "#1f912f", "#0286c4", "#cc617d"];
        let options = {
          chart: {
            type: "pie",
            backgroundColor: null,
            spacing: [0, 10, 10, 10],
            options3d: {
              enabled: true,
              alpha: 45
            }
          },
          title: {
            text: ""
          },
          tooltip: {
            formatter: function () {
              // console.log(this)
              return this.point.name + (this.y) + '户<br/><span style="color:' + this.color + '">\u25CF</span>占比:<b>' + (this.percentage).toFixed(2) + '%</b>'
            },
            style: {
              color: "#000",
              fontSize: 10
            }
          },
          plotOptions: {
            pie: {
              innerSize: "40%",
              depth: 45,
              colors: myColors,
              distance: 100, // 控制饼图外面的线的长短
              dataLabels: {
                enabled: true,
                formatter: function () {
                  return '<span style="color:' + this.point.color + '">' + this.point.name + '</span><br/><span>占比:' + this.percentage.toFixed(2) + '%</span><br/>' + (this.y) + '户</span>';
                },
                style: {
                  textOutline: "0px 0px contrast",
                  fontSize: 10,
                  color: "#fff"
                }
              }
            }
          },
          series: [
            {
              name: "市场主体",
              data: pieData
            }
          ]
        };
        Highcharts.chart(docm, options);
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
          return {
            radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
            stops: [
              [0, color],
              [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
            ]
          };
        });
      },
相关标签: Highcharts