Echarts自动刷新数据

// 1实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
// 柱状图模块1
(function() {

  // 2. 指定配置项和数据
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    // 修改图表的大小
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          "旅游行业",
          "教育培训",
          "游戏行业",
          "医疗行业",
          "电商行业",
          "社交行业",
          "金融行业"
        ],
        axisTick: {
          alignWithLabel: true
        },
        // 修改刻度标签 相关样式
        axisLabel: {
          color: "rgba(255,255,255,.6) ",
          fontSize: "12"
        },
        // 不显示x坐标轴的样式
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        // 修改刻度标签 相关样式
        axisLabel: {
          color: "rgba(255,255,255,.6) ",
          fontSize: 12
        },
        // y轴的线条改为了 2像素
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 2
          }
        },
        // y轴分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: [200, 300, 300, 900, 1500, 1200, 600],
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      },
       {
        name: "直接访问2",
        type: "bar",
        barWidth: "35%",
        data: [200, 300, 300, 900, 1500, 1200, 600],
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  };
  // 3. 把配置项给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

//3s请求刷新一次数据
window.setInterval(function () {

    //声明一个方法使用jQuery的ajax方法发送异步请求
    $.ajax({
        url:"http://127.0.0.1:8000/test_outside_interface", //请求路径
//        data:"username=lucy", //请求参数
        type:"get", //请求方式
//         dataType: 'jsonp',  // 请求方式为jsonp
//         crossDomain: true,
        success:function (data) {
           alert(data);
           refreshData(data);
        }, //请求成功时候的回调函数
        error:function () {
          alert("fail")
        } //请求失败时候的回调函数
    });

},3000);

function refreshData(data){
     if(!myChart){
          return;
     }

     //更新数据
      var option = myChart.getOption();
      option.series[0].data = data;
      myChart.setOption(option);
}

定时刷新参考：

Echarts自动刷新数据_喵学长的博客-CSDN博客_echarts refresh