echarts柱状图怎么设置柱的宽度_echarts图之柱状图中各种参数的含义以及设置方法...

echarts柱状图

/*注意必须要给echarts图存放的父元素设置高度 也可以设置宽度*/

#bar{

width:500px;

height:200px;

background-color: pink;

}

var myChart = echarts.init(document.getElementById('bar'));

var valueUnit = '人数';//纵坐标名字 单位

var option = {

title: {

text: '柱状图',

left: 'center',

textStyle: { //标题内容的样式

color: '#000',

fontStyle: 'normal',

fontWeight: 100,

fontSize: 16 //主题文字字体大小，默认为18px

},

},

color: ['#3398DB'],//给柱状图设置颜色

tooltip : {

trigger: 'axis',//设置鼠标划过时显示信息 如果不设置 不显示坐标轴指示器

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

type : 'shadow'// 默认为直线，可选为：'line'线型 | 'shadow'阴影 | 'cross'十字交叉坐标轴指示器

}

},

grid: {//设置柱状图位置 上下左右距离也可以用 y y2 x x2 表示 可以用百分比表示也可以直接数字 例如 x:20

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis : [

{

type : 'category',//设置坐标轴显示类别

data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//横坐标显示内容

axisTick: {

alignWithLabel: true//坐标轴刻度与标签对齐 如果不设置 默认坐标刻度将柱状图包括在内

},

splitLine:{

show:false //设置横坐标坐标轴标准线 竖线 的显示隐藏 不设置 默认隐藏

},

axisLabel: {//横坐标类目文字

show: true,

textStyle: {

color: '#000',//设置横坐标轴文字颜色

fontSize: '14'//设置横坐标轴文字颜大小

}

},

axisLine: {

lineStyle: {

color: '#000',//设置横坐标轴线颜色

width: 1, //这里是坐标轴的宽度,可以去掉

}

}

}

],

yAxis : [

{

type : 'value',//纵坐标显示数值

name: valueUnit,

nameTextStyle: {

padding: [0, 0, 0, -30] // echarts坐标轴的name属性更改位置 四个数字分别为上右下左与原位置距离

},

splitLine:{

show:false //设置纵坐标坐标轴标准线 横线 的显示隐藏 不设置 默认为true显示

},

}

],

series : [

{

name:'直接访问',

type:'bar',

barWidth: '60%',//设置柱状图的柱状的宽度

data:[10, 52, 200, 334, 390, 330, 220]

}

]

};

myChart.setOption(option);