zoukankan html css js c++ java

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=" 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交换后,更改画布大小

查看全文

相关阅读:
Nim or not Nim? hdu3032 SG值打表找规律
 Maximum 贪心
 The Super Powers
LCM Cardinality 暴力
 Longge's problem poj2480 欧拉函数，gcd
GCD hdu2588
Perfect Pth Powers poj1730
6656 Watching the Kangaroo
yield 小用
 wpf DropDownButton 源码

原文地址：https://www.cnblogs.com/liessay/p/8378889.html