Echarts在线免费图表

 
            const pData = {
    '北京':0 ,
    '上海':0,
    '广东':0,
    '江苏':0,
    '湖北':0,
    '湖南':0,
    '天津':0,
    '重庆':0,
    '浙江':0,
    '福建':0
  }

  setInterval(function(){
    const num = parseInt( Math.random()*20 )
    const arr = Object.keys(pData)
    const index = parseInt( Math.random()*arr.length )
    pData[arr[index]]+=num
    option.yAxis.data = Object.keys(pData)
    option.series[0].data = Object.values(pData)
    myChart.setOption(option, true);

  }, 1000);

option = {
    backgroundColor:'#222',
    xAxis: {
      max: 'dataMax',
      axisLine:{
        lineStyle:{
          color:'#4790ea'
        }
      },
      // x轴的分割线
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      data: Object.keys(pData),
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      axisLine:{
        lineStyle:{
          color:'#4790ea'
        }
      },
      // max: 2 // only the largest 3 bars will be displayed
    },
    series: [
      {
        realtimeSort: true,
        name: '全国实时旅游人数',
        type: 'bar',
        data: Object.values(pData),
        label: {
          show: true,
          position: 'right',
          valueAnimation: true,
          color:'#fff'
        },
        barWidth: 20,
        itemStyle: {
          borderRadius: [0, 10, 10, 0],
          color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
            {
              offset: 0,
              color: '#f72f48'
            },
            {
              offset: 0.5,
              color: '#f44279'
            },
            {
              offset: 1,
              color: '#8815f9'
            }
          ])
        }
      }
    ],
    legend: {
      show: true,
      textStyle: {
        color: '#fff'
      }
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  }