php echars 多折线图

  1. 下载工具echars

    官方地址是github,为了方便使用,下面是网盘上的v5.4.1版本

    链接:https://pan.baidu.com/s/1ZlZaeTdMWHEMOQt9-13JoQ 

    提取码:n5vr

  2. 后端的逻辑处理

    public function getData()

        {

    //数据

        $avg = [

        ['name'=>'a1','type'=>'line','data' => [1418.3,1385.1,1705.4,1562.9]],

        ['name'=>'a2','type'=>'line','data' => [36.1,79.8,119.3,120.9]],

        ['name'=>'a3','type'=>'line','data' => [0,0,0,0]],

        ['name'=>'a4','type'=>'line','data' => [536,435,661,565]],

        ];

        //顶部

        $aname = ['a1','a2','a3','a4'];

        //x轴

        $atime = ['2023-01-01','2023-02-01','2023-03-01','2023-04-01'];

            return (['avg'  => $avg,'aname' => $aname,'atime' => $atime]

            );

    }

  3. 前端渲染,实现功能

    <html>

        <head>

            <meta charset="utf-8">

            <script src="/static/js/echarts.js"></script>

            <script src="/static/js/jquery.min.js"></script>

        </head>

        <body>

            <style>

                html, body {

                    width: 100%;

                    height: 100%;

                }

            </style>

            <div id="main"></div>

            <script>

    var data = '';

    $.ajax({

    url:"/getData",

    async:false,

    dataType:'json',

    type:'post',


    success:function(msg){

      data = msg;

    }

      });

                function makeChart () {

                    var main = document.getElementById('main');

                    var div = document.createElement('div');

                    var width = document.body.clientWidth;

                    div.style.cssText = width + 'px; height:400px';

                    main.appendChild(div);

                    return echarts.init(div);

                }


                function makeLine () {

                    var chart = makeChart();

    var atime= data.atime;

    var avg= data.avg;

    var aname = data.aname;

                    var option = {

                        tooltip : {

                            trigger: 'axis'

                        },

                        legend: {

                            data:aname

                        },

                        toolbox: {

                            top: 25,

                            feature: {

                                magicType: {

                                    type: ['line']

                                },

                                dataView: {},

                                restore: {},

                                saveAsImage: {

                                    pixelRatio: 2

                                },

                                myTool1: {

                                    show: true,

                                    title: 'Custom Icon. Reload Option',

                                    onclick: function (){

                                        chart.setOption(option);

                                        alert('chart.setOption(option) DONE!')

                                    }

                                }

                            }

                        },

                        xAxis : [

                            {

                                type : 'category',

                                data : atime

                            }

                        ],

                        yAxis : [

                            {

                                type : 'value'

                            }

                        ],

                        series : 

    data.avg

      

                    }


                    chart.setOption(option);

                }

       




               

    makeLine();

              

             

            </script>

        </body>

    </html>


改下路径基本可以直接跑,有问题欢迎留言交流

发表评论