精华内容
下载资源
问答
  • echarts 3D柱状图

    2020-03-19 16:07:54
    '#91e8e1'], color:["#1E9FFF","#f7a35c"], title: { text: '3D堆叠柱状图', x: 'center' }, legend: { data: ['2019','2018'], right:"right" }, tooltip: {}, xAxis3D: { type: 'category', //name:'', data: ['1...

    $.get(ROOT_PATH + 'data/asset/data/life-expectancy-table.json', function (data) {
       var option = {
                //color: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
                color:["#1E9FFF","#f7a35c"],
                title: {
                    text: '3D堆叠柱状图',
                    x: 'center'
                },
                 legend: {
                    data: ['2019','2018'],
                    right:"right"
                },
                tooltip: {},
                xAxis3D: {
                    type: 'category',
                    //name:'',
                    data: ['1', '2','3', '4','5', '6'],
                    axisLine:{
                        lineStyle:{
                            //color:'yellow',
                            width:1
                        }
                    },
                },
                yAxis3D: {
                    type: 'category',
                    //data: [''],
                    //name:"",
                    axisLine:{
                        lineStyle:{
                            //color:'yellow',
                            width:1
                        }
                    },
                },
                zAxis3D: {
                    type: 'value',
                    name:'',
                    axisLabel:{
                        margin:20
                    },
                    axisLine:{
                        lineStyle:{
                            //color:'yellow',
                            width:1
                        }
                    },
                },
                grid3D: {
                    boxWidth: 200,
                    boxDepth: 20,
                    axisPointer: {
                        show: false
                    },
                    light: {
                        main: {
                            intensity: 1.2
                        },
                        ambient: {
                            intensity: 0.3
                        }
                    },
                    viewControl: {
                        alpha: 5, //控制场景平移旋转
                        minAlpha:5,
                        maxAlpha:5,
                        beta: 5,
                        minBeta:5,
                        maxBeta:5
                    }
                },
                series: [{
                    name:"2019",
                    type: 'bar3D',
                    barSize: 15,
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [
                        [0, 0, 4200],
                        [2, 0, 10000],
                        [4, 0, 6000],
                    ],
                    //stack: 'stack',
                    shading: 'lambert',
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                    
                }, {
                    type: 'bar3D',
                    name:'2018',
                    barSize: 15,
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [
                        [1, 0, 12000],
                        [3, 0, 60000],
                        [5, 0, 12000],
                    ],
                    //stack: 'stack',
                    shading: 'lambert',
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                }]
            };


        myChart.setOption(option);
    });

     

    展开全文
  • 修改Echarts 3D柱状图柱子大小(粗细)的方法一、修改方法 一、修改方法 以官网上的一个3d柱状图为例,原图如下: 我们在series配置项下加上一个barSize属性,例如: barSize:3, 得到的图如下: 柱子明显细了很多...

    修改Echarts 3D柱状图柱子大小(粗细)的方法

    一、修改方法

    以官网上的一个3d柱状图为例,原图如下:

    在这里插入图片描述
    我们在series配置项下加上一个barSize属性,例如:

    barSize:3,
    

    得到的图如下:

    在这里插入图片描述
    柱子明显细了很多,不知道为什么官方文档上并没有,真让人摸不着头脑

    在这里插入图片描述

    展开全文
  • 《错误》郑愁予我打江南走过,那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞。...ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定...

    27c91220636c0a3df8a926dfa9e86ca8.gif

    a60869eb25d59b14f36a9e5a63f0cba7.gif

    《错误》郑愁予

    打江南走过,

    那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞。你的心如小小寂寞的城,恰若青石的街道向晚。蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩。我达达的马蹄是个美丽的错误,我不是归人,是个过客!

    1790b87a0d6c41904091b336bcd471ab.png

    走过的路,见过的人。各有其因,各有其缘!af9e399b3ffec3f5bcce92272238f566.gifECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。使用 JavaScript 实现开源的可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。具有丰富的可视化类型,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。官方网址:https://echarts.baidu.com/

    ECharts提供大量常用的数据可视化图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。

    4ee48ae9144232880e73f58294c52bc3.png

    多图联动

    3eb7359e69d8a71b4860bba7fbf1e7da.gif

    值域漫游

    a0b8c9cf825d67c926bfa69834430c07.gif

    大规模散点图

    69ff8e336d7925d551fe3355996b4bc9.gif

    子区域地图模式

    ec723abdc8ff7ab8d4652f84610fdcb5.gif

    c517e14d576003c96ef6399756be08e7.png

    ec723abdc8ff7ab8d4652f84610fdcb5.gif安装Python,请点击链接,进行安装 Python软件安装在Python中有个pyecharts类库,可以实现类似的功能。首先在环境中安装pyecharts库。bfcad1a96b8b7cc168b50647dba6843c.png

    输入pip install pyecharts,安装pyecharts库。

    147ededbe4c5ce53a32bcddcecdab9ee.png

    安装好pyecharts库后,运行程序,发现导入相应的包。

    264d15196c90cb96aee2bf9e7ccbd300.png

    这是因为在使用pip install下载命令时,软件默认下载最新版本,选择之前的旧版本下载,即可正常运行代码。

    7b00316f9078372ed40de1a27abaf951.png

    代码示例

    201f37ed06143732a843974cf226f7f6.png

    目标完成率

    201f37ed06143732a843974cf226f7f6.png

    f416dbe3d5ac2addadac21cbfd4abd82.png

    #数据分析指标完成情况from pyecharts import Gaugegauge=Gauge('目标完成率')gauge.add('任务指标','完成率',80.2)#gauge.render('gauge.html')#图表输出gauge.render()gauge
    201f37ed06143732a843974cf226f7f6.png

    水球图

    201f37ed06143732a843974cf226f7f6.png9fe9462fe693004cb8b4a2a36031d7b4.png
    #水球图from pyecharts import Liquidliquid=Liquid("水球图")liquid.add("水球",[0.8])#liquid.render('liquid.html')#图表输出到路径下liquid.render()#图表直接输出liquid
    201f37ed06143732a843974cf226f7f6.png

    箱线图

    201f37ed06143732a843974cf226f7f6.png

    a2316f230d6bf115b3e9be19a6cf173a.png

    #箱线图from pyecharts import Boxplotboxplot=Boxplot("箱线图")x_axis=['销售额']y_axis=[[169,126,248,263,265,273,248,241,326,334,479,347],]_yaxis=boxplot.prepare_data(y_axis)boxplot.add("boxplot",x_axis,_yaxis)boxplot.render()#直接导出或者导出到文件内boxplot.render(linebar.html)boxplot
    201f37ed06143732a843974cf226f7f6.png

    3D柱形图

    201f37ed06143732a843974cf226f7f6.png

    c0f36224521932c5754397f27b04de0e.png

    #3D柱形图from pyecharts import Bar3Dimport jsonbar3d=Bar3D("3D柱形图",width=1200,height=600)f=open("bar3ds.json")datas=json.load(f)x_axis=datas['x_axis']y_axis=datas['y_axis']data=datas['data']range_color=datas['range_color']#visualmap热力图bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color)#设置3D图的自动旋转bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color,         grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True)#设置3D图的自动旋转的速度bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color,         grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True,grid3d_rotate_speed=180)#图表输出bar3d.render('3dbar.html')
    f7f2705a229abb8a03f56326fe98cd6f.png

    展开全文
  • ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动...

    648228a0ac4afbb1a4c944a18afc9ff5.png

    ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    丰富的可视化类型

    ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

    官方网址:https://echarts.baidu.com/

    ECharts

    提供大量常用的数据可视化图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。

    f444274a0423227fe68e55146f6ad2c7.png

    数据视图

    502de25ad8cc10a23d031cd80195edf1.png

    动态类型切换

    b8689459af4badedbd8185797c155c08.png

    多图联动

    8b6678ffe113af5f2829a69bcb6d2a9e.png

    值域漫游

    e4586ad7a805da0553e59d955207b3d9.png

    大规模散点图

    9a723ad525580fd66ac5f2eac77815ef.gif

    子区域地图模式

    4dffd4a9d70aa57bc5daa4c3d64dcb2a.png

    GeoJson地图扩展

    efe2fe3e2bc3259fef9730c4804f2e7a.png

    目标完成率

    #数据分析指标完成情况
    from pyecharts import Gauge
    gauge=Gauge('目标完成率')
    gauge.add('任务指标','完成率',80.2)
    
    #gauge.render('gauge.html')#图表输出
    gauge.render()
    gauge

    8801e1a802e0eca3327c63fd7fc1631a.png
    #水球图
    from pyecharts import Liquid
    
    liquid=Liquid("水球图")
    liquid.add("水球",[0.8])
    #liquid.render('liquid.html')#图表输出到路径下
    liquid.render()#图表直接输出
    liquid
    

    836e17e89a9ade4e51e1cba5177265ac.png
    #箱线图
    from pyecharts import Boxplot
    boxplot=Boxplot("箱线图")
    x_axis=['销售额']
    y_axis=[[169,126,248,263,265,273,248,241,326,334,479,347],]
    _yaxis=boxplot.prepare_data(y_axis)
    boxplot.add("boxplot",x_axis,_yaxis)
    
    boxplot.render()#直接导出或者导出到文件内boxplot.render(linebar.html)
    boxplot

    e9ff3f08883d26709350ebe232c750ca.png
    #visualmap热力图
    bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color)
    #设置3D图的自动旋转
    bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color,
              grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True)
    #设置3D图的自动旋转的速度
    bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color,
              grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True,grid3d_rotate_speed=180)
    
    #图表输出
    bar3d.render('3dbar.html')

    7bc73970a17d76bae77f3990294e3254.png

    本文来源于公众号:大话数据分析

    更多实用的数据分析知识,敬请关注!

    展开全文
  • Echarts是百度开源的数据可视化工具,它凭借着良好的交互性、丰富的图表类型和精巧的图表设计,得到了众多开发者的认可,也为众多数据新闻学习者所熟知。而Python是一门富有表达力的语言,很适合用于数据抓取与处理...
  • 这个问题之前我也百思不得其解,今天下午偶然发现,在series配置项下加上barSize属性即可,这个属性官方的配置文档没有写!!!
  • 最新发布的 ECharts v4.7.0 是 ECharts 在 GitHub 上的第 100 个版本。https://github.com/apache/incubator-echarts​github.com此外,最近 Apache ECharts (incubating) 也迎来了第一位加入 Apache 后新增的孵化...
  • 2.ECharts实现立体柱状图、3D柱状图及属性 ①立体柱状图大概有三部分组成(主图、侧边图、顶部图) 如图: ②主要属性一(控制顶部图的偏移量、大小、高度等): 如图: ③主要属性二(控制主图的宽度、颜色、...
  • option = {tooltip: {},visualMap: {max: 20,inRange: {color: ['#a50026']}},xAxis3D: {type: 'category',data: 'test',axisTick:{ //y轴刻度线"show":false},show:false,splitLine: { //网格线"show": false},...
  • 在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图。还请看我娓娓写来。1、第一步当然还是进入你所在项目的文件夹。2、第二步使用npm安装你所需要用到的组件,》使用...
  • echarts实现3D柱状图

    千次阅读 2020-05-10 09:16:43
    echats实现3D柱状图 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>柱状图</title> </head> <body style="height: 100%; ...
  • echarts 设置3D柱状图

    2020-12-10 14:13:11
    <!DOCTYPE html> <html> <head> <title>电</title> <meta charset="utf-8" /> <style> ::-webkit-scrollbar { display: none; } @font-face { ... .
  • Echarts实现3D柱状图(领导要的样子)

    万次阅读 热门讨论 2019-05-13 14:04:31
    3D柱状图
  • 237Echarts - 3D 柱状图(Image to Bar3D

    万次阅读 多人点赞 2019-05-06 10:38:26
    效果 源代码 var img = new Image(); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); img.onload = function () { var width = canvas.width = img.width / 2; var heig...
  • 3d柱状图效果主要是通过对柱体顶部、底部放置图形(菱形),对柱体设置渐变色进行绘制,从而产生视觉上的3d效果。 象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中。...
  • 使用echarts做3D地图与3D柱状图

    千次阅读 2020-07-17 17:35:44
    3D地图与3D柱状图的联合使用 开始着手对于3d图形的研究,今天写了个demo,3D地图与3D柱状图联合使用,效果大概是这样: 我已经放入了echarts的gallery里,地址:demo地址 在此期间可能会遇到一些问题,例如: 1....
  • 239Echarts - 3D 柱状图(Stacked Bar3D

    千次阅读 2019-05-06 10:40:36
    效果 源代码 $.getScript('vendors/simplex.js').done(function () { function generateData() { var data = []; var noise = new SimplexNoise(Math.random); for (var i = 0; i <= 10; i++) { ...
  • 效果 源代码 var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p']; var ...
  • 效果 源代码 $.get('data/asset/data/life-expectancy-table.json', function (data) { option = { grid3D: {}, tooltip: {}, xAxis3D: { type: 'category' }, ...
  • 效果 源代码 $.getScript('vendors/simplex.js').done(function () { var noise = new SimplexNoise(Math.random); function generateData(theta, min, max) { var data = []; for (var i = 0; i <= 20; ...
  • 效果 源代码 var img = new Image(); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); img.onload = function () { var width = canvas.width = img.width; var height =...
  • 235Echarts - 3D 柱状图(Voxelize image)

    千次阅读 2019-05-06 10:35:35
    效果 源代码 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var imgData; var currentImg; // Configurations var config = { scale: 0.3, roughness: 0, metalne...
  • 效果 源代码 var UPDATE_DURATION = 100; window.AudioContext = window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContext(); var oReq = new XMLHttpRequest(); oReq.open('...
  • 效果 源代码 var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p']; var ...
  • 效果 源代码 $.getScript('vendors/simplex.js').done(function () { var noise = new SimplexNoise(Math.random); function generateData(theta, min, max) { var data = []; for (var i = 0; i <= 50; i...
  • 效果 源代码 $.getJSON('data-gl/asset/data/population.json', function (data) { data = data.filter(function (dataItem) { return dataItem[2] > 0; }).map(function (dataItem) { re...
  • 图文撰写 |超级super栋Figure微信公众号科研论文中,都标记为Figure或Fig,本公众号的...本文转载自“Paper绘图”公众号介 绍今天我们就来聊聊Origin的强大功能,3D立体的制作。有时候,我们的实验数据需要夺...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 125
精华内容 50
关键字:

echarts3d柱状图