echarts柱状图铺满_echarts 柱状图多种样式设置

let option ={

grid: {

left:10%,

right:65,

top:114,

bottom:100,

},

xAxis : [

{

type :'category',//横向网格

splitLine: {

show:true,

lineStyle: {

color:'#e1e1e1',

}

},

axisTick: {

show:false},//是否显示x轴线

axisLine: {

show:false,//lineStyle: {

//color: '#2A2A2A',

//}

},//x轴字体设置

axisLabel: {

rotate:0,

show:true,

textStyle: {

fontSize:'22px',

fontFamily:'PingFang-SC-Medium',//padding: [5,0,0,0],

color: '#000000'},

},

data : ['A区','B区','C区','D区','E区',"F区"],

}

],

yAxis : [

{

type :'value',

splitLine: {

show:true,

lineStyle: {

color:'#e1e1e1',

}

},

axisTick: {

show:false},

axisLine: {

show:false,//lineStyle: {

//color: '#2A2A2A',

//}

},

axisLabel: {

show:true,

textStyle: {

fontSize: remToPx(22/75),

fontFamily: 'PingFang-SC-Medium',

color:'#838383'}

}

}

],

series : [

{

type:'bar',

data:[145,159,6,145,149,50],

barWidth: remToPx(25/75),//柱子的宽度

silent: true,

itemStyle: {

normal: {

color:function(params) {//设置默认某一行颜色以及点击之后颜色变化，颜色均为渐变色

if (params.name === "B区" || checkName ===params.name) {return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{

offset:0,

color:"#f99b37" //0% 处的颜色

},

{

offset:1,

color:"#ffbb51" //100% 处的颜色

}], false)

}else{return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{

offset:0,

color:"#1a79c9" //0% 处的颜色

},

{

offset:1,

color:"#46aafd" //100% 处的颜色

}], false)

}

},

label: {

show:true,

position:'top',//formatter: '{b}\n{c}'

formatter: function(a){if(a.name == "B区"){return a.value+'%'}else{return a.value+'%'}

}

},

},

},

}

]

};

const client=document.getElementById(id);

let myChart=echarts.init(client);

const clientWidth=client.clientWidth;

const clientHeight=client.clientHeight;

myChart.clear();

myChart.resize({width: clientWidth, height: clientHeight});

myChart.setOption(option);

myChart.on('click',function(params){//点击的柱子

checkName =params.name;//柱形图重构

myChart.setOption(option);

})