echarts-gl继承于echarts
echarts-gl官方实例https://echarts.baidu.com/examples/index.html#chart-type-globe
代码:
<div id="main" style=" 500px;height: 400px;margin: 0 auto;"></div>
js
function getData() { var pieChart = echarts.init(document.getElementById('main')); var hours = ['90-100', '80-89', '70-79', '60-69', '<60']; var days = ['1', '2', '3', '4', '5']; var best=$("#best").val()==undefined?0.0:$("#best").val(); var good=$("#good").val()==undefined?0.0:$("#good").val(); var midd=$("#medium").val()==undefined?0.0:$("#medium").val(); var pass=$("#pass").val()==undefined?0.0:$("#pass").val(); var fail=$("#fail").val()==undefined?0.0:$("#fail").val(); var bestRate=$("#bestRate").val()==undefined?0.0:$("#bestRate").val(); var goodRate=$("#goodRate").val()==undefined?0.0:$("#goodRate").val(); var middRate=$("#mediumRate").val()==undefined?0.0:$("#mediumRate").val(); var passRate=$("#passRate").val()==undefined?0.0:$("#passRate").val(); var failRate=$("#failRate").val()==undefined?0.0:$("#failRate").val(); var data = [[1,0,best],[1,1,good],[1,2,midd],[1,3,pass],[1,4,fail], [3,0,bestRate],[3,1,goodRate],[3,2,middRate],[3,3,passRate],[3,4,failRate]]; var colorList=new Array(); var option = { tooltip: { }, xAxis3D: { type: 'category', data: hours, name:'分数区间' }, yAxis3D: { type: 'category', data: days, }, zAxis3D: { type: 'value', name:'数据' }, grid3D: { boxWidth: 120, boxDepth: 60, viewControl: { // projection: 'orthographic' }, light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } } }, animation: false, series: [{ name:"人数", type: 'bar3D', data: data.map(function (item) { return { value: [item[1], item[0], item[2]], } }), shading: 'lambert', label: { textStyle: { fontSize: 16, borderWidth: 1 } }, itemStyle:{ normal: { // 定制显示(按顺序) color: function(params) { var arr = params.data.value; if(arr[1]==1){ colorList.push('#C33531'); }else{ colorList.push('#4A235A'); } return colorList[params.dataIndex] } }, } }] } pieChart.setOption(option); }