柱状图+折线动态切换

制作柱状图+折线实现动态效果

效果图如下： 首先在有数中创建一个javascript图表： 将下列代码复制到有数中，并选择ECharts-V5 引擎： 复制代码如下：

dataSet=dataSet.map((data,i)=>dataSet.map(d=>d[i]));
var dataX=dataSet[0];
var dataY1=dataSet[1];
var dataY2=dataSet[2];
let category = [];
let lineData = [];
let barData = [];
var j=8;
var k=0;
for (let i = 0; i < 8; i++) {
  category.push(dataX[i]);
  barData.push(dataY1[i]);
  lineData.push(dataY2[i]);
}
option = {
    title: {
    text: 'Steam 各游戏玩家充值玩家对比',
    padding:[2,0,0,12],
    textStyle:{
        color:'#ffffff'
    },
    },
  backgroundColor: '#222831',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['充值人数', '下载人数'],
    textStyle: {
      color: '#ffffff'
    }
  },
  xAxis: {
     type:'category',
    data: category,
    axisLine: {
      lineStyle: {
        color: '#ffffff'
      }
    }
  },
  yAxis: {
     type: 'value',
     name:'人数',
      min: 0,
      max: 5000,
      position: 'left',
      splitLine: { show: false },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ffffff'
        }
      },
  },
  series: [
    {
      name: '充值人数',
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 15,
      color:'#00adb5',
      data: lineData,
      label:{
          show : true,
          color:"#ffffff",
          position:"left"
      }
    },
    {
      name: '下载人数',
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#00adb5' },
          { offset: 1, color: '#eeeeee' },
        ])
      },
      label:{
          show : true,
          position :'top',
          color:"#ffffff"
      },
      data: barData
    }
  ]
};
setInterval(function(){
  category=[];
  barData=[];
  lineData=[];
for (let i = 0; i < 8; i++) {
    if(j==87){
        j=8
    }else{
  category.push(dataX[j]);
  barData.push(dataY1[j]);
  lineData.push(dataY2[j]);
  j=j+1;
    }
};
myChart.setOption({
  xAxis: [
      {
        data: category
      }
    ],
    series: [
      {
        data: lineData
      },
      {
        data: barData
      }
    ]
})
},5000);
option && myChart.setOption(option);