echartsX过多

来源：互联网发布：付费软件怎么收费编辑：程序博客网时间：2024/05/15 21:35

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);

0 0