-
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柱状图柱子大小(粗细)的方法
2020-10-29 16:14:37 -
echarts 3d柱状图_数据可视化—Echarts图表应用
2020-12-28 06:36:03《错误》郑愁予我打江南走过,那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞。...ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定...《错误》郑愁予
我打江南走过,
那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞。你的心如小小寂寞的城,恰若青石的街道向晚。蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩。我达达的马蹄是个美丽的错误,我不是归人,是个过客!
走过的路,见过的人。各有其因,各有其缘!ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。使用 JavaScript 实现开源的可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。具有丰富的可视化类型,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。官方网址:https://echarts.baidu.com/
ECharts提供大量常用的数据可视化图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。
多图联动
值域漫游
大规模散点图
子区域地图模式
安装Python,请点击链接,进行安装 Python软件安装在Python中有个pyecharts类库,可以实现类似的功能。首先在环境中安装pyecharts库。
输入pip install pyecharts,安装pyecharts库。
安装好pyecharts库后,运行程序,发现导入相应的包。
这是因为在使用pip install下载命令时,软件默认下载最新版本,选择之前的旧版本下载,即可正常运行代码。
代码示例
目标完成率
#数据分析指标完成情况from pyecharts import Gaugegauge=Gauge('目标完成率')gauge.add('任务指标','完成率',80.2)#gauge.render('gauge.html')#图表输出gauge.render()gauge
水球图
#水球图from pyecharts import Liquidliquid=Liquid("水球图")liquid.add("水球",[0.8])#liquid.render('liquid.html')#图表输出到路径下liquid.render()#图表直接输出liquid
箱线图
#箱线图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
3D柱形图
#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')
-
echarts 3d柱状图_数据可视化—ECharts图表的应用
2020-12-28 06:23:34ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动...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线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。
数据视图
动态类型切换
多图联动
值域漫游
大规模散点图
子区域地图模式
GeoJson地图扩展
目标完成率
#数据分析指标完成情况 from pyecharts import Gauge gauge=Gauge('目标完成率') gauge.add('任务指标','完成率',80.2) #gauge.render('gauge.html')#图表输出 gauge.render() gauge
#水球图 from pyecharts import Liquid liquid=Liquid("水球图") liquid.add("水球",[0.8]) #liquid.render('liquid.html')#图表输出到路径下 liquid.render()#图表直接输出 liquid
#箱线图 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
#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')
本文来源于公众号:大话数据分析
更多实用的数据分析知识,敬请关注!
-
echarts 3d柱状图_白杨数说 | Python + Echarts = ?
2020-12-28 06:24:54Echarts是百度开源的数据可视化工具,它凭借着良好的交互性、丰富的图表类型和精巧的图表设计,得到了众多开发者的认可,也为众多数据新闻学习者所熟知。而Python是一门富有表达力的语言,很适合用于数据抓取与处理... -
关于Echarts 3D柱状图改为柱子大小(粗细)的问题
2020-09-04 16:03:49这个问题之前我也百思不得其解,今天下午偶然发现,在series配置项下加上barSize属性即可,这个属性官方的配置文档没有写!!! -
echarts 3d柱状图_上新了 ECharts (v4.7.0):哇,第 100 个版本!
2020-12-28 06:23:31最新发布的 ECharts v4.7.0 是 ECharts 在 GitHub 上的第 100 个版本。https://github.com/apache/incubator-echartsgithub.com此外,最近 Apache ECharts (incubating) 也迎来了第一位加入 Apache 后新增的孵化... -
ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图,ECharts立体柱状图属性
2021-04-14 16:27:492.ECharts实现立体柱状图、3D柱状图及属性 ①立体柱状图大概有三部分组成(主图、侧边图、顶部图) 如图: ②主要属性一(控制顶部图的偏移量、大小、高度等): 如图: ③主要属性二(控制主图的宽度、颜色、... -
echarts 柱状图圆柱_echarts,3D柱状图求帮助
2020-12-18 19:02:33option = {tooltip: {},visualMap: {max: 20,inRange: {color: ['#a50026']}},xAxis3D: {type: 'category',data: 'test',axisTick:{ //y轴刻度线"show":false},show:false,splitLine: { //网格线"show": false},... -
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
2020-12-20 14:54:34在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图。还请看我娓娓写来。1、第一步当然还是进入你所在项目的文件夹。2、第二步使用npm安装你所需要用到的组件,》使用... -
echarts实现3D柱状图
2020-05-10 09:16:43echats实现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:313D柱状图 -
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... -
echarts伪3d柱状图绘制(象形柱图)
2020-12-01 13:30:11伪3d柱状图效果主要是通过对柱体顶部、底部放置图形(菱形),对柱体设置渐变色进行绘制,从而产生视觉上的3d效果。 象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。往往用在信息图中。... -
使用echarts做3D地图与3D柱状图
2020-07-17 17:35:443D地图与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++) { ... -
240Echarts - 3D 柱状图(Transparent Bar3D)
2019-05-06 10:41:34效果图 源代码 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 ... -
228Echarts - 3D 柱状图(3D Bar with Dataset)
2019-05-06 10:28:59效果图 源代码 $.get('data/asset/data/life-expectancy-table.json', function (data) { option = { grid3D: {}, tooltip: {}, xAxis3D: { type: 'category' }, ... -
238Echarts - 3D 柱状图(Metal Bar3D)
2019-05-06 10:39:48效果图 源代码 $.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; ... -
231Echarts - 3D 柱状图(星云)
2019-05-06 10:31:58效果图 源代码 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... -
230Echarts - 3D 柱状图(Music Visualization)
2019-05-06 10:30:44效果图 源代码 var UPDATE_DURATION = 100; window.AudioContext = window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContext(); var oReq = new XMLHttpRequest(); oReq.open('... -
233Echarts - 3D 柱状图(Bar3D - Punch Card)
2019-05-06 10:33:51效果图 源代码 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 ... -
234Echarts - 3D 柱状图(Bar3D - Simplex Noise)
2019-05-06 10:34:46效果图 源代码 $.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... -
229Echarts - 3D 柱状图(Bar3D - Global Population)
2019-05-06 10:29:54效果图 源代码 $.getJSON('data-gl/asset/data/population.json', function (data) { data = data.filter(function (dataItem) { return dataItem[2] > 0; }).map(function (dataItem) { re... -
echarts 柱状图不显示y坐标轴_手把手教你用Origin做 3D 柱状图
2020-12-30 15:16:01图文撰写 |超级super栋Figure图微信公众号科研论文中,图都标记为Figure或Fig,本公众号的...本文转载自“Paper绘图”公众号介 绍今天我们就来聊聊Origin的强大功能,3D立体图的制作。有时候,我们的实验数据需要夺...