Highcharts实现饼图pie
程序员文章站
2022-06-09 23:29:45
...
上图类似
chartPie_market: function (docm) {
let pieData = [];
let slef = this;
slef.MainCount.listY.forEach(function (item, index) {
let op = {
name: slef.MainCount.listX[index],
y: slef.MainCount.listY[index]
};
pieData.push(op)
});
let myColors = ["#0e5dee", "#336699", "#ffe286", "#79eefc", "#fd6665", "#8bc89f", "#fca7c9", "#3399cc", "#cd7e29"];
Highcharts.chart(docm, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
backgroundColor: null,
renderTo: 'container',
spacing: [0, 10, 10, 10]
},
title: {
// text: '数字经济核心产业',
text: '',
verticalAlign: "bottom",
style: {
color: "#fff",
fontSize: 16
}
},
colors: myColors,
// legend: {
// align: "center",
// itemMarginBottom: 10,
// itemStyle: {
// color: "#fff",
// fontWeight: "400",
// fontSize: 10
// },
// itemHoverStyle: {
// color: "#fff"
// },
// symbolRadius: 2
// },
tooltip: {
// pointFormat: '<span style="color:{point.color}">\u25CF</span><b>{point.y:.2f}亿元</b>',
formatter: function () {
// console.log(this)
return this.point.name + '<br/><span style="color:' + this.color + '">\u25CF</span> <b>' + (this.y / 10000).toFixed(2) + '亿元</b>'
},
style: {
color: "#000",
fontSize: 10
}
// pointFormat: '<span style="color:{point.color}">\u25CF</span>{series.name} <b>{point.y}亿元</b>'
},
xAxis: {
labels: {
rotation: -45
}
},
plotOptions: {
pie: {
borderColor: "#023248",
borderWidth: 6,
allowPointSelect: true,
showInLegend: false,
cursor: 'pointer',
connectorColor: '#000000',
dataLabels: {
enabled: true,
// distance: -70,
style: {
textOutline: "0px 0px contrast",
color: "#fff",
fontSize: 10
},
// format: '{point.name}<br/>{y}亿元'
formatter: function (el, index) {
// return '<span style="color:' + this.point.color + '">' + (this.percentage).toFixed(2) + '%</span>';
// return '<span style="color:' + this.point.color + '">\u25CF</span><span style="color:' + this.point.color + '">' + this.point.name + '<br/>' + (this.y) + '亿元</span>';
return '<span style="color:' + this.point.color + '">' + this.point.name + '<br/>' + (this.y / 10000).toFixed(2) + '亿元</span>';
}
}
}
},
series: [{
name: '',
innerSize: '20%',
colorByPoint: true,
data: pieData
}]
});
},
上一篇: Highchart实现条状图bar 1
下一篇: Highchart实现条状图bar 2
推荐阅读
-
C#画图之饼图折线图的实现方法
-
DevExpress之ChartControl实现饼状图百分比演示实例
-
C#画图之饼图折线图的实现方法
-
DevExpress之ChartControl实现饼状图百分比演示实例
-
iOS实现带指引线的饼状图效果(不会重叠)
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
-
html5 canvas简单封装一个echarts实现不了的饼图
-
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】