echarts柱形图X轴类的数据过多,部分类会被截去或者选择不全。
于是发现了dataZoom,可以加入滚动条。
附上代码:
var Chart2 = echarts.init(document.getElementById('Echarts2'));
option2 = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: "{a} <br/>{b}: {c} %"
},
grid: {
left: '3%',
right: '4%',
bottom: '16%',
containLabel: true,
width: 371
},
dataZoom: {
show: true,
start : 0,
end:20,
height:10,//滚动条高度
backgroundColor:'#effbfe',//滚动条滚动区域背景色
dataBackgroundColor:'#007acc',//有数据时候数据在滚动条上显示的颜色
fillerColor:'#b7e9f8',//滚动条条条本身的颜色
handleColor:'#56abe4',//控制滚动条长短(滚动条两边)的爪爪颜色
handleSize:10//爪爪的宽度
},
xAxis: [
{
type: 'category',
data: [@Html.Raw(Model.Chart2Title)],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name: '正确率',
type: 'bar',
barWidth: '30%',
data: [@Html.Raw(Model.Chart2Value)],
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#FF0000', '#FF8800', '#008800', '#00AAAA', '#0066FF', '#9900FF'];
return colorList[params.dataIndex];
},
label: {
show: true,
position: "top",
formatter: '{c}%'
}
}
}
}
]
};
Chart2.setOption(option2);