Highcharts实现3D饼图pie
程序员文章站
2022-06-09 23:34:03
...
chartPie3D_market: function (docm) {
let pieData = [];
let slef = this;
slef.NewMainCount.listY.forEach(function (item, index) {
let op = {
name: slef.NewMainCount.listX[index],
y: slef.NewMainCount.listY[index]
};
pieData.push(op)
});
let myColors = ["#056ed9", "#fcc93a", "#1f912f", "#0286c4", "#cc617d"];
let options = {
chart: {
type: "pie",
backgroundColor: null,
spacing: [0, 10, 10, 10],
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: ""
},
tooltip: {
formatter: function () {
// console.log(this)
return this.point.name + (this.y) + '户<br/><span style="color:' + this.color + '">\u25CF</span>占比:<b>' + (this.percentage).toFixed(2) + '%</b>'
},
style: {
color: "#000",
fontSize: 10
}
},
plotOptions: {
pie: {
innerSize: "40%",
depth: 45,
colors: myColors,
distance: 100, // 控制饼图外面的线的长短
dataLabels: {
enabled: true,
formatter: function () {
return '<span style="color:' + this.point.color + '">' + this.point.name + '</span><br/><span>占比:' + this.percentage.toFixed(2) + '%</span><br/>' + (this.y) + '户</span>';
},
style: {
textOutline: "0px 0px contrast",
fontSize: 10,
color: "#fff"
}
}
}
},
series: [
{
name: "市场主体",
data: pieData
}
]
};
Highcharts.chart(docm, options);
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
},
推荐阅读
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
php使用Jpgraph绘制3D饼状图的方法
-
读取数据库的数据并整合成3D饼图在jsp中显示详解
-
html5 canvas简单封装一个echarts实现不了的饼图
-
AI怎么制作几何图3d饼图?
-
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
-
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】