Echarts在线免费图表

 
            let colorList = [
  "#f36c6c",
  "#e6cf4e",
  "#20d180",
  "#0093ff",
  "#f36c6c",
  "#e6cf4e",
  "#20d180",
  "#0093ff"
];

let allData = [
  {
    name: "杭州市",
    count: 100,
    percent: 0.182
  },
  {
    name: "宁波市",
    count: 366,

    percent: 0.22
  },

  {
    name: "温州市",

    count: 733,

    percent: 0.452
  },

  {
    name: "湖州市",

    count: 287,

    percent: 0.229
  },

  {
    name: "丽水市",

    count: 89,

    percent: 0.082
  },

  {
    name: "舟山市",

    count: 25,

    percent: 0.112
  },
   {
    name: "丽水市2",

    count: 89,

    percent: 0.082
  },

  {
    name: "舟山市2",

    count: 25,

    percent: 0.112
  }
];

option = {
	  tooltip: {
	    trigger: "axis",
	
	    axisPointer: {
	      type: "shadow"
	    }
	  },
	
	  legend: {
	    show: false
	  },
	
	  grid: {
	    left: 100
	  },
	  // 加这块地方重点！！！！！！！
      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: false
	    },
	
	    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: {
	        textStyle: {
	          color: "#000",
	          // fontSize: "10"
	          align:'left'
	        }
	      },
	      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: colorList[i]
	          };
	          return {
	            value: item,
	            itemStyle: itemStyle
	          };
	        }),
	      label: {
	        normal: {
	          show: true,
	          position: "right",
	          color: "#333333",
	          fontSize: 14,
	          formatter: function(value) {
	            let val = (value && value.data && value.data.value) || 0;
	            return parseFloat(val * 100).toFixed(2) + "%";
	          }
	        }
	      }
	    }
	  ]
};

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()
 }