eccharts-gl 3D立体柱状图

echarts-gl继承于echarts

echarts-gl官方实例https://echarts.baidu.com/examples/index.html#chart-type-globe

代码:

  <div id="main" style="width: 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);
    }

 

posted @ 2019-05-16 16:28  *眉间缘*  阅读(1979)  评论(0编辑  收藏  举报