**简介：**利用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;}

效果图：