echarts与tp5.1（柱状图）

**简介：**利用echarts和tp5.1将数据以柱状图的形式展示。
div部分：

<div id="chart1" style="height: 280px;"></div>

JS部分：

 var myChart = echarts.init(document.getElementById('chart1'));
        var arr1=[],arr2=[];  
        function arrTest(){
            $.ajax({
                type:"post",
                async:false,
                url:"控制器/方法",
                data:{},
                dataType:"json",
                success:function(result){
                    if (result) {
                        for (var i = 0; i < result.length; i++) {
                            arr1.push(result[i].x值);
                            arr2.push(result[i].y值);
                        }
                    }
                }
            })
            return arr1,arr2;
        }
        arrTest();
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '统计',
                textAlign: 'left',
                textStyle: {
                    color: "#0396FF",
                    fontSize: "16",
                    fontWeight: "bold"
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line'|'shadow'
                }
            },
            toolbox: {
                orient:'horizontal',
                right:'5',
                feature: {
                    saveAsImage: {show: true},   //保存为图片
                    magicType: {
                        show: true,
                        type: ['line','bar']
                    },
                    restore: {show: true},
                    dataView: {show: true, readOnly: true},
                },
                //右上角三个功能图标
                iconStyle: {
                    color: '#009688',
                    borderColor: '#009688',
                    borderWidth: 1,
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                containLabel: true  //grid区域是否包含坐标轴的刻度标签
            },
            legend: {
                data:['金额']
            },
            xAxis: {
                type:'category',
                data:arr1,
                "axisLine": {
                    lineStyle: {
                        color: '#009688'
                    }
                },
                axisLabel: {
                    interval:0,
                    textStyle: {
                        color: '#009688'
                    },
                    formatter:function(value)
                    {
                        return value.split("").join("\n");
                    }
                }
            },
            yAxis: {
                type: 'value',
                "axisLine": {
                    lineStyle: {
                        color: '#009688'
                    }
                },
                axisLabel: {
                    formatter: '{value}',
                    lineStyle: {
                        color: '#009688'
                    }
                },
            },
            //内容数据
            series: [
                {
                name: 'a',
                tooltip: {
                    show: false
                },
                type: 'bar',
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#0B4EC3" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#138CEB" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#17AAFE" // 100% 处的颜色
                        }], false)
                    }
                },
                data: arr2,
                barGap: 0
            }, {
                type: 'bar',
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#09337C" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#0761C0" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#0575DE" // 100% 处的颜色
                        }], false)
                    }
                },
                barGap: 0,
                data: arr2
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#0571D5',
                    color: '#1779E0'
                },
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['0', '0'],
                symbolOffset: ['0', '-11'],
                //symbolRotate: -5,
                symbolPosition: 'end',
                data: arr2,
                z: 3,
                markPoint: {    //打点（最大值与最小值）
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {    //打线（平均值）
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                },
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

后台部分：

public function fangfa(){
        $qq=db('数据表')->field('限制字段')->order('按序查询结果')->select();
        for($i=0;$i<count($qq);$i++){
            $qq1[$i]['x值']=$qq[$i]['x值'];
            $qq1[$i]['y值']=$qq[$i]['y值'];
        }
        $qqq_json=json_encode($qq1);
        echo $qqq_json;
    }

效果图：