Highcharts实现饼图pie

上图类似

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

Highcharts实现饼图pie相关推荐

html5饼图颜色渐变,Highcharts 渐变饼图
Highcharts 渐变饼图以下实例演示了渐变饼图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 colors 配置使用 Highcha ...
运用highcharts绘制饼图
1.引入架包:highcharts.js jquery.min.js 2.前台绘制 <div class="panel-body" id="container&q ...
Highcharts 渐变饼图
一代码 <html> <head> <meta charset="UTF-8" /> <title>Highcharts 渐变饼图 ...
【Python】用 Highcharts 绘制饼图，也很强大
来源:Python数据之道作者:Peter 整理:阳哥用 Highcharts 绘制饼图,也很强大前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 Jav ...
肝！用 Highcharts 绘制饼图，也很强大
来源 / Python数据之道作者/Peter 整理/阳哥用 Highcharts 绘制饼图,也很强大前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 ...
echarts饼图pie中间显示总数
echarts饼图pie中间显示总数有这样一种需求,饼图中间显示总数,当鼠标悬浮指定区域时显示对应区域数值网上搜了好多都是通过zlevel来实现的这种效果,但是如果echarts的背景如果不是纯色 ...
html使用highcharts绘制饼图,html js highcharts绘制圆饼图表
jquery实现饼状图效果 - 站长素材 var chart; $(function () { var totalMoney=999 var zccw=178 var sycw=821 $(docum ...
Highcharts的饼图大小的控制
在Highcharts中,饼图的大小是Highcharts自动计算并进行绘制.饼图的大小受数据标签大小.数据标签到切片的距离影响.当数据标签内容较多,并且距离切片较远时,饼图就会被压缩的很小.解决这个 ...
Highcharts双饼图使用实例
这次实践了Highcharts的双饼图,确实比普通饼图复杂多了,关键相关数据多不能继续用简单基本数据类型Map,list了,单独建了个VO存放要用到的数据,不多说,贴代码! JS: /**查看机器占 ...

Highcharts实现饼图pie

Highcharts实现饼图pie相关推荐

最新文章

热门文章