资料
highcharts菜鸟教程
highcharts官网
highcharts API文档
效果
要求:
- 3D饼图;
- 每次循环凸一个;
实现:重点部分
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
}]
});
},