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. Node中的JavaScript和浏览器中的JavaScript的区别

    浏览器中的JavaScript: 1.基于ECMAscript规范,这个规范规定了语法 2.添加了dom:用来处理文档 document object model 3.添加了BOM:用于操作浏览器 w ...

  2. 解决vmware 和hyper-v不能共存的问题

    只需在 Windows 中以管理员身份运行命令提示符 cmd 1.运行 bcdedit /copy {current} /d "Windows 8 (关闭 Hyper-V)"命令, ...

  3. MFC 任务托盘经常消失问题

    经常发现自己写的程序任务托盘会无缘无故的消失,但是进程还是存在的,原来是资源管理器异常的时候,重新生成的时候,程序需要重新添加下任务托盘. 当explorer进程重启,taskbar将会被创建,tas ...

  4. [Angular] Custom directive Form validator

    Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...

  5. 《社交红利》读书总结--如何从微信微博QQ空间等社交网络带走海量用户、流量与收入

    <社交红利--如何从微信微博QQ空间等社交网络带走海量用户.流量与收入>--徐志斌 著 <社交红利>这本书2013年9月才上市,卖的非常火. 我最初是在公司内部的期刊上,看到有 ...

  6. CodeVs——T 4919 线段树练习4

    http://codevs.cn/problem/4919/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  7. 1.5 Python基础知识 - while循环

    在我们生活中有很多反复要做的事情,或者动作,我们称之为循环.在开发程序中也会有循环的事情要去做,就是需要反复的去执行某个代码,或者反复进行某种演算,直到达到某种条件的时候才会停止.在Python中我们 ...

  8. javascript的组成

    ECMAScript:(3/5/6/7) 它是JS语言的标准,规定了JS的编程语法和基础核心知识. DOM:document object model 文档对象模型,提供给JS很多的操作页面中元素的属 ...

  9. Android Studio插件推荐-GsonFormat，ButterKnifeZelezny

    原创文章.转载请注明 http://blog.csdn.net/leejizhou/article/details/50557786 本篇介绍的仅仅适用android studio和 Intellij ...

  10. HDU 5372 线段树

    给出两种操作: 第i个0:在x位置插入一个长度为i的线段,并输出该线段共覆盖了多少之前增加的线段 1:删除第i次插入的线段 官方题解:对于新插入的线段,查询有多少个线段左端点大于等于该线段的左端点. ...