echarts篇IV——x轴数据过长，使用滚动条(区域缩放dataZoom)实现区域预览

图标特点及问题：

1.柱形图和折线图混合

2.左右侧分割线对齐

3.横轴为月份，而数据是年份区间，导致月份过长不能全部展示。解决方案：就是加上dataZoom，echarts中叫做区域缩放，在这个图表中正好派上用场，并固定一屏显示半年，即六个月

配置如下：

var option = {
    backgroundColor: '#051c71',
    dataZoom: [{
        type: 'slider',
        show: true,
        startValue: 0,
        endValue: 5,
        height: '15',
        bottom: '3%',
        zoomLock: true
    }],
    tooltip: {
        trigger: "axis",
        backgroundColor: 'rgb(11,11,81)',
        padding: [15,30],
        extraCssText: 'box-shadow: 0px 0px 25px 5px rgb(41, 95, 159) inset;border-radius:10px'
    },
    legend: {
        show: true,
        top: '5%',
        textStyle: {
            color: "#fff"
        },
        data: ["数量", "金额"]
    },
    grid: {
        top: '20%',
        left: "3%",
        right: "4%",
        bottom: "13%",
        containLabel: true
    },
    xAxis: {
  	    type: "category",
      	axisTick: {
      		show: false
      	},
      	axisLabel: {
      		//"rotate": 30,
      		interval: 0,
      		color: '#ddd',
      		fontSize: 14
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	},
      	data: ["1月", "2月", "3月", "4月", 
      	"5月", "6月", "7月", "8月", 
      	"9月", "10月", "11月", 
      	"12月", "1月", "2月", 
      	"3月", "4月"]
    },
    yAxis: [{
      	type: "value",
      	name: "单位:(件)",
      	min: 0,
      	axisTick: {
      		show: false
      	},
      	splitLine: {
      	    show: false,
           lineStyle: {
               color: 'transparent'
           }  
      	},
      	splitNumber: 5,
      	axisLabel: {
      		show: true,
      		textStyle: {
      			color: "#ddd"
      		}
      	},
      	nameTextStyle: {
      		color: "#ddd"
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	}
    }, {
      	type: "value",
      	name: "金额:(元)",
      	min: 0,
      	// "max": 15000,
      	axisTick: {
      		show: false
      	},
      	splitLine: {
           lineStyle: {
               color: 'rgba(255,255,255,0.2)'
           }  
      	},
      	splitNumber: 5,
      	axisLabel: {
      		show: true,
      		textStyle: {
      			color: "#eee"
      		}
      	},
      	nameTextStyle: {
      		color: "#fff"
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	}
    }],
    series: [{
      	name: "数量",
      	type: "bar",
      	barWidth: 15,
      	label: {
      		normal: {
      			show: false,
      			position: "insideRight"
      		}
      	},
      	itemStyle: {
      		normal: {
      			color:  new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgb(61, 207, 255)'},
                    {offset: 0.5, color: 'rgb(61, 207, 255)'},
                    {offset: 1, color: 'rgba(61, 207, 255, 0.1)'}
                ]
            ),
      		}
      	},
      	data: [10, 7, 15, 8, 6, 2, 1, 3]
    }, {
      	name: "金额",
      	type: "line",
      	yAxisIndex: 1,
      	smooth: false,
      	showAllSymbol: true,
      	symbol: "circle",
      	symbolSize: 10,
      	itemStyle: {
      		color: "rgb(253,146,166)"
      	},
      	lineStyle: {
      		color: "rgb(253,146,166)"
      	},
      	data: [3300, 1000, 1600, 3000, 4000, 2000, 1020, 1500]
    }]
};

效果如下：