Highcharts 3d饼图

发布于:2022-12-03 ⋅ 阅读:(676) ⋅ 点赞:(0)

init(){
      var series_data = [];
      let left3_data = [
        {name:'正常数', y:36,color:'#33E0FE'},
        {name:'异常数', y:4,color:'#F9CA72'}
      ]
      var chart1_total = '';
      GetSQL('', `exec zou_htgxqwkhfb ${this.condition.minyear} ,${this.condition.maxyear}`, 'json', '', function(data){
        chart1_total = data[0].total;
        data.forEach(item => {
          series_data.push({
            name:item.name,
            y:item.value1,
            p:item.value2

          })
        })

        console.log(series_data,'series_data');
      
        var chart = Highcharts.chart('3dpie', {

          chart: {
            type: 'pie',
            options3d: {
              enabled: true,
              alpha: 45
            },
            backgroundColor: 'transparent'
            },
            title: {//这里的text中的内容就是圆心内的文字填充
              text: '<span style="font-size:14px;color:#e5dc4a; ">' + chart1_total + 'w</span>',
              verticalAlign: 'middle',
              align: 'center',
              y: 30   //  这里的y值指向下移动
            },
            credits: { enabled: false},
            tooltip: {
              fontSize: "14px",
              pointFormat: '{point.p}({point.percentage:.1f}%)',
              style:{                  
                fontSize:'14px'
              }
            },
            legend:{
              enabled: false,
              shadow:false,
              accessibility:{
                enabled:false
              }
            },
            plotOptions: {
              pie: {
                innerSize: 100,
                depth: 45,//厚度
                size: 120,//大小
                dataLabels: {
                  enabled: true,
                  useHTML: true,
                  format: '{point.name}<br/>{point.p}({point.percentage:.1f}%)',
                  color:'#eee',
                  fontSize:'8px',
                  padding: 0,
                  style:{                  
                    fontSize:'8px'
                  }
                },
                showInLegend: true
              }
            },
            series: [{
              //name: '百分比',
              data: series_data
            }]
        });
      });
        
    }


网站公告

今日签到

点亮在社区的每一天
去签到