资料

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}]});
},