169天前2019-06-28 09:19:57 |    抢沙发  365 
本文介绍如何使用echarts插件来绘制二维折线图并在tooltip中显示额外的其他信息,异步主要通过jquery的get来实现,从后台请求数据,然后对视图进行绘制。tooltip显示额外信息主要是通过数据类型来实现的,具体操作请看全文。

echarts

这里我就直接上代码了:

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>监控</title>
<!-- 引入 ECharts 文件 -->
<script src="/js/echarts/echarts.min.js"></script>
<script src="/js/jquery.min.js-v=2.1.4.js" ></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
//显示标题,图例和空的坐标轴
var option = {
    //设置标题
    title: {
        text: "CPU/内存百分比",
        padding:[2,0,0,70]
    },

    //设置顶部图列说明
    legend: {
        data:["CPU","内存"]
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
    },
    //设置工具栏
    toolbox: {
        feature: {
            //下载图标
            saveAsImage: {}
        }
    },
    //设置X轴内容
    xAxis: {
        //设置类型曲线
        type: "category",
        boundaryGap: false,
        data:[]
    },
    //设置y轴
    yAxis: {
        type: "value",
        name:"百分比",
        nameLocation:"center",
        nameGap:40,
        min:0,
        max:100,
        interval:10,
        silent:true,
        axisLabel: {
            show: "true",
            interval: "auto",
            formatter: "{value}%"
            },
        show: "true"
      },
    //设置缩放条
    dataZoom: [
        {
            //设置可鼠标拉动
            type: "slider",
            //设置开始百分比
            start: "0",
            //设置结束百分比
            end: "100"
        },
        {
            //设置可鼠标滚轮可用在图标中和进行缩放
            type: "inside",
            start: "0",
            end: "100"
        }
    ],
    //设置图标中的数据
    "series": [
        {
            "name":"CPU",
            "type":"line",
            "stack": "%",
            "data":'.$cpu.'
        },
        {
            "name":"内存",
            "type":"line",
            "stack": "%",
            "data":'.$memory.'
        }
    ]
};
myChart.setOption(option,true);



  // 异步加载数据
  $.get("https://www.32e.top").done(function (data) {
  var option = {
      title: {
          text: "CPU/内存百分比",
          padding:[2,0,0,70]
      },
      tooltip: {
          trigger: 'axis',
          formatter: function (params, ticket, callback) {
            var htmlStr = '';
            for(var i=0;i<params.length;i++){
              var param = params[i];
              var xName = param.name;//x轴的名称
              var seriesName = param.seriesName;//图例名称
              var value = param.value;//y轴值
              var color = param.color;//图例颜色

              if(i===0){
                htmlStr += xName + '<br/>';//x轴的名称
              }
              htmlStr +='<div>';

              // 具体显示的数据【字段名称:seriesName,值:value】
              // 这里判断一下name,如果是我们需要特殊处理的,就处理
              if(seriesName === '进程Top 10'){
                  // 前面一条线,后面一条线【具体样式自己写】
                  htmlStr += '<div style="border: 1px solid #FFEB3B"></div>';
                  htmlStr += seriesName +':<br />' + value;

              }else{
                  // 正常显示的数据,走默认
                  htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
                  htmlStr += seriesName + ':' + value + '%';
              }

              htmlStr += '</div>';
            }
            return htmlStr;
           }
      },
      legend: {
          data:["CPU","内存"]
      },
      grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: "true"
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      xAxis: {
              data: data.map(function (item) {
                  return item[0];
              })
      },
      yAxis: {
        type: "value",
        name:"百分比",
        nameLocation:"center",
        nameGap:40,
        min:0,
        max:100,
        interval:10,
        silent:true,
        axisLabel: {
            show: "true",
            interval: "auto",
            formatter: "{value}%"
            },
        show: "true"
      },
      dataZoom: [
          {
              type: "slider"
          },
          {
              type: "inside"
          }
      ],
      series: [
        {
            name:"CPU",
            type:"line",
            data:data.map(function (item) {
                  return item[1];
              }),
        },
        {
            name:"内存",
            type:"line",
            data:data.map(function (item) {
                  return item[2];
              })
        },
        {
            name:"进程Top 10",
            type:"line",
            data:data.map(function (item) {
                  return item[3];
              })
        },
    ]
  }
      // 填入数据
      myChart.setOption(option,true);
  });
</script>
</body>
</html>
代码里面基本都有注释所以不用解释太多,上面我进行了两次填入数据,第一次是为了先把坐标画好,第二次是从后台请求数据以后再吧数据填充以后再重绘。可以达到比较顺滑的目的。对了说一下,后台返回的是json数据类似:[[1,2,3],[1,2,3],[1,2,3]]

好了教程就到此为止。先忙其他的去了。

发表评论

暂无评论

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享