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

Highcharts实现饼图pie

程序员文章站 2022-06-09 23:29:45
...

Highcharts实现饼图pie
上图类似

chartPie_market: function (docm) {
        let pieData = [];
        let slef = this;
        slef.MainCount.listY.forEach(function (item, index) {
          let op = {
            name: slef.MainCount.listX[index],
            y: slef.MainCount.listY[index]
          };
          pieData.push(op)
        });
        let myColors = ["#0e5dee", "#336699", "#ffe286", "#79eefc", "#fd6665", "#8bc89f", "#fca7c9", "#3399cc", "#cd7e29"];
        Highcharts.chart(docm, {
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie',
            backgroundColor: null,
            renderTo: 'container',
            spacing: [0, 10, 10, 10]
          },
          title: {
            // text: '数字经济核心产业',
            text: '',
            verticalAlign: "bottom",
            style: {
              color: "#fff",
              fontSize: 16
            }
          },
          colors: myColors,
          // legend: {
          //   align: "center",
          //   itemMarginBottom: 10,
          //   itemStyle: {
          //     color: "#fff",
          //     fontWeight: "400",
          //     fontSize: 10
          //   },
          //   itemHoverStyle: {
          //     color: "#fff"
          //   },
          //   symbolRadius: 2
          // },
          tooltip: {
            // pointFormat: '<span style="color:{point.color}">\u25CF</span><b>{point.y:.2f}亿元</b>',
            formatter: function () {
              // console.log(this)
              return this.point.name + '<br/><span style="color:' + this.color + '">\u25CF</span> <b>' + (this.y / 10000).toFixed(2) + '亿元</b>'
            },
            style: {
              color: "#000",
              fontSize: 10
            }
            // pointFormat: '<span style="color:{point.color}">\u25CF</span>{series.name} <b>{point.y}亿元</b>'
          },
          xAxis: {
            labels: {
              rotation: -45
            }
          },
          plotOptions: {
            pie: {
              borderColor: "#023248",
              borderWidth: 6,
              allowPointSelect: true,
              showInLegend: false,
              cursor: 'pointer',
              connectorColor: '#000000',
              dataLabels: {
                enabled: true,
                // distance: -70,
                style: {
                  textOutline: "0px 0px contrast",
                  color: "#fff",
                  fontSize: 10
                },
                // format: '{point.name}<br/>{y}亿元'
                formatter: function (el, index) {
                  // return '<span style="color:' + this.point.color + '">' + (this.percentage).toFixed(2) + '%</span>';
                  // return '<span style="color:' + this.point.color + '">\u25CF</span><span style="color:' + this.point.color + '">' + this.point.name + '<br/>' + (this.y) + '亿元</span>';
                  return '<span style="color:' + this.point.color + '">' + this.point.name + '<br/>' + (this.y / 10000).toFixed(2) + '亿元</span>';
                }
              }
            }
          },
          series: [{
            name: '',
            innerSize: '20%',
            colorByPoint: true,
            data: pieData
          }]
        });
      },
相关标签: Highcharts