在自己捣鼓的 Task 应用中需要使用 图形化 Echarts 用来 展示 数据

网上也找了很久。最后 想到了一个 简单粗暴的方式来显示图形数据

演示地址：

https://task.baota.host/tuxing/1.php

使用中的源代码

<div  id="tiwen"  style="width:98%;height:250;"></div>
  <script src="js/vendor-all.min.js"></script>
<script src="js/echarts-en.min.js"></script>
  <script type="text/javascript">
    $(function () {
        tiwen();
        function tiwen() {
            var myChart = echarts.init(document.getElementById('tiwen'));
            option = {
              title:{
             text:'103.45.69.117 延时实时数据统计演示 '
            },
            grid:{
              x:35,
              y:35,
              x2:25,
              y2:40,
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: [],
              axisLabel: {
                margin: 10,
                color: '#777',
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(107,107,107,1)',
                }
              },
            },
            yAxis: {
              type: 'value',
              splitNumber: 2,
              scale:true,
              maxInterval: 5000,
              axisLabel: {
                color: '#555',
                margin: 6
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(107,107,107,0.2)',
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(131,101,101,0.3)'
                }
              },
            },
            series: [{
              name: '当前延时',
              data: [],
              type: 'line',
              lineStyle: {
                normal: {
                  width: 2,
                  color: {
                    type: 'linear',
                    colorStops: [{
                      offset: 0,
                                color: '#48D8BF' // 0% 处的颜色
                              }, {
                                offset: 1,
                                color: '#48D8BF' // 100% 处的颜色
                              }],
                            globalCoord: false // 缺省为 false
                          }
                        }
                      },
                      itemStyle: {
                        normal: {
                          color: '#48D8BF',
                          borderColor: "#5b92c9"
                        }
                      },
                      smooth: true
                    }]
                  };
            myChart.setOption(option);
            window.addEventListener("resize",function(){
              myChart.resize();
            });
            function getVirtualStatus() {
            $.get("shuju").done(function (data) {

              if (data.code == 200) {
                var createdate = data.createdate
                var tiwen = data.tiwen
              }else{
                var createdate = ‘’

                var tiwen =‘’
            }
              myChart.setOption({
                xAxis: {
                  data: createdate
                },
                series: [{
                    
                  data: tiwen
                }]
              });
            });
            }
    getVirtualStatus();
    setInterval(getVirtualStatus,2000);
        }
    })
</script>