HTML 创建容器，引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../Public/js/echarts.simple.min.js"></script>
<script src="../Public/js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="../Public/css/bootstrap.min.css" />
<link rel="stylesheet" href="../Public/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="../Public/css/fonts.googleapis.com.css" />
<link rel="stylesheet" href="../Public/css/ace.css" class="ace-main-stylesheet" />
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="box_area_lg">
<div class="main_map" id="main1"></div>
</div>
<div></div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box_area_lg">
<div class="main_map" id="main2"></div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box_area_lg">
<div class="main_map" id="main3"></div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box_area_lg">
<div class="main_map" id="main5"></div>
</div>
</div>
</div>
<!--表3 销售额柱状图-->
<script type="text/javascript">
var dom = document.getElementById("main3");
var myChartbar = echarts.init(dom);
var app = {};
option = null;
app.title = '销售额 - 条形图';
option = {
title: {
text: '销售额',
subtext: '...'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: []
},
series: [{
name: '销售额',
type: 'bar',
data: []
}]
};
myChartbar.setOption(option, true);
$.ajax({
type: 'post',
url: 'ajax.ashx?action=ShowChartBar', //url地址后台显示数据方法
data: {},
dataType: 'json',
async: true,
success: function(result) {
var names = [];
var nums = [];
//请求成功时执行该函数内容，result即为服务器返回的json对象
//请求成功时执行该函数内容，result即为服务器返回的json对象
if(result) {
for(var i = 0; i < result.length; i++) {
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for(var i = 0; i < result.length; i++) {
nums.push(result[i].value); //挨个取出销量并填入销量数组
}
myChartbar.hideLoading(); //隐藏加载动画
myChartbar.setOption({ //加载数据图表
yAxis: {
data: names
},
series: [{
data: nums
}]
});
}
},
error: function() {
alert("Error");
}
});
myChartbar.setOption(option, true);
</script>
<!--表4饼状图-->
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main2'));
var option = {
title: {},
tooltip: {
show: true
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: []
}]
};
myChart.setOption(option, true);
//ajax动态获取数据
function chuanzhi() {
$.ajax({
type: "post",
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: "ajax.ashx?action=ShowChartPie",
data: {}, //demo 没加条件
dataType: "json", //返回数据形式为json
success: function(result) {
var name = [];
for(var i = 0; i < result.length; i++) {
name.push(result[i].name);
}
myChart.setOption({ //加载数据图表
legend: {
data: name
},
series: [{
data: result
}]
});
},
error: function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
});
}
setInterval(chuanzhi(), 5000);
</script>
ashx
<%@ WebHandler Language="C#" Class="ajax" %>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.SessionState;
using System.Web.Profile;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
using System.Text;
using System.Collections;
using DHERP.DAL;
using DHERP.DBUtility;
using DHERP.Library;
using DHERP.Model;
public class ajax : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string action = context.Request.QueryString["action"];
switch (action)
{
case "Show":
Show(); break;
case "ShowChartBar":
ShowChartBar();break;
case "ShowChartPie":
ShowChartPie();break;
}
}
protected static void Show()
{
// System.Threading.Thread.Sleep(3000);
string ID = HttpContext.Current.Request["ID"];
WriteJson("ID", ID);
}
private void ShowChartPie()
{
Random rd = new Random();
DataTable result = DALCommon.GetDataList("SEL_Sell", "Top 4 * ", " ID< " + rd.Next(100,999).ToString()+" order by ID desc").Tables[0];
List<object> list = new List<object>();
foreach (DataRow dr in result.Rows)
{
// 附上Echarts 所需的格式：[{value:335, name:'直接访问'}]
Deart d = new Deart();
d.value = Convert.ToInt32(dr["InvoiceMoney"]);
//自己粗心 用values Echarts 不认 一直就是undefined
d.name = dr["sellNo"].ToString();
list.Add(d);
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(list);
WriteJson(json);
}
private void ShowChartBar()
{
DataTable result = DALCommon.GetDataList("v_sales", "Top 5 * ", " TotalPrice> " + 355000.ToString() + "order by TotalPrice asc").Tables[0];
List<object> list = new List<object>();
foreach (DataRow dr in result.Rows)
{
// 附上Echarts 所需的格式：[{value:335, name:'直接访问'}]
Deart d = new Deart();
d.value = Convert.ToInt32(dr["TotalPrice"]);
//自己粗心 用values Echarts 不认 一直就是undefined
d.name = dr["staff"].ToString();
list.Add(d);
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(list);
WriteJson(json);
public static string ToJson( object obj)
{
return NewtonsoftJson(obj);
}
public static string NewtonsoftJson(object obj)
{
return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
}
private static void WriteJson(string str)
{
HttpContext.Current.Response.Write(str);
//HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式
HttpContext.Current.Response.End();
}
/// <summary>
/// 输出Json
/// </summary>
/// <param name="key"></param>
/// <param name="val"></param>
private static void WriteJson(string key, string val)
{
HttpContext.Current.Response.Write(GetJSON(key, val));
HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式
HttpContext.Current.Response.End();
}
/// <summary>
/// 获取JSON字符串
/// </summary>
/// <param name="dic"></param>
/// <returns></returns>
private static string GetJSON(string key, string val)
{
return string.Format("{{\"{0}\":\"{1}\"}}", key, val);
}
}
public class Deart //其实可以不用这么定义 自己保险让它出来的 value 值为int
{
public int value { get; set; }
public string name { get; set; }
}
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
