echarts怎么实现堆积柱状图,数据来源数据库 echarts 堆积柱状图 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 参考echarts里面类似的demohttp://echarts.baidu.com/doc/example/bar4.html option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data:['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎'] }, toolbox: { show : true, feature : { : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'value' } ], yAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], series : [ { name:'直接访问', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[320, 302, 301, 334, 390, 330, 320] }, { name:'邮件营销', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[150, 212, 201, 154, 190, 330, 410] }, { name:'搜索引擎', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[820, 832, 901, 934, 1290, 1330, 1320] } ]};参考json格式,设定成约定格式的数据,绑上去就可以了。 谢谢楼上两位,: 需求是这样的:横轴为最活跃的五个工程名称,纵轴为该工程中使用所有工具的堆积鼠标放上去tips显示该工具的名字以及该工具本月使用人次不过现在有个问题是这样的,横轴数据容易传入,但是纵轴没有好的办法解决。每个柱子对应一个工程名称,由几个堆积层次构成是由该工程对应的工具数量决定。例如最活跃的第一个工程A,他里面用到了工具a,b,c那么第一个柱子的纵轴就是如下,但是每个工程使用的工具不同(从数据库查询),所以每个柱子就不确定是由几个堆积层构成。那么series 里面怎么写呢?{ name:'工具a', type:'bar', stack: '工程A', data:[320, 302, 301, 334, 390, 330, 320] },{ name:'工具b', type:'bar', stack: '工程A', data:[320, 302, 301, 334, 390, 330, 320] },{ name:'工具c', type:'bar', stack: '工程A', data:[320, 302, 301, 334, 390, 330, 320] } vbscript不出alert弹窗,急求答案!! jquery操作问题 js如何实现三位数字逗号间隔?如100,000 看不明白的JS,高手们进来解释一下 光标停在编辑器一处,点击按钮可以在光标处插入新内容 求解 jQuery 的事件执行机制 js怎么修改当前url? 谁帮我写一个简单的改变字体颜色的javascript函数? 求JS控制文本的解决方案,最好是正则,谢谢! 使用jq ajax 的post方式,传递的参数自动加“[]”符号,请问怎么解决? 求将这个导出excel的js代码支持谷歌浏览器 js数组对比求解
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
: {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
series : [
{
name:'直接访问',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[320, 302, 301, 334, 390, 330, 320]
},
{
name:'邮件营销',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[150, 212, 201, 154, 190, 330, 410]
},
{
name:'搜索引擎',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
参考json格式,设定成约定格式的数据,绑上去就可以了。
需求是这样的:
横轴为最活跃的五个工程名称,纵轴为该工程中使用所有工具的堆积
鼠标放上去tips显示该工具的名字以及该工具本月使用人次
不过现在有个问题是这样的,横轴数据容易传入,但是纵轴没有好的办法解决。每个柱子对应一个工程名称,由几个堆积层次构成是由该工程对应的工具数量决定。
例如最活跃的第一个工程A,他里面用到了工具a,b,c那么第一个柱子的纵轴就是如下,但是每个工程使用的工具不同(从数据库查询),所以每个柱子就不确定是由几个堆积层构成。那么series 里面怎么写呢?
{
name:'工具a',
type:'bar',
stack: '工程A',
data:[320, 302, 301, 334, 390, 330, 320]
},
{
name:'工具b',
type:'bar',
stack: '工程A',
data:[320, 302, 301, 334, 390, 330, 320]
},
{
name:'工具c',
type:'bar',
stack: '工程A',
data:[320, 302, 301, 334, 390, 330, 320]
}