• eccharts-gl 3D立体柱状图


    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);
        }
  • 相关阅读:
    css修炼宝典
    衡量优秀的卓越的前端工程师
    Bootstrap 快速人门案例——前端最火的插件
    前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令(2)
    前端开发必学技能之一———非关系数据库又像关系数据库的MongoDB快速入门第一步下载与安装
    小米路由器未授权访问漏洞
    linux下更改ssh登录前的banner信息
    centos下编译安装Openssl
    S2-032代码执行
    SSRF漏洞学习
  • 原文地址:https://www.cnblogs.com/NCL--/p/10876402.html
Copyright © 2020-2023  润新知