highcharts 实现3D饼图

╰+哭是因爲堅強的太久メ 2023-01-22 11:46 14阅读 0赞

#### Highcharts 实现3D饼图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4eHh4eHh4MDA3NzIyOTk_size_16_color_FFFFFF_t_70_pic_center]

HTML部分

<div class="S133_left3_echarts" id="S133_left3_echarts"></div>

CSS部分

.S133_left3_echarts{
        
      width: 500px;
      height: 500px;
    }

JS部分

function totalData(param) {
          
      var total = 0;
      for(let i in param){
        
        total += param[i].y
      }
      return total
    }
    $(document).ready(function () {
        
      let left3_data = [
        {
        name:'正常数', y:36,color:'#33E0FE'},
        {
        name:'异常数', y:4,color:'#F9CA72'}
      ]
      let total = 0;
      var pieColors = (function () {
        
        var colors = [],
            base = Highcharts.getOptions().colors[0],i;
        for (i = 0; i < 10; i += 1) {
        
          colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
        }
        return colors;
      }());
      let left3_option = {
        
        chart: {
        
          type: 'pie',
          options3d: {
        
            enabled: true,
            alpha: 60,
            beta: 0
          },
          backgroundColor: 'none'
        },
        title: {
        
          floating:true,
          verticalAlign: 'middle',
          x: -50 ,
          useHTML:true,
          text: '<span  style="font-size:2rem;color:#fff;  position: relative;top: .8rem;">'+totalData(left3_data)+'</span><br/><span style="font-size:.875rem;color:#fff">总数/台</span>'
        },
        tooltip: {
        
          pointFormat: '{series.name}{point.percentage:.1f}%',
          style: {
        
            textOutline: "0px 0px contrast",
            fontSize: 14,
            color: "#000",
            fontFamily: "SourceHanSansCN-Normal"
          }
        },
        legend:{
        
          enabled: true,
          layout: 'vertical',
          verticalAlign:'middle',
          align: 'right',
          useHTML: true,
          itemStyle:{
        
            fontSize:'5px'
          },
          labelFormatter:function(){
        
            total += parseInt(this.y)
            let templateL = '<div style="position:relative;top:-4.2px;margin-bottom:1.25rem"><p style="color:#fff;font-size:.875rem;font-family:Microsoft YaHei">'+ this.name +'</p><p style="color:'+ this.color+';font-size:1.25rem">'+ this.y+'</p></div>';
            return  templateL
          }
        },
        colors: ['#33E0FE', '#F9CA72'],
        credits: {
        
          enabled: false    //禁用版权url    此处不设置，会显示highecharts.com
        },
        plotOptions: {
        
          pie: {
        
            allowPointSelect: true,
            cursor: 'pointer',
            // size: 240,
            depth: 25, //饼图厚度
            color: pieColors,
            center: ['50%', '55%'],
            showInLegend: true
          }
        },
        series: [{
        
          type: 'pie',
          name: '',
          startAngle: 0,//调整饼图的角度   方向：顺时针
          dataLabels: {
        
            enabled: true,
            inside: false,
            distance: '10%',
            // format : '{point.name}{series.name}<br><span style="color:#FF8040">{point.y} </span>% ' ,
            useHTML:true,
            formatter:function(){
        
              console.log('this :>> ', this);
              let templateL = '<p style="color:#fff;font-size:.875rem;font-family:Microsoft YaHei">'+ this.key +'</p><p style="color:'+ this.color+';font-size:1.25rem">'+ (this.percentage).toFixed(0)+'%</p>';
              return  templateL
            },
            // 引导线颜色
            // connectorColor: "#fff",
            style: {
        
              textOutline: "0px 0px contrast",
              fontSize: 14,
              color: "#fff",
              fontFamily: "SourceHanSansCN-Light"
            }
          },
          data: left3_data
        }]
      };
      $('#S133_left3_echarts').highcharts(left3_option);
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4eHh4eHh4MDA3NzIyOTk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221020/06cd1c8557b647988ba1b8a0ee3f21b0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts3d饼图实现

一、vue中使用3d饼图效果图： ![61eca2ae2b4e4a6a883573a7ee961d3b.png][] ![be2d21f307dc4d79a44ed

叁歲伎倆/ 2023年10月13日 20:56/ 0 赞/ 77 阅读

相关 highcharts 实现3D饼图

Highcharts 实现3D饼图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

╰+哭是因爲堅強的太久メ/ 2023年01月22日 11:46/ 0 赞/ 15 阅读

相关 highCharts 饼图中间添加自定义文本

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

比眉伴天荒/ 2022年11月06日 12:49/ 0 赞/ 358 阅读

相关利用Jpgraph创建3D饼形图

用Jpgraph类库制作统计图功能及其强大，不仅可以绘制平面图形，而且可以绘制具有3D效果的图形。直接使用GD2函数库可以绘制出各种图形，当然也包括3D饼图，但使用GD2函数

r囧r小猫/ 2022年09月25日 01:19/ 0 赞/ 205 阅读

相关 d3成神之路(五)：扇形图，饼图

制作扇形其实也是使用 svg的 path 这个属性，重要的是计算各个扇形区域的点，与弧度效果图 ![在这里插入图片描述][watermark_type_ZHJva

Love The Way You Lie/ 2022年09月10日 07:11/ 0 赞/ 196 阅读

相关 HighCharts饼图

HighCharts官网 [http://www.highcharts.com/][http_www.highcharts.com] 饼图 <!

ゝ一世哀愁。/ 2022年08月27日 03:41/ 0 赞/ 233 阅读

相关 JFreeChart 3D饼图

前面我们讲了 [JFreeChart 折线图][JFreeChart] [JFreeChart 柱形图][JFreeChart 1] 1.JFreeChart 3

秒速五厘米/ 2022年07月16日 09:57/ 0 赞/ 258 阅读

相关 JFreeChart 制作3D饼状图分析数据

代码： CharUtil.java package com.chart; import java.awt.Font; import

骑猪看日落/ 2022年06月12日 03:13/ 0 赞/ 259 阅读

相关 Amchart 3D饼图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

谁借莪１个温暖的怀抱￠/ 2022年05月31日 08:22/ 0 赞/ 301 阅读

相关 Highcharts的饼图大小的控制

在Highcharts中，饼图的大小是Highcharts自动计算并进行绘制。饼图的大小受数据标签大小、数据标签到切片的距离影响。当数据标签内容较多，并且距离切片较远时，饼图就

柔光的暖阳◎/ 2021年09月15日 07:38/ 0 赞/ 1375 阅读