Echarts在线免费图表

 
            
let colors = [
   '#64bfff',
   '#64bfff',
   '#E9BA28'
]
let chartTimer = null;
let timesituationData = {
   value: {
      xdata: ['10/1', '10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8'],
      bar: [100, 200, 300, 100, 220, 123, 321, 542],
      line: [100, 200, 300, 100, 220, 123, 321, 542].map((v) => v * 1.2)
   }
}
let xdata = timesituationData.value.xdata ?? [];
let bardata = (timesituationData.value.bar ?? []).map((v) => {
   return {
      value: v
   }
})
let linedata = timesituationData.value.line ?? [];
let option = {
   color: colors,
   backgroundColor:"#fff",
   legend: {
      top: '2%',
      left: 'center',
      textStyle: {
         color: "#333",
      },
      selectedMode: false,     //禁止鼠标交互
      data: [
         { name: '近日实时' },
         { name: '上个工作日参考值' },
      ]
   },
   series: [
      {
         type: 'bar',
         barWidth: '35%',
         itemStyle: {
            opacity: 0,
            borderRadius:[0,4,4,0]
         },
         tooltip: {
            show: false,
         },
         id: 'barWidth1',
         yAxisIndex: 1,    //!!
         data: bardata,
      },
      {
         type: 'bar',
         name: '近日实时',
         barWidth: '25%',
         data: bardata,
         id: 'data',
         itemStyle:{borderRadius:[0,3,3,0]}
      },
      {
         type: 'line',
         name: '上个工作日参考值',
         smooth: true,
         lineStyle: {
            type: 'dashed',
         },
         symbolSize: 11,
         z: 100,
         data: linedata,
      }
   ],
   tooltip: {
      trigger: 'axis',
      triggerOn: 'none',    //禁止鼠标悬浮和鼠标点击显示tooltip
      backgroundColor: '#081429',
      textStyle: {
         color: '#fff',
      },
      borderColor: "rgba(255,255,255,.2)",
      axisPointer: {
         lineStyle: {
            color: "rgba(125,125,125,.5)"
         },
      }
   },
   xAxis: {
      type: 'value',
      axisLabel: {
         show: true,
         margin: 14,
         fontSize: 20,
         color: '#849DCB'
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: '#396FA6',
            opacity: 1
         }
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
   },
   yAxis: [
      {
         type: 'category',
         inverse: true,
         data: xdata,
         axisLabel: {
            show: true,
            fontSize: 20,
            color: '#333',
            margin: 14,
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: '#396FA6',
               opacity: .3
            }
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },
      {
         type: 'category',
         show: false,
         inverse: true,
         data: xdata,
      }
   ],
   grid: {
      left: '5%',
      top: '4%',
      bottom: '5%',
      right: '5%',
      containLabel: true,
   }
}
myChart.setOption(option);
let bu = 0;
let len = timesituationData.value.xdata.length - 1;
clearInterval(chartTimer);
chartTimer = setInterval(() => {
   if (bu > len) {
      bu = 0
   }
   myChart.dispatchAction(
      {
         type: 'showTip',//默认显示江苏的提示框
         seriesIndex: 0,//这行不能省
         dataIndex: bu
      },
   );
   let acdata = JSON.parse(JSON.stringify(bardata));
   acdata[bu].itemStyle = {
      opacity: 1
   }
   let cbarData = JSON.parse(JSON.stringify(bardata))
   cbarData[bu].itemStyle = { opacity: 0 }
   myChart.setOption({
      series: [
         { id: 'barWidth1', data: acdata },
         { id: 'data', data: cbarData },
      ]
   })
   bu++
}, 1000)