echarts柱状图怎么设置柱的宽度_echarts图之柱状图中各种参
数的含义以及设置⽅法...
echarts柱状图
/*注意必须要给echarts图存放的⽗元素设置⾼度 也可以设置宽度*/
#bar{
width:500px;
height:200px;
background-color: pink;
}
var myChart = echarts.ElementById('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, //这⾥是坐标轴的宽度，可以去掉
}
}
}
],
shadow什么意思啊
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);