echartbar对齐方式

echartbar对齐方式是中间对齐

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 + '<br/>' + 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

}

]

}

图片中红色框起来的按钮

2、代码

[javascript] view plain copy

selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字

show:true,//是否显示

title:'自定义', //鼠标移动上去显示的文字

icon:'test.png', //图标

option:{},

onclick:function(option1) {//点击事件,这里的option1是chart的option信息

alert('1')//这里可以加入自己的处理代码，切换不同的图形

}

}

在toolbox中的位置

[javascript] view plain copy

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar']},

restore : {show: true},

selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字

show:true,//是否显示

title:'自定义', //鼠标移动上去显示的文字

icon:'test.png', //图标

option:{},

onclick:function(option1) {//点击事件,这里的option1是chart的option信息

alert('1')//这里可以加入自己的处理代码，切换不同的图形

}

},

saveAsImage : {show: true}

}

}

当然，内置了很多图标，这些图标都是画出来的。

[javascript] view plain copy

iconLibrary: {

mark: _iconMark,

markUndo: _iconMarkUndo,

markClear: _iconMarkClear,

dataZoom: _iconDataZoom,

dataZoomReset: _iconDataZoomReset,

restore: _iconRestore,

lineChart: _iconLineChart,

barChart: _iconBarChart,

pieChart: _iconPieChart,

funnelChart: _iconFunnelChart,

forceChart: _iconForceChart,

chordChart: _iconChordChart,

stackChart: _iconStackChart,

tiledChart: _iconTiledChart,

dataView: _iconDataView,

saveAsImage: _iconSave,

cross: _iconCross,

circle: _iconCircle,

rectangle: _iconRectangle,

triangle: _iconTriangle,

diamond: _iconDiamond,

arrow: _iconArrow,

star: _iconStar,

heart: _iconHeart,

droplet: _iconDroplet,

pin: _iconPin,

image: _iconImage

}

带chart后缀的都放在magicType的type中，同时后缀chart不用，程序里会自动拼接，比如lineChart，写'line'

---