Echarts在线免费图表

 
            option = {
   tooltip: {
      trigger: 'axis',
      formatter: '{a1}<br/>{b1}：{c1}℃'
   },
   legend: {
      data: ['温度']
   },
   xAxis: {
      data: ['青岛', '北京', '济南', '吉林', '南京', '武汉']
   },
   color: ['#ccc', 'red'],
   yAxis: {
      axisLabel: {
         formatter: '{value}℃'
      }

   },
   series: [
      // 流光效果
      {
         name: '',
         type: 'bar',
         barGap: '-100%',
         // 这里不要超出实际数据
         data: [5, 20, 36, 10, 10, 20],
         itemStyle: {
            // 颜色渐变
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: '#b1cae640'
               },
               {
                  offset: 1,
                  color: '#2f88e778'
               }
            ])
         }
      },
      // 背景，要显示的数据
      {
         name: '温度',
         type: 'bar',
         // 充当背景
         z: '-1',
         // 真实数据
         data: [5, 20, 36, 10, 10, 20],
         itemStyle: {
            color: '#14eca4'
         }
      }
   ]
};
/*
  先将流光数据变为 0，再将真实数据赋值给流光数据
  每次都执行 setOption 更新数据，实现动画效果
*/
function run1() {
   let length = option.series[0].data.length;
   let data = new Array(length).fill[0];
   let newD = { series: [{ data }] };
   myChart.setOption(newD);
}
function run2() {
   let data = [5, 20, 36, 10, 10, 20];
   let newD = { series: [{ data }] };
   myChart.setOption(newD);
}
setInterval(function () {
   run1();
}, 1000);
setInterval(function () {
   run2();
}, 1000);