iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >PHP+ECharts系列 - 柱状图(条形图)实例一
  • 717
分享到

PHP+ECharts系列 - 柱状图(条形图)实例一

2024-04-02 19:04:59 717人浏览 八月长安
摘要

<!DOCTYPE html><head>    <meta charset="utf-8">    <title>E

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

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

    <script src="Jquery.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->

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

   <script type="text/javascript">

              var  myChart = echarts.init(document.getElementById('main'));

              var arr1=[],arr2=[];

              function arrTest(){

                $.ajax({

                  type:"post",

                  async:false,

                  url:"echart.PHP",

                  data:{},

                  dataType:"JSON",

                  success:function(result){

                    if (result) {

                      for (var i = 0; i < result.length; i++) {

                          arr1.push(result[i].name);

                          arr2.push(result[i].sort);

                      }

                    }

                  }

                })

                return arr1,arr2;

              }

              arrTest();

              

              var  option = {

                    tooltip: {

                        show: true

                    },

                    legend: {

                       data:['sort']

                    },

                    xAxis : [

                        {

                            type : 'cateGory',

                            data : arr1

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value'

                        }

                    ],

                    series : [

                        {

                            "name":"sort",

                            "type":"bar",

                            "data":arr2

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            // }

    </script>

</body>







<?php

  $Mysql_server_name='localhost'; //改成自己的mysql数据库服务器

$mysql_username='root'; //改成自己的mysql数据库用户名

$mysql_passWord=''; //改成自己的mysql数据库密码,初始默认密码为空

$mysql_database='11111'; //改成自己的mysql数据库名

$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ;

mysql_query("set names 'utf8'"); //数据库输出编码

mysql_select_db($mysql_database); //打开数据库

$result = mysql_query("select * from brand");

$data="";

$array= array();

class User{

 public $name;

 public $sort;

}

while($row = mysql_fetch_array($result,MYSQL_ASSOC)){

 $user=new User();

 $user->name = $row['name'];

 $user->sort = $row['sort'];

 $array[]=$user;

}

$data=json_encode($array);

// echo "{".'"user"'.":".$data."}";

echo $data;


--结束END--

本文标题: PHP+ECharts系列 - 柱状图(条形图)实例一

本文链接: https://www.lsjlt.com/news/43680.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue+echarts实现条纹柱状横向图
    本文实例为大家分享了vue+echarts实现条纹柱状横向图的具体代码,供大家参考,具体内容如下 实现效果: <template>   <div id="Busi...
    99+
    2024-04-02
  • Java 基于 Apache ECharts 实现:柱状图、折线图、环形图等案例
    Java 基于 Apache ECharts 实现:柱状图、折线图、环形图等案例 柱状图 效果图 源代码 #container{width: 800px;height: 600px;}//04 实例...
    99+
    2023-09-03
    echarts java 前端
  • vue+echarts实现进度条式柱状图
    本文实例为大家分享了vue+echarts实现进度条式柱状图的具体代码,供大家参考,具体内容如下 效果图如下 代码: <template> <div cl...
    99+
    2024-04-02
  • ECharts​怎么实现柱状图
    这篇文章主要讲解了“ECharts怎么实现柱状图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ECharts怎么实现柱状图”吧! //1、引入JS文件 ...
    99+
    2024-04-02
  • vue+echarts实现3D柱形图
    本文实例为大家分享了vue+echarts实现3D柱形图的具体代码,供大家参考,具体内容如下 1、安装echarts npm install echarts --save 2、引入...
    99+
    2024-04-02
  • Python绘制单数据系列柱状图、多数据系列柱状图、堆积柱状图、百分比堆积柱状图
    1.单数据系列柱状图: 运行结果:  具体代码: #引入工具包import matplotlib.pyplot as pltimport numpy as np#设置中文字体,如果不需要中文,则可不写该语句plt.rcParams["fo...
    99+
    2023-09-26
    python matplotlib 开发语言
  • Echarts Bar横向柱状图实例代码
    目录横向柱状图动态更新数据和样式解决 echarts 宽高自适应问题纵向柱状图纵向柱状图实现坐标指示器背景渐变色柱体设置不同颜色柱状图上方显示数值tooltip 提示框自定义总体实现...
    99+
    2024-04-02
  • vue+echarts怎么实现条纹柱状横向图
    这篇“vue+echarts怎么实现条纹柱状横向图”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue+echarts怎么实...
    99+
    2023-06-29
  • echarts怎么实现3d柱状图
    本篇内容介绍了“echarts怎么实现3d柱状图”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!echarts实现3d柱状图的两种方式看了不少...
    99+
    2023-07-05
  • vue echarts实现横向柱状图
    本文实例为大家分享了vue echarts实现横向柱状图的具体代码,供大家参考,具体内容如下 实现效果: 代码: <template> <div clas...
    99+
    2024-04-02
  • vue+echarts实现堆叠柱状图
    本文实例为大家分享了vue+echarts实现堆叠柱状图的具体代码,供大家参考,具体内容如下 echarts-子组件 <template> <div cla...
    99+
    2024-04-02
  • Vue+Echarts实现柱状折线图
    本文实例为大家分享了Vue+Echarts实现柱状折线图的具体代码,供大家参考,具体内容如下 vue处理json数据渲染柱状折线图 HTML: <div id="lineCha...
    99+
    2024-04-02
  • 怎么使用vue+echarts绘制折线图、柱状图和扇形图
    这篇“怎么使用vue+echarts绘制折线图、柱状图和扇形图”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用vue+...
    99+
    2023-07-05
  • 使用Python怎么绘制柱状图和条形图
    今天就跟大家聊聊有关使用Python怎么绘制柱状图和条形图,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。一、实验目的:掌握Python中柱状图、条形图绘图函数的使用利用上述绘图函数实...
    99+
    2023-06-15
  • vue+echarts怎么实现3D柱形图
    这篇文章主要介绍了vue+echarts怎么实现3D柱形图的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue+echarts怎么实现3D柱形图文章都会有所收获,下面我们一起来看看吧。效果如下:1、安装echa...
    99+
    2023-06-29
  • echarts柱状堆叠图怎么实现
    本文小编为大家详细介绍“echarts柱状堆叠图怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“echarts柱状堆叠图怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。问题描述: &nbs...
    99+
    2023-07-05
  • Echarts横向堆叠柱状图和markLine实例详解
    目录1.Echarts 横向堆叠柱状图 + markLine效果图代码如下:2.Echarts 横向堆叠柱状图 + markLine效果图代码如下总结1.Echarts 横向堆叠柱状...
    99+
    2024-04-02
  • python绘制横向水平柱状条形图
    python绘制横向水平柱状条形图Bar,供大家参考,具体内容如下 import matplotlib import random import matplotlib.pyplot ...
    99+
    2024-04-02
  • echarts实现3d柱状图的2种方式举例
    目录echarts实现3d柱状图的两种方式方法1: echarts.graphic.extendShape 自定义图形方式2: 象型柱图(type: “pictorial...
    99+
    2023-02-23
    echarts柱状图 echarts 3d柱状图 echarts 3D立体堆叠柱状图
  • vue echarts实现柱状图动态展示
    本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码,供大家参考,具体内容如下 轮播图形式展现 <template> <div clas...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作