asp.net画饼图、柱状图（ECharts）_asp+echarts-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42453161/article/details/90601499

推荐一个优秀画图网站https://echarts.baidu.com/echarts2/doc/example.html?qq-pf-to=pcqq.c2c

（饼图）asp.net前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>

<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var a = [];
a.push({ name: "<%=str[0]%>", value: " <%=str[1]%>" });
a[0].name=a[0].name.replace(/'/g,"");//去除单引号
var b = [];
for (var i = 0; i < a[0].name.split(",").length - 1; i++)
b.push({ value: a[0].value.split(",")[i], name: a[0].name.split(",")[i] });
//alert(b[1].name);

var option = {
title: {
text: '客户公司属性分析',
//subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:[<%=str[0] %>]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '公司数量',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: b,
}
]
};
// [{ value: b[0].value, name: b[0].name },
// { value: b[1].value, name: b[1].name }
// ]

// 为echarts对象加载数据
myChart.setOption(option);
</script>
<script type="text/javascript">

</script>
</body>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Timers;
using System.Data;
using System.Data.SqlClient;

public partial class Default2 : System.Web.UI.Page
{
public DataTable table;
public string[] str = { "", "" };
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection mcon = new SqlConnection("Data source=.;initial catalog=yinshuaqiye;user id=sa;password=;");
mcon.Open();

SqlCommand b = new SqlCommand("select nature,count(nature) as num from yonghu group by nature", mcon);

SqlDataAdapter da = new SqlDataAdapter(b);
DataTable table = new DataTable();
da.Fill(table);

foreach (DataRow dr in table.Rows)
{
str[0] += "'" + dr["nature"] + "',";
str[1] += dr["num"] + ",";
}

// str[0] += "'" + dr["num"] + "',";
//str[1] += dr["nature"] + ",";
//dr["nature"].ToString();

}

}

（柱状图）前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: [<%=str[0]%>]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "销量",
"type": "bar",
"data":[<%=str[1]%>]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>

后台代码：

public partial class _Default : System.Web.UI.Page
{
public DataTable table;
public string [] str = { "", "" };
public void Page_Load(object sender, EventArgs e)
{
SqlConnection mcon = new SqlConnection("Data source=.;initial catalog=yinshuaqiye;user id=sa;password=;");
mcon.Open();

SqlCommand b = new SqlCommand("select nature,count(nature) as num from yonghu group by nature", mcon);

SqlDataAdapter da = new SqlDataAdapter(b);
DataTable table = new DataTable();
da.Fill(table);

foreach (DataRow dr in table.Rows)
{
str[0] += "'" + dr["nature"] + "',";
str[1] += dr["num"] + ",";
}

// str[0] += "'" + dr["num"] + "',";
//str[1] += dr["nature"] + ",";
//dr["nature"].ToString();

}

}