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. 配置spotlight连接linux服务器

    本文转自(https://blog.csdn.net/qq_31391261/article/details/79429098) 一.配置spotlight连接linux服务器 1.以管理员身份运行软 ...

  2. Direct2D 如何关闭抗锯齿

    // Each pixel is rendered if its pixel center is contained by the geometry. // D2D1_ANTIALIAS_MODE_A ...

  3. GO语言学习（十九）Go 错误处理

    Go 错误处理 Go 语言通过内置的错误接口提供了非常简单的错误处理机制. error类型是一个接口类型,这是它的定义: type error interface { Error() string } ...

  4. Oracle学习总结（10）——45 个非常有用的 Oracle 查询语句

    ******************************  日期/时间 相关查询 *****************************       -- 1.获取当前月份的第一天  sele ...

  5. 多校连萌15-8-12#A

    #include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...

  6. WCF REST (一)

    最近工作中学习使用了WCF REST,REST 有很多好处 高效 简约  面向资源  而客户端调用 也变得非常简单.REST 入门的资料等 大家可以去网上找 这里主要分享下遇到的问题以及解决~ 一.环 ...

  7. FZU Problem 2062 Suneast & Yayamao

    http://acm.fzu.edu.cn/problem.php?pid=2062 题目大意: 给你一个数n,要求求出用多少个数字可以表示1~n的所有数. 思路: 分解为二进制. 对于一个数n,看它 ...

  8. PythonOOP面向对象编程2

    编程语言的特征: 继承 封装 多态 如:C++ / Java / Python / Swift / C# inheritance 继承 drived 派生 概念: 继承是指从已有的类中衍生出新类,新类 ...

  9. Day2：PYC

    一.pyc里装的是预编译后的字节码文件 二.一般存放在”__pycache__“目录 三.当python程序运行时,编译的结果是保存在位于内存中的PyCodeObject中,当Python程序运行结 ...

  10. 资源下载https://msdn.itellyou.cn/

    资源下载https://msdn.itellyou.cn/  迅雷