echarts 百度图表 缩放

项目中用到的，vue的 直接看吧

dataZoom 就是缩放内容

	 <template>
		  <div>
		    <!-- 图表 -->
		    <div class="pl_20">
		      <div id="myChart" ref="myChart"></div>
		    </div>
		  </div>
		</template>
		<style scoped lang='less' rel='stylesheet/less'>
		#myChart {
		  width: 100%;
		  height: 6.8rem;
		}
		</style>
		<script>
		// 引入完整的echarts
		import echarts from "echarts";
		export default {
		  data() {
		    return {
		      timeData: ["00:00", "06:00", "12:00", "18:00", "24:00"],
		      NumberDara: [15, 81, 201, 10, 90],
		    };
		  },
		  mounted() {
		    // 调用绘制图表的方法
		 	this.draw()
		  },
		  methods: {
		    draw() {
		      // 实例化echarts对象
		      var myChart = echarts.init(this.$refs.myChart);
		      var fontColor = "#F65D31";
		      // 绘制条形图
		      myChart.setOption({
		        backgroundColor: "#fff",
		        grid: {
		          left: "0%",
		          right: "9%",
		          top: "8%",
		          bottom: "20%",
		          containLabel: true
		        },
		        xAxis: [
		          {
		            axisLabel: {
		              show: true,
		              textStyle: {
		                color: "#333"
		              }
		            },
		            type: "category",
		            boundaryGap: false,
		            axisLine: {
		              show: true,
		              lineStyle: {
		                color: "#c8c8c8"
		              }
		            },
		            splitLine: {
		              show: false
		            },
		            data: this.timeData
		          }
		        ],
		        yAxis: [
		          {
		            axisLabel: {
		              show: true,
		              textStyle: {
		                color: "#333"
		              }
		            },
		            axisLine: {
		              lineStyle: {
		                color: "#c8c8c8"
		              }
		            },
		            splitLine: {
		              show: false
		            }
		          }
		        ],
		        dataZoom: [
		          {
		            show: true,
		            height: 40,
		            xAxisIndex: [0],
		            bottom: "8px",
		            start: 10,
		            end: 90,
		            handleIcon:
		              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
		            handleSize: "110%",
		            handleStyle: {
		              color: "#ff7b06"
		            },
		            textStyle: {
		              color: "#90979c"
		            },
		            borderColor: "#90979c"
		          },
		          {
		            type: "inside",
		            show: true,
		            height: 15,
		            start: 1,
		            end: 35
		          }
		        ],
		        series: [
		          {
		            name: "浏览量",
		            type: "line",
		            stack: "总量",
		            symbol: "circle",
		            symbolSize: 10,
		            itemStyle: {
		              normal: {
		                color: "#F65D31",
		                lineStyle: {
		                  color: "#F65D31",
		                  width: 1
		                },
		                barBorderRadius: 0,
		                label: {
		                  show: true,
		                  position: "top",
		                  formatter: function(p) {
		                    return p.value > 0 ? p.value : "";
		                  }
		                },
		                areaStyle: {
		                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
		                    {
		                      offset: 0,
		                      color: "rgba(7,44,90,0)"
		                    },
		                    {
		                      offset: 1,
		                      color: "rgba(114,144,89,0)"
		                    }
		                  ])
		                }
		              }
		            },
		            data: this.NumberDara
		          }
		        ]
		      });
		    },
		  }
		};
		</script>