SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>ECharts</title>
</head>

<body>
	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var xAxisData = [];
var data1 = [];
var emphasisStyle = {
    itemStyle: {
        barBorderWidth: 1,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.5)'
    }
};
for (var i = 0; i < 20; i++) {
    xAxisData.push('Class' + i);
    data1.push((Math.random() * 2).toFixed(2));
}
        // 指定图表的配置项和数据
        var option = {
    backgroundColor: '#eee',
    brush: {
        toolbox: ['lineX', 'clear'],
        xAxisIndex: 0,
        throttleType: 'debounce',
        throttleDelay: 300,
    },
    toolbox: {
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        name: '',
        axisLine: {onZero: true},
        splitLine: {show: false},
        splitArea: {show: false}
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    yAxis: {
        show: false
    },
    grid: {
        left: 20,
        right: 20
    },
    series: [
        {
            name: 'bar',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: data1
        },
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.dispatchAction({
            type: 'takeGlobalCursor',
            key: 'brush',
            brushOption: {
                brushType: 'lineX',
                brushMode: 'multiple'
            }
        });
        myChart.on('brushSelected', renderBrushed);

        function renderBrushed(params) {
            var dataIndex = params.batch[0].selected[0].dataIndex;
            var zoomSize = 4;
            if(dataIndex.length > 0) {
                myChart.dispatchAction({
                    type: 'dataZoom',
                    startValue: xAxisData[Math.max(dataIndex[0] - zoomSize / 2, 0)],
                    endValue: xAxisData[Math.min(dataIndex[dataIndex.length - 1] + zoomSize / 2, xAxisData.length - 1)]
                });
            } else {
                myChart.dispatchAction({
                    type: 'dataZoom',
                    startValue: 0,
                    endValue: xAxisData.length - 1
                });
            }
        }
	</script>
</body>

</html>

本项目引用的自定义外部资源