echarts 柱状图 详解与使用集合

icon:‘circle’, //----图例的外框样式

textStyle:{

color:‘#fff’, //----单独设置某一个图例的颜色

//backgroundColor:‘black’,//—单独设置某一个图例的字体背景色

}

}

],

},

//-------------- 提示框 -----------------

tooltip: {

show:true, //—是否显示提示框,默认为true

trigger:‘item’, //—数据项图形触发

axisPointer:{ //—指示样式

type:‘shadow’,

axis:‘auto’,

},

padding:5,

textStyle:{ //—提示框内容样式

color:“#fff”,

},

},

//------------- grid区域 ----------------

grid:{

show:false, //—是否显示直角坐标系网格

top:80, //—相对位置，top\bottom\left\right

containLabel:false, //—grid 区域是否包含坐标轴的刻度标签

tooltip:{ //—鼠标焦点放在图形上，产生的提示框

show:true,

trigger:‘item’, //—触发类型

textStyle:{

color:‘#666’,

},

}

},

//------------- x轴 -------------------

xAxis: {

show:true, //—是否显示

position:‘bottom’, //—x轴位置

offset:0, //—x轴相对于默认位置的偏移

type:‘category’, //—轴类型，默认’category’

name:‘月份’, //—轴名称

nameLocation:‘end’, //—轴名称相对位置

nameTextStyle:{ //—坐标轴名称样式

color:“#fff”,

padding:[5,0,0,-5], //—坐标轴名称相对位置

},

nameGap:15, //—坐标轴名称与轴线之间的距离

//nameRotate:270, //—坐标轴名字旋转

axisLine:{ //—坐标轴 轴线

show:true, //—是否显示

//------------------- 箭头 -------------------------

symbol:[‘none’, ‘arrow’], //—是否显示轴线箭头

symbolSize:[8, 8] , //—箭头大小

symbolOffset:[0,7], //—箭头位置

//------------------- 线 -------------------------

lineStyle:{

color:‘#fff’,

width:1,

type:‘solid’,

},

},

axisTick:{ //—坐标轴 刻度

show:true, //—是否显示

inside:true, //—是否朝内

lengt:3, //—长度

lineStyle:{

//color:‘red’, //—默认取轴线的颜色

width:1,

type:‘solid’,

},

},

axisLabel:{ //—坐标轴 标签

show:true, //—是否显示

inside:false, //—是否朝内

rotate:0, //—旋转角度

margin: 5, //—刻度标签与轴线之间的距离

//color:‘red’, //—默认取轴线的颜色

},

splitLine:{ //—grid 区域中的分隔线

show:false, //—是否显示，'category’类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的

lineStyle:{

//color:‘red’,

//width:1,

//type:‘solid’,

},

},

splitArea:{ //–网格区域

show:false, //—是否显示，默认false

},

data: [“1月”,“2月”,“3月”,“4月”,“5月”,“6月”,“7月”,“8月”,“9月”,“10月”,“11月”,“12月”],//内容

},

//---------------------- y轴 ------------------------

yAxis: {

show:true, //—是否显示

position:‘left’, //—y轴位置

offset:0, //—y轴相对于默认位置的偏移

type:‘value’, //—轴类型，默认’category’

name:‘销量’, //—轴名称

nameLocation:‘end’, //—轴名称相对位置value

nameTextStyle:{ //—坐标轴名称样式

color:“#fff”,

padding:[5,0,0,5], //—坐标轴名称相对位置

},

nameGap:15, //—坐标轴名称与轴线之间的距离

//nameRotate:270, //—坐标轴名字旋转

axisLine:{ //—坐标轴 轴线

show:true, //—是否显示

//------------------- 箭头 -------------------------

symbol:[‘none’, ‘arrow’], //—是否显示轴线箭头

symbolSize:[8, 8] , //—箭头大小

symbolOffset:[0,7], //—箭头位置

//------------------- 线 -------------------------

lineStyle:{

color:‘#fff’,

width:1,

type:‘solid’,

},

},

axisTick:{ //—坐标轴 刻度

show:true, //—是否显示

inside:true, //—是否朝内

lengt:3, //—长度

lineStyle:{

//color:‘red’, //—默认取轴线的颜色

width:1,

type:‘solid’,

},

},

axisLabel:{ //—坐标轴 标签

show:true, //—是否显示

inside:false, //—是否朝内

rotate:0, //—旋转角度

margin: 8, //—刻度标签与轴线之间的距离

//color:‘red’, //—默认取轴线的颜色

},

splitLine:{ //—grid 区域中的分隔线

show:true, //—是否显示，'category’类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的

lineStyle:{

color:‘#666’,

width:1,

type:‘dashed’, //—类型

},

},

splitArea:{ //–网格区域

show:false, //—是否显示，默认false

}

},

//------------ 内容数据 -----------------

series: [

{

name: ‘销量’, //—系列名称

type: ‘bar’, //—类型

legendHoverLink:true, //—是否启用图例 hover 时的联动高亮

label:{ //—图形上的文本标签

show:false,

position:‘insideTop’, //—相对位置

rotate:0, //—旋转角度

color:‘#eee’,

},

itemStyle:{ //—图形形状

color:‘blue’,

barBorderRadius:[18,18,0,0],

},

barWidth:‘20’, //—柱形宽度

barCategoryGap:‘20%’, //—柱形间距

data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]

}

]

};

二、柱状图使用篇

========

1、根据数据分别自定义柱子的颜色

//在series里配置如下itemStyle

itemStyle:{ //—图形形状

// color:‘blue’,

color:function (params) {

console.log(params)

if(params.value>=6000){

return “green”

}

if(params.value<6000 && params.value>=4000){

return “yellow”

}

else{

return “red”;

}

},

barBorderRadius:[18,18,0,0],
},
这个params打印出来如下：