<?php$server = ‘127.0.0.1‘;$user = ‘root‘;$password = ‘‘;$database = ‘yiibaidb‘;$sql = "SELECT MC,PS FROM charts";$conn = new mysqli($server, $user, $password, $database);if (!$conn) { ???die(‘连接错误‘ . $conn -> connect_error);}$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" /> ???????<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> ???????<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> ???????<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script> ???????<title>Document</title> ???</head> ???<body> ???????<div class="container"> ???????????<div id="main" style="width: 1000px;height:400px;"></div><script type="text/javascript"> ?????????????var ?myChart = echarts.init(document.getElementById(‘main‘)); ?????????????var option = { ?????????????????????title: { text: ‘收视率排行‘, subtext: ‘数据来自网络‘ }, ???????????????????tooltip: { ???????????????????????show: true ???????????????????}, ???????????????????legend: { ??????????????????????data:[‘MC‘] ???????????????????}, ???????????????????grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, ???????????????????xAxis : [ ???????????????????????{ ???????????????????????????type : ‘category‘, ???????????????????????????data : (function(){ ???????????????????????????????????var arr=[]; ???????????????????????????????????????$.ajax({ ???????????????????????????????????????type : "get", ???????????????????????????????????????async : false, //同步执行 ???????????????????????????????????????url : "query.php", ???????????????????????????????????????data : {}, ???????????????????????????????????????dataType : "json", //返回数据形式为json ???????????????????????????????????????success : function(result) { ???????????????????????????????????????if (result) { ?????????????????????????????????????????????console.log(result); ??????????????????????????????????????????????for(var i=0;i<result.length;i++){ ?????????????????????????????????????????????????console.log(result[i].MC); ?????????????????????????????????????????????????arr.push(result[i].MC); ???????????????????????????????????????????????} ???????????????????????????????????????} ???????????????????????????????????}, ???????????????????????????????????error : function(errorMsg) { ???????????????????????????????????????alert("sorry，请求数据失败"); ???????????????????????????????????????myChart.hideLoading(); ???????????????????????????????????} ??????????????????????????????????}) ??????????????????????????????????return arr; ???????????????????????????????})() ???????????????????????} ???????????????????], ???????????????????yAxis : [ ???????????????????????{ ???????????????????????????type : ‘value‘ ???????????????????????} ???????????????????], ???????????????????series : [ ???????????????????????{ ???????????????????????????"MC":"PS", ???????????????????????????"type":"bar", ???????????????????????????"data":(function(){ ???????????????????????????????????????var arr=[]; ???????????????????????????????????????$.ajax({ ???????????????????????????????????????type : "get", ???????????????????????????????????????async : false, //同步执行 ???????????????????????????????????????url : "query.php", ???????????????????????????????????????data : {}, ???????????????????????????????????????dataType : "json", //返回数据形式为json ???????????????????????????????????????success : function(result) { ???????????????????????????????????????if (result) { ??????????????????????????????????????????????for(var i=0;i<result.length;i++){ ?????????????????????????????????????????????????console.log(result[i].PS); ?????????????????????????????????????????????????arr.push(result[i].PS); ???????????????????????????????????????????????} ???????????????????????????????????????} ???????????????????????????????????}, ???????????????????????????????????error : function(errorMsg) { ???????????????????????????????????????alert("sorry，请求数据失败"); ???????????????????????????????????????myChart.hideLoading(); ???????????????????????????????????} ??????????????????????????????????}) ?????????????????????????????????return arr; ???????????????????????????})() ???????????????????????} ???????????????????] ???????????????}; ???????????????// 为echarts对象加载数据 ???????????????myChart.setOption(option); ???????????// } ???</script> ???</body></html>SET FOREIGN_KEY_CHECKS=0;DROP TABLE IF EXISTS `charts`;CREATE TABLE `charts` ( ?`id` int(11) NOT NULL AUTO_INCREMENT, ?`MC` varchar(255) DEFAULT NULL, ?`PS` int(255) DEFAULT NULL, ?PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=33 DEFAULT CHARSET=utf8;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柱形图示例
原文地址：https://www.cnblogs.com/win32pro/p/8378889.html