echarts 柱状图如何不顶格_echarts柱状图如何中间对齐而不是底部对齐?

echarts中可以写个辅助bar “顶起来”

var data = [2900, 1000, 1400, 1200, 300, 230]

function iData (data) {

let max = Math.max.apply(null,data)

console.log(max)

let iData = data.map((item) => {

return max - item /2

})

return iData

}

option = {

title: {

text: '深圳月最低生活费组成(单位:元)',

subtext: 'From ExcelHome',

sublink: 'http://e.weibo.com/1341556070/AjQH99che'

},

tooltip : {

trigger: 'axis',

axisPointer : { // 坐标轴指示器,坐标轴触发有效

type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'

},

formatter: function (params) {

var tar = params[1];

return tar.name + '
' + tar.seriesName + ' : ' + tar.value;

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: {

type : 'category',

splitLine: {show:false},

data : ['总费用','房租','水电费','交通费','伙食费','日用品数']

},

yAxis: {

type : 'value'

},

series: [

{

name: '辅助',

type: 'bar',

stack: '总量',

itemStyle: {

normal: {

barBorderColor: 'rgba(0,0,0,0)',

color: 'rgba(0,0,0,0)'

},

emphasis: {

barBorderColor: 'rgba(0,0,0,0)',

color: 'rgba(0,0,0,0)'

}

},

data: iData(data)

},

{

name: '生活费',

type: 'bar',

stack: '总量',

label: {

normal: {

show: true,

position: 'inside'

}

},

data:data

}

]

};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts中,横向柱状图数据特别多时可以通过数据区域缩放、拖拽移动和切换维度等方式进行翻页。具体来说,可以通过以下几种方式实现: 1. 数据区域缩放:在横向柱状图中,可以使用鼠标滚轮或者手指在移动设备上进行缩放,以便查看更多的数据。 2. 拖拽移动:在横向柱状图中,可以使用鼠标左键或者手指在移动设备上进行拖拽移动,以便查看更多的数据。 3. 切换维度:在横向柱状图中,可以通过切换维度来查看不同的数据,例如切换到不同的时间维度或者不同的地理位置维度等。 下面是一个示例代码,演示如何在Echarts中实现横向柱状图的数据翻页功能: ```javascript option = { dataset: { source: [ ['product', '2015', '2016', '2017', '2018', '2019', '2020'], ['Matcha Latte', 43.3, 85.8, 93.7, 50.6, 70.7, 60.0], ['Milk Tea', 83.1, 73.4, 55.1, 53.4, 60.8, 70.0], ['Cheese Cocoa', 86.4, 65.2, 82.5, 82.5, 72.5, 62.5], ['Walnut Brownie', 72.4, 53.9, 39.1, 66.6, 72.7, 82.0] ] }, xAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}%' } }, yAxis: { type: 'category', inverse: true, data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'], axisLabel: { margin: 20, rich: { value: { lineHeight: 30, align: 'center' }, minus: { height: 30, align: 'center', backgroundColor: { image: 'barMinus.png' } }, plus: { height: 30, align: 'center', backgroundColor: { image: 'barPlus.png' } } }, formatter: function (params) { var value = params.value; if (value.length > 10) { return value.substring(0, 10) + '...'; } else { return value; } } } }, grid: { left: 100 }, series: [ { type: 'bar', encode: { x: '2015', y: 'product' } }, { type: 'bar', encode: { x: '2016', y: 'product' } }, { type: 'bar', encode: { x: '2017', y: 'product' } }, { type: 'bar', encode: { x: '2018', y: 'product' } }, { type: 'bar', encode: { x: '2019', y: 'product' } }, { type: 'bar', encode: { x: '2020', y: 'product' } } ] }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值