echarts 柱状图上下_echarts的dataset实现的横向柱状图,文字、柱状上下排列

option ={

dataset: {

source: [

['product', 'nums'],

['Linux 7.x', 100],

['Linux 6.6.x', 200],

['Windows7', 120],

['Windows10', 240]

]

},

color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'],

grid: {

left:'4%',

top:'center',

right:'1%',

containLabel:true},

xAxis: [{

show:false,

},

{

show:false,

}

],

yAxis: {

type:'category',

inverse:true,

show:false},

series: [//亮色条 百分比

{

show:true,

type:'bar',

barGap:'-100%',

barWidth:'20%',

z:2,

color:function(params) {//build a color map as your need.

var colorList =['#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'];returncolorList[params.dataIndex]

},

itemStyle: {

normal: {

barBorderRadius:10,

}

},

label: {

normal: {

show:true,

textStyle: {

color:'#000',

fontSize:25,

fontWeight:'bold'},

position:'right'}

},

encode: {

x:'nums'}

},//年份

{

show:true,

type:'bar',

xAxisIndex:1, //代表使用第二个X轴刻度

barGap: '-100%',

barWidth:'10%',

itemStyle: {

normal: {

barBorderRadius:200,

color:'transparent'}

},

label: {

normal: {

show:true,

position: [0, '-20'],

formatter:'{b}',

textStyle: {

fontSize:14,

color:'#333',

}

}

},

encode: {

y:'product'}

}

]

};

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值