设置echarts 柱状图可以左右拖动 并设置默认显示多少个
var myChart = echarts.init(document.getElementById('Main'));//初始图表
var xAxisData=['360', '创客', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16'];
var seriesData=[120, 110, 100, 90, 80, 70, 60,50,40,35,33,32,30,21,20,10];
var endPercent = (10/xAxisData.length) * 100;//设置显示多少个 原理：计算总个数和设置个数的比例高
var option = {
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
minInterval: 1,
type: 'value',
axisLabel : {
formatter: '{value} 个'
}
},
series: [{
data: seriesData,
type: 'bar',
label: {
normal: {
show: true,
position: 'top'
}
}
}],
itemStyle: {
//通常情况下：
normal:{
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
var colorList = [
'rgb(0,78,131)',
'rgb(3,137,188)',
'rgb(131,187,212)',
'rgb(234,132,0)',
'rgb(216,176,125)',
'rgb(188,221,226)',
'rgb(220,108,26)',
'rgb(167,215,227)',
'rgb(4,134,192)',
'rgb(0,136,204)',
'rgb(0,78,131)',
'rgb(3,137,188)',
'rgb(131,187,212)',
'rgb(234,132,0)',
'rgb(216,176,125)',
'rgb(188,221,226)',
'rgb(220,108,26)',
'rgb(167,215,227)',
'rgb(4,134,192)',
'rgb(0,136,204)',
'rgb(0,78,131)',
'rgb(3,137,188)',
'rgb(131,187,212)',
'rgb(234,132,0)',
'rgb(216,176,125)',
'rgb(188,221,226)',
'rgb(220,108,26)',
'rgb(167,215,227)',
'rgb(4,134,192)',
'rgb(0,136,204)',
'rgb(0,78,131)',
'rgb(3,137,188)',
'rgb(131,187,212)',
'rgb(234,132,0)',
'rgb(216,176,125)',
'rgb(188,221,226)',
'rgb(220,108,26)',
'rgb(167,215,227)',
'rgb(4,134,192)',
'rgb(0,136,204)',
'rgb(0,78,131)',
'rgb(3,137,188)',
'rgb(131,187,212)',
'rgb(234,132,0)',
'rgb(216,176,125)',
'rgb(188,221,226)',
'rgb(220,108,26)',
'rgb(167,215,227)',
'rgb(4,134,192)',
'rgb(0,136,204)',
];
return colorList[params.dataIndex];
}
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
/*设置可左右滑动*/
dataZoom : [
{
type: 'inside',//鼠标可拖动
show: true,
start: 0,//滚动条开始位置
end: endPercent,//滚动条结束位置
handleSize: 2
},
{
type: 'slider',
show: true,
start: 0,
end: endPercent,
handleSize: 2
}
]
};
myChart.setOption(option);
