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. nginx安装部署+增加媒体播放模块

    nginx安装很简单,但是有的时候是已经安装的nginx ,升级增加nginx 模块功能. 最近公司要nginx增加一个可以播放 MP4的模块,安装还算顺利,不说废话上命令. 1 安装依赖 yum i ...

  2. WPF 入门《常用控件》

    1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"& ...

  3. HDU 5389 Zero Escape （MUT#8 dp优化）

    [题目链接]:pid=5389">click here~~ [题目大意]: 题意: 给出n个人的id,有两个门,每一个门有一个标号,我们记作a和b,如今我们要将n个人分成两组,进入两个 ...

  4. cv2.putText 文字换行（'\n'）无法解析换行

    OpenCV putText() new line character cv2.putText 在向图像中添加文本信息时,如果在待添加的文本中含有换行转义符,一般它是无法正确处理的: cv2.putT ...

  5. ORACLE 11G R2 DG_BROKER 之SWITCH OVER

      官网:http://docs.oracle.com/cd/B12037_01/server.101/b10822/cli.htm 这个是有必要看一下. 注意本人已经完毕一次SWITCHOVER 所 ...

  6. 例说linux内核与应用数据通信（一）：加入一个系统调用

    [版权声明:尊重原创.转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流,请勿用于商业用途]         应用不能訪问内核的内存空间.为了应用和内核交互信息,内核提供一 ...

  7. LeetCode Algorithm 02_Add Two Numbers

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  8. （转）iptables常用规则：屏蔽IP地址、禁用ping、协议设置、NAT与转发、负载平衡、自定义链

    转自:http://lesca.me/archives/iptables-examples.html 本文介绍25个常用的iptables用法.如果你对iptables还不甚了解,可以参考上一篇ipt ...

  9. Surging Demo 项目之一

    原文:Surging Demo 项目之一 开发与运行环境 IDE Visual Stadio 2017/Visual Stadio 2019 Visual Stadio Core Docker 和 D ...

  10. 【Codeforces Round #299 (Div. 2) D】Tavas and Malekas

    [链接] 我是链接,点我呀:) [题意] 给你n个位置,然后让你从某些位置开始的|p|个位置,填上p这个字符串. 问你填的时候是否会发生冲突->输出0 否则输出最终n个位置组成的可能的字符串的总 ...