原始效果图：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./echarts.common.min.js"></script><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 400px;height:300px;background-color: #eeee;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend: {data: ['整改', '已整改'],itemWidth: 10, // 修改说明字体颜色textStyle: {color: '#FFFFFF',fontSize: 10}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],axisLabel: { // 设置x轴样式fontSize: 12, color: 'red'},}],yAxis: [{name: '单位: XX',type: 'value',nameTextStyle: { // 设置Y轴样式fontSize: 12,color: '#ffffff'},}],series: [{name: '整改',barWidth: 20,type: 'bar', // 设置柱体宽度stack: '广告',emphasis: {focus: 'series',},data: [10, 20, 30, 40, 50, 30, 30]},{name: '已整改',barWidth: 20,type: 'bar',stack: '广告',emphasis: {focus: 'series'},data: [10, 20, 30, 40, 50, 30, 30]},]};myChart.setOption(option);</script>
</body>
</html>改动后效果图：
var xAxisData = [];var data1 = [];var data3 = [];for (var i = 0; i < 10; i++) {xAxisData.push('Class' + i);data1.push((Math.random() * 2).toFixed(2));data3.push((Math.random() + 0.3).toFixed(2));}var emphasisStyle = {itemStyle: {shadowBlur: 10,shadowColor: 'rgba(0,0,0,0.3)'}};let option1 = {// 定制图例legend: {data: ['bar', 'bar2', 'bar3', 'bar4'],type: 'scroll',x: 'right',y: 'top',orient: 'vertical',top: 30,textStyle: {color: '#606060',fontSize: 12,},borderColor: '#e5e5e5',borderWidth: 1,borderRadius: 5,backgroundColor: '#f7f7f7',itemWidth: 18,itemHeight: 11,padding: 15},brush: {toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],xAxisIndex: 0},tooltip: {},xAxis: {data: xAxisData,name: 'X Axis',axisLine: {onZero: true},splitLine: {show: false},splitArea: {show: false}},yAxis: {},grid: {bottom: 100},series: [{name: 'bar',type: 'bar',stack: 'one',emphasis: emphasisStyle,data: data1,barWidth : 16,//柱图宽度//定制当前item的样式itemStyle : {normal: {color:'red', //当前item的颜色barBorderRadius: 50, //当前item的圆角},}},{name: 'bar3',type: 'bar',stack: 'two',emphasis: emphasisStyle,data: data3},]};var chartDom = document.getElementById('echart1');var myChart = echarts.init(chartDom);myChart.setOption(option1);myChart.on('brushSelected', renderBrushed);function renderBrushed(params) {var brushed = [];var brushComponent = params.batch[0];for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {var rawIndices = brushComponent.selected[sIdx].dataIndex;brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));}myChart1.setOption({title: {backgroundColor: '#333',text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),bottom: 0,right:'10%',width: 100,textStyle: {fontSize: 12,color: '#fff'}}});}dataZoom 组件 用于区域缩放
dataZoom: {
type: "inside",
startValue: 0,
endValue: 10
},