highcharts实现饼图教程,option配置可点击伸缩变化的方法
程序员文章站
2022-05-03 08:59:17
highcharts实现饼图教程,option配置可点击伸缩变化的方法
var chart = null;
$(function () {
$('#acc...
highcharts实现饼图教程,option配置可点击伸缩变化的方法
var chart = null; $(function () { $('#accountReportChart').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, }, title: { text: '客户分类统计', align:'left', style:{"color":"#22252A","fontFamilyr":"PingFangSC-Medium","fontSize":"12","fontWeight":"600"} }, legend: { align: 'right', //水平方向位置, // verticalAlign:'middle', layout:'vertical', // x:-50, // y:30, itemStyle: { "color": "#868BA1", "cursor": "pointer", "fontSize": "12px", "fontFamily": "PingFangSC-Medium","lineHeight":"12px","letterSpacing": "0px" }, // "fontFamily": "PingFangSC-Medium","fontSize:"12px","color": "#868BA1",,"letterSpacing": "0px","lineHeight": "12px" itemMarginBottom: 9, symbolPadding:8, symbolRadius:0, symbolWidth:10, symbolHeight:10, }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, tooltip: { enabled:false }, credits: { enabled: false //不显示LOGO }, plotOptions: { series:{ states:{ hover:{ enabled:false, } } }, pie: { size:'218', allowPointSelect: true, animation:false, slicedOffset:5, cursor: 'pointer', dataLabels: { enabled: false, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } }, colors:[ '#5B93D3', '#7CBDDF', '#208BC2', '#667489', '#324462', '#384250' ], showInLegend: true, point: { events: { mouseOver: function(e) { // 鼠标滑过时动态更新标题 // 标题更新函数,API 地址:https://api.hcharts.cn/highcharts#Chart.setTitle var t=e.target.options.name; var b=e.target.options.y; $('#addText').find('.top').html(t) $('#addText').find('.bottom').html(b) } //, // click: function(e) { // 同样的可以在点击事件里处理 // chart.setTitle({ // text: e.point.name+ '\t'+ e.point.y + ' %' // }); // } } }, } }, series: [{ type: 'pie', innerSize: '65%', name: '市场份额', data: [ {name:name[0],y:value[0]}, {name:name[1],y:value[1]}, { name:name[2], y:value[2], sliced: true, selected: true, click:function(e){ console.log(e); var t=e.target.options.name; var b=e.target.options.y }, }, {name:name[3],y:value[3]}, {name:name[4],y:value[4]}, {name:name[5],y:value[5]} ] }] }, function(chart) { // on complete var arr=chart.options.series[0].data; for(var i=0;i<arr.length;i++){ if(arr[i].sliced==true){ var t=arr[i].name; var b=arr[i].y; } } var textX = chart.plotLeft + (chart.series[0].center[0]); var textY = chart.plotTop + (chart.series[0].center[1]); var span = '<span id="pieChartInfoText" style="display: inline-block;position:absolute;font-family: PingFangSC-Medium;color: #22252A;letter-spacing: 0; text-align:center;font-weight:600;">'; span += '<span class="top" style="display: inline-block;width: 151px;font-size: 18px;line-height: 18px;">'+t+'</span><br>'; span += '<span class="bottom" style="font-size: 16px;line-height: 12px;">'+b+'</span>'; span += '</span>'; $("#addText").append(span); span = $('#pieChartInfoText'); span.css('left', textX + (span.width() * -0.5)+10); span.css('top', textY + (span.height() * -0.5)); } ); $("#accountReportChart").resize(function(){ var w= $("#accountReportChart").width(); var h= $("#accountReportChart").height(); console.log(w,h); $("#accountReportChart").highcharts().setSize(w,h,false); }) });
这个highcharts是国外的框架,但是功能很齐全,这个代码实现了监听容器大小变化而重新加载画面