highcharts官方的源码
https://jshare.com.cn/demos/hhhhDu
只想说非常麻烦,我研究了1天多也没搞出来,后来同事建议我试试这个
https://blog.csdn.net/zhouzuoluo/article/details/99717160
这个就简单多了,而且效果一样,但我用这个有两个问题,就是柱状图改饼图;
其实改起来很简单,先画一个饼图,然后在饼图的属性里面加上drilldown属性值就可以了,不论柱状图还是饼图,想实现向下钻取,就加drilldown属性就可以了。
我的是vue项目附上代码
以下是html代码,template部分
<highcharts :options="codePerTeam"></highcharts>
下面是script的导入包
import Highcharts from 'highcharts'
import 'highcharts/highcharts-more'
下面是script的data部分
codePerTeam: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '代码提交量/团队维度'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Teams',
colorByPoint: true,
data: [{
name: '王华',
y: 35,
sliced: true,
selected: true,
drilldown: '王华'
}, {
name: '陈晓敏',
y: 30
}, {
name: '吴潇晓',
y: 10,
drilldown: '吴潇晓'
}, {
name: '杰',
y: 15
}, {
name: '帅',
y: 10
}]
}],
drilldown: {
series: [{
id: '吴潇晓',
data: [
{name: '陈陈', id: 'cat', y: 40},
{name: '徐徐徐', id: 'dog', y: 20},
{name: '张张', y: 10, id: 'cow'},
{name: '安安', y: 20, id: 'sheep'},
{name: '刘刘刘', y: 10, id: 'pig'}
]
}, {
id: '王华',
data: [{
name: '宋樑',
y: 80
}, {
name: '史宇',
y: 20
}]
}]
}
}
main.js要导入的包
import HighchartsDrilldown from 'highcharts/modules/drilldown';
HighchartsDrilldown(Highcharts)