一:使用highchart实现3D饼图
HTML:需要一个容器来绘图
<div class="dataItemRight" id="trafficData"></div>
JS:所需js文件
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="http://code.highcharts.com.cn/highcharts/8.1.2/highcharts-3d.js"></script>
js代码块:重点已注释
<script type="text/javascript">Highcharts.chart('trafficData', {colors:['#4D7BF3','#FCC419'],chart: {type: 'pie',options3d: {enabled: true,//启用alpha: 25,//内旋转角度beta: 0// 外旋转角度}},title: {//标题text: '单位:元',align: 'right',color: "#333333",x: -55,y: 37},legend: {//重点,在这里设置图例不生效,手动问号???//不知道问什么,需要在下面plotOptions.pie.showInLegend来设置图例的显示才可以},credits: {enabled: false},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',depth: 80,// 重点,实现3d效果dataLabels: {enabled: true,format: '{point.name}{point.percentage:.1f}%'},showInLegend: true//重点图例显示}},series: [{name: 'Brands',colorByPoint: true,data: [{name: '今日ETC交易总额',y: 61,sliced: true,selected: true}, {name: '其他交易总额',y: 39}]}]});
</script>
效果图: