【案例+解说】highcharts 饼图动态循环加载

资料

highcharts菜鸟教程
highcharts官网
highcharts API文档

效果

在这里插入图片描述

要求:

  1. 3D饼图;
  2. 每次循环凸一个;

实现:重点部分

npm install highcharts --save
events: {
    load: function () {
        // 图表每秒更新一次
        var series = this.series[0];
        setInterval(function () {
            list = data; // 这里首先要要将展示的数组再次这里赋值,然后对数据处理‘’
            if (i === data.length ) { i=  0;}  //  i 是用来控制显示那个扇片数据
            list.forEach((ele, index) => {
            //  当数组的index和 i 相同时,突兀,否则取消突兀
                if (index === i) {
                    ele.sliced = true;  ele.selected = false;  // sliced true突兀
                }else{
                    ele.sliced = false;  ele.selected = false;
                }
            })
            i++;
            series.setData(list); //  series.setData(list);是将list数组重新写入chrts中
            
        }, 3000);
        //
        //var series = this.series[0];
        // setInterval(function () {
        //    var x = (new Date()).getTime(), // 当期时间
        //    y = Math.random();
        //    series.addPoint([x, y], true, true);  // 注:是往数组中添加一个新对象
        // }, 1000);
    }
}

全部代码

<div id="echart_pie"></div>
import Highcharts from "highcharts/highstock";  //  highcharts 最基础,只要用highcharts就要用它
import Highcharts3D from "highcharts/highcharts-3d";  //  3D模块,必不可少
Highcharts3D(Highcharts);
EchartPie() {
    let i=0; let list = [];
    let data = [
                {name:'一',  y: 5.0},
                {name:'二',  y: 25.0},
                {name: '三',y: 10.8,},
                {name:'四',  y: 14.0},
                {name:'五',  y: 35.0},
                {name:'六',  y: 19.0},
            ]
    Highcharts.chart('echart_pie', {
        chart: {
            zoomType: 'y',
            backgroundColor: "",
            borderWidth: 0,
            // borderColor:'',
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 55,
                beta: 0,
                depth: 500,
                viewDistance: 100
            },
            events: {
                load: function () {
                    // 图表每秒更新一次
                    var series = this.series[0];
                    setInterval(function () {
                        list = data;
                        if (i === data.length ) { i=  0;}
                        list.forEach((ele, index) => {
                            if (index === i) {
                                ele.sliced = true;  ele.selected = false;
                            }else{
                                ele.sliced = false;  ele.selected = false;
                            }
                        })
                        i++;
                        series.setData(list);
                    }, 3000);
                }
            }
        },
        
        title: { text: '' },
        credits: { text: "" },
        
        colors: ['#7cb5ec', '#90ed7d', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'] ,
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 30,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}:{point.percentage:.1f}%'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '各公司架桥机监测系统安装占比',
            data: data
        }]
    });
},
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在JavaScript中使用Highcharts来实现3D饼图,你需要按照以下步骤进行配置和使用: 1. 首先,确保你已经引入了Highcharts库。你可以在HTML文件中通过使用`<script>`标签来引入Highcharts库的JavaScript文件。 2. 创建一个HTML容器来显示你的图表。在HTML文件中,你可以使用一个空的`<div>`元素,并为其指定一个唯一的ID,例如`<div id="chart-container"></div>`。这将是你的3D饼图的容器。 3. 在JavaScript文件中,你需要使用Highcharts的配置对象来定义你的3D饼图的设置。你可以通过创建一个名为`options`的对象来实现这一点。在`options`对象中,你可以指定图表的类型为`pie`,并设置`options.chart`属性为`{ type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }`以启用3D效果。 4. 在`options.series`属性中,你可以指定饼图的数据。每个数据点都是一个对象,包含`name`和`y`属性,分别表示数据点的名称和值。 5. 最后,你需要使用`Highcharts.chart`函数将图表绘制到指定的容器中。在JavaScript文件中,使用以下代码来创建和绘制3D饼图:`Highcharts.chart('chart-container', options);`。其中,`'chart-container'`是你在第2步中指定的容器的ID。 通过按照上述步骤进行配置和使用,你就能够在JavaScript中实现3D饼图的效果了。记得在绘制图表之前,确保你已经引入了Highcharts库,并正确配置了相关的设置和数据。<span class="em">1</span> #### 引用[.reference_title] - *1* [在Vue中使用highCharts绘制3d饼图的方法](https://download.csdn.net/download/weixin_38656609/13206251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值