echarts生成三维柱状图

这里介绍下如何生成三维的柱状图，例如，按照月份展示两个产品在2010年和2011年的统计数量，这里x轴标识月份，一根柱子代表一年的几个产品，这里是两年两个产品的示例，多个年数或产品同样的方法，不在赘述。

以下是核心代码部分，主要利用了堆叠柱状图的思想，然后再通过stack属性对产品进行分类，最后再format tooltips展示

option = {tooltip: {trigger: 'axis',formatter: function (params,ticket,callback) {// console.log(params)var res = '2010年' + params[0].name + ':';var res1 = '<br/>2011年' + params[0].name+ ':';for (var i = 0, l = params.length; i < l; i++) {if(i === 2) {res += res1 + '<br/>' + params[i].seriesName + ' : ' + params[i].value} else {res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;}}// console.log(res)return res;}},legend: {data: ['产品一', '产品二']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']}],yAxis: [{type: 'value'}],series: [{name: '产品一',stack: '2010',type: 'bar',data: [320, 332, 301, 334, 390, 330, 320,120, 132, 101, 134, 290, 230, 220]},{name: '产品二',stack: '2010',type: 'bar',data: [220, 182, 191, 234, 290, 330, 310,62, 82, 91, 84, 109, 110, 120]},{name: '产品一',stack: '2011',type: 'bar',data: [120, 132, 101, 134, 290, 230, 220,320, 332, 301, 334, 390, 330, 320]},{name: '产品二',stack: '2011',type: 'bar',data: [62, 82, 91, 84, 109, 110, 120,220, 182, 191, 234, 290, 330, 310]}    ]
};

小伙伴如果有疑问可以第一时间评论或留言，看到后也会及时回复的，有帮助的麻烦动动手指点个赞哟！

echarts生成三维柱状图相关推荐

Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
使用echarts生成漂亮的3D地图
使用echarts生成漂亮的3D地图 echarts是非常好用的图表插件,本文使用echarts来生成一个漂亮的3D地图效果准备资料第三方插件 <script type="tex ...
matlab绘制三维柱状图(hist3,bar3)
N = 1e3; % number of points rng(7) signalIn = rand(N, 2)*30; signalIn(1:10,:) = 5.5; % 密集 signalIn(5 ...
用ECharts生成统计图
用ECharts生成统计图这是我的HTML部分: <div class="layui-fluid" style="font-size:16px"> ...
【Echarts】通过柱状图实例，一文让你学会Echarts的基础使用！！！
通过柱状图实例,一文让你学会Echarts的基础使用!!! 先看效果: 获取Echarts 文件目录引入Echarts 通过标签方式直接引入构建好的 echarts 文件 <!DOCTYPE ...
php 自定义表格并统计,PHP 使用Echarts生成数据统计报表的实现
这篇文章主要介绍了PHP 使用Echarts生成数据统计报表的实现代码,需要的朋友可以参考下 echarts统计,简单示例先看下效果图看下代码 HTML页面为ECharts准备一个Dom,宽高自 ...
python使用matplotlib可视化3D柱状图（3D histogram、三维柱状图、包含三个坐标轴x、y、z）、设置zdir参数为z、改变3d图观察的角度
python使用matplotlib可视化3D柱状图(3D histogram.三维柱状图.包含三个坐标轴x.y.z).设置zdir参数为z.改变3d图观察的角度目录
python使用matplotlib可视化3D柱状图（3D bar plot、三维柱状图、包含三个坐标轴x、y、z）、设置zdir参数为y、改变3d图观察的角度
python使用matplotlib可视化3D柱状图(3D bar plot.三维柱状图.包含三个坐标轴x.y.z).设置zdir参数为y.改变3d图观察的角度目录
记录一下matlab三维柱状图调色详细步骤
matlab五彩三维柱形图绘制_小乖乖的臭坏坏-CSDN博客_matlab绘制三维柱状图按照上面的方法画出图形想要让它变成多种颜色的而且随着数值变化记录一下详细步骤: 1,打开原视图 2,打开的 ...
php制作曲线柱形图的框架,用GD图库生成横竖柱状图折线图的类_php
最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧 Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色 ...

echarts生成三维柱状图

echarts生成三维柱状图相关推荐

最新文章

热门文章