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. vue使用marked.js实现markdown转html并提取标题生成目录

    html: <template> <div class="wrapper"> <div class="container"> ...

  2. Spring学习总结（10）——Spring JMS---三种消息监听器

    消息监听器MessageListener 在spring整合JMS的应用中我们在定义消息监听器的时候一共可以定义三种类型的消息监听器,分别是MessageListener.SessionAwareMe ...

  3. 代码生成器实现的Entity,Dao,Service,Controller，JSP神器（含代码附件）

    package com.flong.codegenerator; import java.sql.Connection; import java.sql.DatabaseMetaData; impor ...

  4. 巧用数据流让 Word 文档在线阅读

            常常写博客或空间日记的朋友,对网络编辑器(如图1,是CSDN的博客编辑器)并不陌生.也比較easy做出非常绚烂的排版.但这次在做一个BS的项目,客户一直在用Office的软件中的Wor ...

  5. Redis-消费模式

    一 . 两种模式简介 发布消息通常有两种模式:队列模式(queuing)和发布订阅模式(qublish-subscribe).队列模式中,consumers可以同时从服务端读取消息,每个消息纸杯其中一 ...

  6. JS contcat() 连接数组 函数

    语法: arrayObject.concat(arrayX,arrayX,......,arrayX) 1.把元素添加到数组中 arr.concat(a,b,c);2.把数组连起来 arr.conca ...

  7. 使用Docker来运行WebApp

    原文:使用Docker来运行WebApp (作者:陈玓玏) 1.加载镜像到容器并运行webapp脚本 先进入管理员模式: su root 然后使用已有的webapp镜像来练习在docker上运行web ...

  8. 【组件】微信小程序input搜索框的实现

    开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...

  9. 【AtCoder Regular Contest 082 A】Together

    [链接]点击打开链接 [题意] 给你n个数字,每个位置上的数字可以+1,不变,或-1,每个位置只能操作一次. 操作完之后,让你选一个数字x,然后统计a[i]==x的个数count. 问你count的最 ...

  10. STL_算法_删除(unique、unique_copy)

    C++ Primer 学习中. . . 简单记录下我的学习过程 (代码为主) 全部容器适用 unique(b,e) unique(b,e,p) unique_copy(b1,e1,b2) unique ...