前端ECharts框架绘制各种图形

霸姨

 关注

阅读 72

2022-05-23

ECharts 是一个开源的来自百度前端数据可视化团队,使用 JavaScript 实现的开源可视化库,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,涵盖各行业图表,满足各种需求。

实现简单折线图: 首先我们来实现一个简单的单折现图.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>

<!--绘图区域-->
<div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">

<script type="text/javascript" charset="UTF-8">
    var display = function(time,cpu){
        var myChart_cpu = echarts.init(document.getElementById('main'));
    myChart_cpu.setOption({
        title: {

            text: '监控'
        },
        tooltip: {},
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: 'cpu',
            type: 'line',
            data: []
        }]
    });
    // 下方就是给指定字段填充数据
    myChart_cpu.setOption({
        xAxis: {
            data: time
        },
        series: [{
            name: 'cpu',
            data: cpu
        }]
        });
    };
    // 首次显示加载动画
    myChart_cpu.showLoading();
</script>
    <!-- 传入参数调用 -->
    <script type="text/javascript" charset="UTF-8">
        var time = ["12:10","12:11","12:12","12:13","12:13","12:13"]
        var mem = [10,20,30,40,10,2]
        display(time,mem)
    </script>
</body>
</html>

当我们需要增加颜色时,可以直接使用下面的这段绘图方法,绘制的图形会增加颜色区域.

<script type="text/javascript" charset="UTF-8">
    var display = function(time,cpu){
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        xAxis:{
            type:"category",
            boundaryGap:false,
            data:[]
        },
        yAxis:{
            type:"value"
        },
        series:[{
            data:[],
            type:"line",
            areaStyle:{}
        }]
    });
    myChart.setOption({
        xAxis: {
                data: time
            },
        series: [{
                data: cpu
            }]
        });
    };
    myChart.showLoading();
</script>

如果需要绘制曲线,而非折线可以使用下面这种绘制方式.

<script type="text/javascript" charset="UTF-8">
    var display = function(time,cpu){
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        xAxis:{
            type:"category",
            data:[]
        },
        yAxis:{
            type:"value"
        },
        series:[{
            data:[],
            type:"line",
            smooth:true
        }]
    });
    myChart.setOption({
        xAxis: {
                data: time
            },
        series: [{
                data: cpu
            }]
        });
    };
    myChart.showLoading();
</script>

实现多折线绘图: 多折现则是在一张图中绘制多条折线,并且可以增加注释效果,代码如下.

<script type="text/javascript" charset="UTF-8">
    var display = function(time,load_5,load_10){
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        xAxis: {
            type: 'category',
            boundaryGap: false,
        },
        xAxis: {
                data: time
            },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type:'line',
                stack: '总量',
                data:load_5
            },
            {
                type:'line',
                stack: '总量',
                data:load_10
            }
        ]
        });
    };
    myChart.showLoading();
</script>
<script type="text/javascript" charset="UTF-8">
    var time = ["12:10","12:11","12:12","12:13","12:14"]
    var load_5 =  [10,5,25,10,2]
    var load_10 = [24,37,15,18,9]
    display(time,load_5,load_10)
</script>

有时双折线无法满足我们需求,此时可以使用三折线来展示,如下代码.

<script type="text/javascript" charset="UTF-8">
  var echo =echarts.init(document.getElementById("main"));
  var option = {
      title: {
          left: 'left',
          text: 'CPU',
      },
      // tooltip 鼠标放上去之后会自动出现坐标
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#6a7985'
              }
          }
      },
      // toolbox = 菜单栏中的各种小功能
      toolbox: {
          feature: {
              dataZoom: {
                  yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
          }
      },
      legend: {
          data: ['CPU利用率', '1分钟负载', '5分钟负载', '15分钟负载']
      },

      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          name: "CPU利用率",
          stack: "总量",
          data: [10, 54, 87, 66, 54, 88, 95],
          type: 'line'
      },
      {
          name: "1分钟负载",
          stack: "总量",
          data: [10, 25, 99, 87, 54, 66, 2],
          type: 'line'
      },
      {
          name: "5分钟负载",
          stack: "总量",
          data: [89, 57, 85, 44, 25, 4, 54],
          type: 'line'
      },
      {
          name: "15分钟负载",
          stack: "总量",
          data: [1, 43, 2, 12, 5, 4, 7],
          type: 'line'
      }
      ]
  };
  echo.setOption(option,true);
</script>

绘制简单柱状图: 先来绘制一个简单的柱状图.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>

<!--绘图区域-->
<div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
<script type="text/javascript" charset="UTF-8">
    var display = function(time,cpu)
    {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {},
            legend: {
                data:['']
            },
            xAxis: {
                data: time
            },
            yAxis: {},
            series: [{
                name: '利用率',
                type: 'bar',
                data: cpu
            }]
        };
        myChart.setOption(option);
    };
</script>

    <script type="text/javascript" charset="UTF-8">
        var time = ["12:10","12:11","12:12","12:13","12:13","12:13"]
        var mem = [10,20,30,40,10,2]
        display(time,mem)
    </script>
</body>
</html>

为柱状图增加背景色，让其更加美观，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>

<!--绘图区域-->
<div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">

<script type="text/javascript" charset="UTF-8">
    var display = function(time,cpu)
    {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {},
            legend: {
                data:['']
            },
            xAxis: {
                type: 'category',
                data: time
            },
            yAxis: { type:'value'},
            series: [{
                data: cpu,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }]
        };
        myChart.setOption(option);
    };
</script>
    <script type="text/javascript" charset="UTF-8">
        var time = ["12:10","12:11","12:12","12:13","12:13","12:13"]
        var mem = [10,20,30,40,10,2]
        display(time,mem)
    </script>
</body>
</html>

绘制数据集: 数据集条形图是两个图和三个图组合的形式，如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>

<!--绘图区域-->
<div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
<script type="text/javascript" charset="UTF-8">
    var display = function()
    {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '一分钟负载', '五分钟负载', '十分钟负载'],
                    ['192.168.1.1', 43.3, 85.8, 93.7],
                    ['192.168.1.2', 83.1, 73.4, 55.1],
                    ['192.168.1.3', 86.4, 65.2, 82.5]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        myChart.setOption(option);
    };
</script>
    <script type="text/javascript" charset="UTF-8">
        display()
    </script>
</body>
</html>

绘制横向条形图: 横向条形图也是最常用的图形，如下代码已封装好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>

<!--绘图区域-->
<div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
<script type="text/javascript" charset="UTF-8">
    var display = function(header,data_mem_free,data_mem_swap)
    {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {


                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['主内存', '虚拟内存']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: header
                },
                series: [
                    {
                        name: '主内存',
                        type: 'bar',
                        data: data_mem_free
                    },
                    {
                        name: '虚拟内存',
                        type: 'bar',
                        data: data_mem_swap
                    }
                ]
        };
        myChart.setOption(option);
    };
</script>
    <script type="text/javascript" charset="UTF-8">
        var address = ["192.168.1.1","192.168.1.2","192.168.1.3"];
        var bar_a = [12,55,78];
        var bar_b = [55,89,33];
        display(address,bar_a,bar_b);
    </script>
</body>
</html>

简单绘制饼状图: 饼状图的绘制与前面的方法大体一致，绘制代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
<script type="text/javascript" charset="UTF-8">
    var display = function(dict)
    {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
                title: {
                    text: '运维系统版本',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: dict,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
        };
        myChart.setOption(option);
    };
</script>

    <script type="text/javascript" charset="UTF-8">
        var dict = [{value: 1048, name: 'Windows'},{value: 735, name: 'Linux'},{value: 580, name: 'AIX'}];
        display(dict);
    </script>
</body>
</html>

饼状图还有第二种方式，就是将中间掏空，实现的环形饼图，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
<script type="text/javascript" charset="UTF-8">
    var display = function(dict)
    {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: dict
                    }
                ]
        };
        myChart.setOption(option);
    };
</script>

    <script type="text/javascript" charset="UTF-8">
        var dict = [{value: 1048, name: 'Windows'},{value: 735, name: 'Linux'},{value: 580, name: 'AIX'}];
        display(dict);
    </script>
</body>
</html>

绘制仪表盘: 仪表盘与饼图类似，其绘制方式与饼图相同，唯一区别是仪表盘只有一个百分比参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:450px;border:1px solid #dddddd;float: left;margin-top: 10px;">
<script type="text/javascript" charset="UTF-8">
    var display = function(speed)
    {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            series: [{
                type: 'gauge',
                progress: {
                    show: true,
                    width: 18
                },
                axisLine: {
                    lineStyle: {
                        width: 18
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 15,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 25,
                    color: '#999',
                    fontSize: 20
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                        borderWidth: 10
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 80,
                    offsetCenter: [0,'70%']
                },
                data: [{
                    value: speed
                }]
            }]
        };
        myChart.setOption(option);
    };
</script>
    <script type="text/javascript" charset="UTF-8">
        var speed = 85;
        display(speed);
    </script>
</body>
</html>

最后就是将多个仪表盘合并在一个图形框架中，实现多图形聚合，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>

 <!-- cpu使用率 -->
 <div id="main_cpu" style="width: 32%;height:350px;border:1px solid #dddddd;float: left;margin-right: 8px;"></div>
 <!-- 系统内存 -->
 <div id="main_memory" style="width: 32%;height:350px;border:1px solid #dddddd;float: left;margin-right: 8px;"></div>
 <!-- 磁盘信息 -->
 <div id="main_fssize" style="width: 32%;height:350px;border:1px solid #dddddd;float: left;margin-right: 8px;"></div>

<script>
    var myChart_cpuutils = echarts.init(document.getElementById('main_cpu'));
        option_cpuutils = {
            series: [
                {
                    name: 'CPU利用率',
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    data: [{value: [12], name: 'CPU使用率'}]
                }
            ]
        };
        myChart_cpuutils.showLoading();
        setInterval(function () {
            myChart_cpuutils.hideLoading();
            myChart_cpuutils.setOption(option_cpuutils, true);
        },2000);
</script>
<script>
     var myChart_fssize = echarts.init(document.getElementById('main_fssize'));
            option_fssize = {
                series : [
                    {
                        name: '磁盘情况',
                        type: 'pie',
                        radius: '80%',
                        roseType: 'angle',
                        detail: {formatter:'{value}'},
                        data:[
                            {value: 20, name:'磁盘用量'},
                            {value: 80, name:'磁盘空闲'}

                        ]
                    }
                ]
            };
            myChart_fssize.showLoading();
            setInterval(function () {
                myChart_fssize.hideLoading();
                myChart_fssize.setOption(option_fssize, true);
            },2000);
</script>
<script>
    var myChart_memory = echarts.init(document.getElementById('main_memory'));
        option_memory = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series : [
            {
                type: 'pie',
                radius : '80%',
                center: ['50%', '50%'],
                data:[
                    {value:100, name:'已用'},
                    {value:800, name:'剩余'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart_memory.showLoading();
    setInterval(function () {
        myChart_memory.hideLoading();
        myChart_memory.setOption(option_memory, true);
    },2000);
</script>
</body>
</html>

版权声明：本博客文章与代码均为学习时整理的笔记，文章 [均为原创] 作品，转载请 [添加出处] ，您添加出处是我创作的动力！





相关推荐

Flask 框架：运用Echarts绘制图形

陈情雅雅 223 0 0

iOS 中各种图形的绘制

何以至千里 107 0 0

栏目一：使用echarts绘制简单图形

罗蓁蓁 21 0 0

python-opencv在图片中绘制各种图形

源码之路 39 0 0

【前端图表框架echarts】echarts小案例实现

小迁不秃头 106 0 0

前端echarts图形报表常见的样式配置

八卦城的酒 16 0 0

java JFreeChart 绘制各种图形 并使用itextPdf生成PDF导出

东林梁 20 0 0

echarts绘制甘特图

生命中最美的是成长 76 0 0

Matplotlib图形绘制

梦想家们 131 0 0

Matlab图形绘制

沪钢木子 134 0 0

精彩评论（0）

0 0 举报