一、运行效果
二、具体代码
var app = echarts.init(document.getElementById("box"));
var option = {
title: {
text: '样本量分析',
left:'50%',
textStyle:{
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
type:'plain',
data: ['2011年', '2012年', '2013年'],
bottom:'0px',
},
grid: {
left: '0%',
right: '4%',
bottom: '10%',
top:'15%',
containLabel: true
},
xAxis: {
type: 'value',
// data:[2000,4000,6000,8000,10000,12000],
onZero:false,
// 坐标轴
axisLine:{
lineStyle:{
opacity:0,
width:0
}
},
// 设置坐标轴上刻度
axisTick:{
show:false
},
// 自由分配x轴坐标
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
data: [],
show:false
},
series: [
{
name: '2011年',
type: 'bar',
data: [2000],
itemStyle:{
normal:{
color:new echarts.graphic.LinearGradient(0,0,1,0,[
{
offset:0,
color:'#fff'
},
{
offset:1,
color:'#B0B0B0'
}
])
},
},
// 设置柱子的高度
barWidth:'20px',
// 设置显示数值的样式
label: {
normal: {
show: true,
position: 'insideRight',
color:'#333'
}
},
// 设置柱子之间的间距
barGap:'100%'
},
{
name: '2012年',
type: 'bar',
data: [3900],
itemStyle:{
normal:{
color:new echarts.graphic.LinearGradient(0,0,1,0,[
{
offset:0,
color:'#fff'
},
{
offset:1,
color:'#EF8945'
}
])
},
},
// 设置柱子的高度
barWidth:'20px',
// 设置显示数值的样式
label: {
normal: {
show: true,
position: 'insideRight',
color:'#333'
}
},
},
{
name: '2013年',
type: 'bar',
data: [8000],
// 设置柱子的高度
barWidth:'20px',
itemStyle:{
normal:{
color:new echarts.graphic.LinearGradient(0,0,1,0,[
{
offset:0,
color:'#fff'
},
{
offset:1,
color:'#6EA6DA'
}
])
},
},
// 设置显示数值的样式
label: {
normal: {
show: true,
position: 'insideRight',
color:'#333'
}
},
}
]
};
app.setOption(option);
