PHP Echarts Ajax Json柱形图示例

Posted 2020-10-22 Li Essay

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PHP Echarts Ajax Json柱形图示例相关的知识，希望对你有一定的参考价值。

<?php
    $server = \'127.0.0.1\';
    $user = \'root\';
    $password = \'\';
    $database = \'yiibaidb\';

    $conn = new mysqli($server,$user,$password,$database);
    if($conn->connect_errno){
        die("数据库连接失败".$conn->connect_error);
        exit;
    }
    $sql =\'SELECT mc,ps FROM charts\';
    $result = $conn->query($sql);
    if($result->num_rows > 0){
        $arr = array();
        while ($row = $result->fetch_assoc()) {
            $arr[] = $row;
        }
        echo json_encode($arr);
    }
    $conn->close();
?>

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <title>Document</title>
</head>

<body>
    <div id=\'container\' style="width: 600px; height: 400px;"></div>
    <script>
        var jiemu = [], piaoshu = [];
        //获取json数据放入数组
        function getPS() {
            $.ajax({
                type: "post",
                async: false,
                url: "json.php",
                dataType: "json",
                success: function (data) {
                    if (data) {
                        for (var index = 0; index < data.length; index++) {
                            jiemu.push(data[index].mc);
                            piaoshu.push(data[index].ps);
                        }
                    }
                },
                error: function (errmsg) {
                    alert(errmsg);
                }
            })
            return jiemu, piaoshu;
        }

        //执行获取票数函数
        getPS();

        //绘制柱形图
        var myChart = echarts.init(document.getElementById("container"));
        var option1 = {
            title: {
                text: \'ECharts 入门案例\',
                subtext: \'子标题\',
                x: \'center\'
            },
            tooltip: {
                show: true
            },
            legend: {
                data: [\'票数排行\']
            },
            xAxis: {
                data: jiemu
            },
            yAxis: {},
            series: [{
                name: \'票数\',
                type: \'bar\',
                data: piaoshu
            }]
        };
        myChart.setOption(option1);
    </script>
</body>

</html>

INSERT INTO `charts` VALUES (\'1\', \'新闻联播\', \'71\');
INSERT INTO `charts` VALUES (\'2\', \'朝闻天下\', \'64\');
INSERT INTO `charts` VALUES (\'3\', \'焦点访谈\', \'43\');
INSERT INTO `charts` VALUES (\'4\', \'天天饮食\', \'40\');
INSERT INTO `charts` VALUES (\'5\', \'晚间新闻\', \'90\');
INSERT INTO `charts` VALUES (\'6\', \'正大综艺\', \'80\');
INSERT INTO `charts` VALUES (\'7\', \'法治在线\', \'73\');
INSERT INTO `charts` VALUES (\'8\', \'今日说法\', \'79\');
INSERT INTO `charts` VALUES (\'9\', \'央视2套\', \'18\');
INSERT INTO `charts` VALUES (\'10\', \'谈商论道\', \'96\');
INSERT INTO `charts` VALUES (\'11\', \'早间精编\', \'12\');
INSERT INTO `charts` VALUES (\'12\', \'嫁狗\', \'55\');
INSERT INTO `charts` VALUES (\'13\', \'风去云不回\', \'58\');
INSERT INTO `charts` VALUES (\'14\', \'羞羞的小狗\', \'70\');
INSERT INTO `charts` VALUES (\'15\', \'我们变他们了\', \'13\');
INSERT INTO `charts` VALUES (\'16\', \'功守道\', \'87\');
INSERT INTO `charts` VALUES (\'17\', \'虎父无犬子\', \'20\');
INSERT INTO `charts` VALUES (\'18\', \'因为爱情\', \'73\');
INSERT INTO `charts` VALUES (\'19\', \'狗咬吕洞宾\', \'18\');
INSERT INTO `charts` VALUES (\'20\', \'兔子爱萝卜\', \'96\');
INSERT INTO `charts` VALUES (\'21\', \'最后一张车票\', \'53\');
INSERT INTO `charts` VALUES (\'22\', \'万水千山总是情\', \'81\');
INSERT INTO `charts` VALUES (\'23\', \'一带一路\', \'17\');
INSERT INTO `charts` VALUES (\'24\', \'阿里巴巴\', \'92\');
INSERT INTO `charts` VALUES (\'25\', \'罚单\', \'51\');
INSERT INTO `charts` VALUES (\'26\', \'水城烙锅\', \'30\');
INSERT INTO `charts` VALUES (\'27\', \'内蒙\', \'35\');
INSERT INTO `charts` VALUES (\'28\', \'共享生活\', \'11\');
INSERT INTO `charts` VALUES (\'29\', \'中国欢迎你\', \'82\');
INSERT INTO `charts` VALUES (\'30\', \'集帮\', \'32\');
INSERT INTO `charts` VALUES (\'31\', \'一念七宝\', \'12\');
INSERT INTO `charts` VALUES (\'32\', \'都选C\', \'58\');

yAxis xAxis交换后,更改画布大小

以上是关于PHP Echarts Ajax Json柱形图示例的主要内容，如果未能解决你的问题，请参考以下文章

ECharts+PHP+MySQ+ Ajax 实现图表绘制

使用 php 和 Ajax 的 Highcharts 柱形图