PHP Echarts Ajax Json柱形图示例

最新推荐文章于 2022-04-11 11:12:09 发布

weixin_34163741

最新推荐文章于 2022-04-11 11:12:09 发布

阅读量305

点赞数

文章标签： json php javascript ViewUI

原文链接：http://www.cnblogs.com/win32pro/p/8378889.html

版权

<?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 ');