echart.gl.js实现动态3D柱状图

一、总结

一句话总结：演示页面的源代码里面一定有所需的所有的js。

二、【js实践篇】——echart.gl.js实现动态3D柱状图

前言

本公司的项目需求主要是根据各个省的信用度的高低情况做一个动态的3D动态，能够展示省的信用高低值！

内容

1.准备工作

  • jquery.min.js
  • 最新的echart.min.js,官网在此自行下载
  • echart-gl.min.js

2.代码实现

<!DOCTYPE html>

<html>

<head>

<title>echarts</title>

<meta charset="UTF-8">

</head>

<body>

<div id="main" style="height: 600px;width:600px;"></div>

<script type="text/javascript" src="js/jquery.min.js" ></script>

<script type="text/javascript" src="js/echarts.js" ></script>

<script type="text/javascript" src="js/echarts-gl.min.js" ></script>

<script type="text/javascript">

var chart = echarts.init(document.getElementById('main'));

var xdata=[];

var ydata=[''];

$.getJSON('cityCredit.json',function(obj,index){

//读取json文件文件，遍历对象重新组合成data

    var data=echarts.util.map(obj, function(item, index) {

        return {

        //index值x值，2指示y值，item.value指z值。其中x值代表省的变化，z值代表信用的变化

            value: [ index,2, item.value],

    //柱状图的填充颜色

            itemStyle:{

                color:'#66D9EF'

            }

        }

    });

    for(var i=0;i<obj.length;i++){

        xdata.push(obj[i].name);//获取省名

    }

    initChart(xdata,data1,hours)

})

function initChart(xdata,ydata,citydata){

    option = {

    tooltip: {

        type: ''

    },

    xAxis3D: {

        type: 'category',

        name: '',

        data: xdata,

        axisTick: {

            show: true

        },

    },

    yAxis3D: {

        type: 'category',

        name: '',

        data: ydata,

        axisTick: {

            show: false

        },

        axisLine: {

            lineStyle: {

                color: 'rgba(0,0,0,0)'

            }

        }

    },

    zAxis3D: {

        type: 'value',

        name: '',

        axisTick: {

            show: false

        },

    },

    grid3D: {

        boxWidth: 200,

        boxDepth: 80,

        zlevel: -10,

        axisPointer: {

            show: false

        },

        light: {

            main: {

                intensity: 1.2

            },

            ambient: {

                intensity: 0.3

            }

        }

    },

    series: [{

        type: 'bar3D',

        name: '',

        barSize: 11,

        data: citydata,

        label: {

            show: false,

            textStyle: {

                fontSize: 16,

                borderWidth: 1

            }

        },

        itemStyle: {

            opacity: 0.4

        },

        emphasis: {

            label: {

                textStyle: {

                    fontSize: 20,

                    color: '#900'

                }

            }

        }

    }]

}

    chart.setOption(option)

}

</script>

</body>

</html>

  1. 效果图

    总结
    效果还有待改进，先分享给大家，有什么好的提议请留言喔！！ 具体例子下载—–3Dbar图

 

echart.gl.js实现动态3D柱状图的更多相关文章

  1. 3-Highcharts 3D图之3D柱状图分组叠堆3D图

    <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...

  2. 2-Highcharts 3D图之3D柱状图带可调试倾斜角度

    <!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...

  3. 1-Highcharts 3D图之普通3D柱状图与带空值

    <!DOCTYPE> <html lang='en'> <head> <title>1-Highcharts 3D图之普通3D柱状图与带空值</t ...

  4. jquery.wordexport.js打印echarts.js画出的柱状图

    jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...

  5. Echart使用js进行封装成函数

    Echart使用js进行封装成函数 主要是对 json 串的封装,使用 js 进行对 json 的解析.之间用的最多是循环取出数组中的值,如果拿去使用可直接修改 json 就好. 上一篇把二维的封装好 ...

  6. 如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题（机房升级版）-第九课（一）

    写在前面的话: 说点啥好呢?就讲讲前两天的小故事吧,让我确实好好反省了一下. 前两天跟朋友一次技术对话,对方问了一下Geometry与BufferGeometry的具体不同,我一下子脑袋短路,没点到重 ...

  7. 如何用three.js搭建处理3D园区、3D楼层、3D机房管线（机房升级版）-第九课（二）

    接着上一篇文章,<如何用webgl(three.js)搭建处理3D园区.3D楼层.3D机房管线问题(机房升级版)-第九课(一)> 继续讲解关于三维数据中心管线可视化的解决方案. 上一篇我们 ...

  8. 如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课

    开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例 ...

  9. 如何用webgl(three.js)搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课

    序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...

随机推荐

  1. MFC只允许程序单开

    很多玩游戏的人都知道一般游戏客户端程序是不允许双开的,就是说在同一游戏在启动的时候,是无法打开多个窗口.很多其他软件如酷狗播放器等也是这样.如果把打开的窗口最小化,这时重新启动程序,最小化的窗口会被显 ...

  2. 给已有数据的oracle表建立外键关系

    PS:这里是给自己做个备忘,下次遇到同类问题的时候,方便查找: 客户在有主外键关系的2张表进行页面删除时报错已有子记录,运维后台处理的时候应该找出相应的数据,先删除子记录,在删主表记录:但客户要的急, ...

  3. css实现背景半透明文字不透明的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. AsyncCallback BeginInvode endinvode 异步调用

    下面是搜藏的代码: //首先准备好,要进行C#异步调用的方法(能C#异步调用的,最好不多线程) private string MethodName(int Num, out int Num2) { N ...

  5. 【CS Round #46 (Div. 1.5) A】Letters Deque

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] string类模拟 [错的次数] 0 [反思] 在这了写反思 [代码] /* */ #include <cstdio> #incl ...

  6. asp.net--TextBox属性全研究

    . .aspx代码例如以下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="T ...

  7. cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境

    打开用户文件夹下.bash_profile文件,配置环境 vim ~/.bash_profile //按键i,进行插入编辑(假设输错d进行删除一行) 环境配置过程例如以下: 1.首先配置下androi ...

  8. docker中发布springboot

    http://note.youdao.com/noteshare?id=81a603b1b33731aaef7b7755c70f33fb

  9. μC/OS中的任务就绪表

    为了便于对就绪表的查找,μC/OSII又定义了一个数据类型为INT8U的变量OSRdyGrp, 并使该变量的每一位都对应OSRdyTbl[ ]的一个任务组(即数组的一个元素),如果某任务组中 有任务就 ...

  10. oracle exp 备份脚本

    #!/bin/bash#Oracle 环境变量 NLS_LANG=AMERICAN_AMERICA.AL32UTF8 ORACLE_SID=zgw ORACLE_BASE=/opt/oracle OR ...