Echarts在线免费图表

 
            let allData = [
  {
    name: "杭州市",
    count: 100,
    percent: 182
  },
  {
    name: "宁波市",
    count: 366,
    percent: 322
  },
  {
    name: "温州市",
    count: 733,
    percent: 452
  },
  {
    name: "湖州市",
    count: 287,
    percent: 229
  },
  {
    name: "丽水市",
    count: 89,
    percent: 82
  },
  {
    name: "舟山市",
    count: 95,
    percent: 112
  },
   {
    name: "丽水2",
    count: 89,
    percent: 82
  },
  {
    name: "舟山2",
    count: 55,
    percent: 112
  }
];

option = {
	  tooltip: {
	    trigger: "axis",
	    axisPointer: {
	      type: "shadow"
	    }
	  },
	  legend: {
	    show: false
	  },

	  grid: {
	    left: '13%',
       bottom: '6%',
	  },
	  // 加这块地方重点！！！！！！！
      dataZoom: [
          //滑动条
          {
            yAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4, // 一次性展示5个。
          },
        ],
	  xAxis: {
	    type: "value",
	    splitLine: {
	      show: false
	    },
	    axisLabel: {
	      show: true
	    },
	    axisTick: {
	      show: false
	    },
	    axisLine: {
	      show: false
	    }
	  },
	
	  yAxis: [
	    {
	      type: "category",
	      inverse: true,
	      axisLine: {
	        show: false
	      },
	      axisTick: {
	        show: false
	      },
	      axisPointer: {
	        label: {
	          show: true
	        }
	      },
	
	      data: allData.map(item => item.name),
	      axisLabel: {
	        margin: 20,
	        fontSize: 14,
	        color: "#333"
	      }
	    },
	    {
	      type: "category",
	      inverse: true,
	      axisTick: "none",
	      axisLine: "none",
	      offset: -10,
	      zlevel: 100,
	      show: true,
	      position: "left",
	      axisLabel: {
			  show:false,
	      },
	      data: allData.map(item => item.count)
	    }
	  ],
	  series: [
	    {
	      z: 2,
	      name: "value",
	      type: "bar",
	      align: "left",
	    //   barCategoryGap: '50%',
	      data: allData
	        .map(item => item.percent)
	        .map((item, i) => {
	          itemStyle = {
	            color: "#20f1b0"
	          };
	          return {
	            value: item,
	            itemStyle: itemStyle
	          };
	        }),
	      label: {
	        normal: {
	          show: true,
	          position: "right",
	          color: "#333333",
	          fontSize: 12,
	          formatter: function(value) {
	            let val = (value && value.data && value.data.value) || 0;
	            return parseFloat(val);
	          }
	        }
	      }
	    },
		{
	      z: 2,
	      name: "value",
	      type: "bar",
	      align: "left",
	      barCategoryGap: '60%',
	      data: allData
	        .map(item => item.count)
	        .map((item, i) => {
	          itemStyle = {
	            color: "#e6cf4e"
	          };
	          return {
	            value: item,
	            itemStyle: itemStyle
	          };
	        }),
	      label: {
	        normal: {
	          show: true,
	          position: "right",
	          color: "#333333",
	          fontSize: 12,
	          formatter: function(value) {
	            let val = (value && value.data && value.data.value) || 0;
	            return parseFloat(val);
	          }
	        }
	      }
	    }
	  ]
};

autoMove()

function autoMove () {
   // 自动滚动：
	timeOut=setInterval(()=>{
	      if (option.dataZoom[0].endValue == allData.length ) {
	        option.dataZoom[0].endValue = 4;
	        option.dataZoom[0].startValue = 0;
	      } else {
	        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
	        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
	      }
	      myChart.setOption(option);
	      myChart.on('mouseover',stop)
          myChart.on('mouseout',goMove)
	 },2000)
}
 //停止滚动
 function stop(){
   clearInterval(timeOut)
 }
 //继续滚动
function goMove(){
    autoMove()
 }