echarts与tp5.1（柱状图）

﹏ヽ暗。殇╰゛Y 2023-10-05 13:20 39阅读 0赞

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

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201109094240529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1,size_16,color_FFFFFF,t_70#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts与tp5.1（柱状图）

\\简介：\\利用echarts和tp5.1将数据以柱状图的形式展示。 div部分： <div id="chart1" style="height: 280px;

﹏ヽ暗。殇╰゛Y/ 2023年10月05日 13:20/ 0 赞/ 40 阅读

相关 echarts 柱状图滚动

实现效果：柱形图展示水平滚动条，并且鼠标滚动支持让滚动条平移 ![6ef725868b7d4ae1937e080898079d3d.png][] echarts文档里，图形

Bertha 。/ 2023年09月23日 16:13/ 0 赞/ 195 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 315 阅读

相关 echarts 特殊柱状图

特殊规则柱状图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

﹏ヽ暗。殇╰゛Y/ 2022年11月27日 10:13/ 0 赞/ 253 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 659 阅读

相关 ECharts柱状图实例

ECharts柱状图实例 test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

古城微笑少年丶/ 2022年06月14日 04:23/ 0 赞/ 346 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 383 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 340 阅读

相关 echarts柱状统计图

目录一、简单的echarts柱状统计图二、柱状图和折线图混搭三、一个项目里同时用不同版本的echarts画图 -------------------- 一、

àì夳堔傛蜴生んèń/ 2022年01月30日 15:13/ 0 赞/ 750 阅读

相关 ECharts之柱状图

效果图 ![在这里插入图片描述][20190725104919483.gif] 背景图片 ![20190725170845879.png][] 下载EChar

旧城等待，/ 2021年09月29日 22:48/ 0 赞/ 852 阅读