ECharts柱状图或者折线图方法封装
2018-04-13 本文已影响140人
wppeng
前台界面样式
bar.png
line.png
pie.png
- 样式代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
.page {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
overflow-y: auto;
}
.red {
background-color: #FF5722;
}
.green {
background-color: #009688;
}
.blue {
background-color: #1E9FFF;
}
.yellow {
background-color: #FFB800;
}
.index-module {
display: flex;
flex-direction: column;
width: 32rem;
height: 30rem;
margin: 1rem;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.big-module {
width: 56rem;
}
.index-module-title {
padding: 1rem;
color: #fff;
font-family: '楷体';
font-weight: bold;
}
.index-module-content {
height: calc(100% - 50px);
}
.index-Chart {
height: calc(100% - 1rem);
padding: 0.5rem;
}
</style>
</head>
<body>
<div class="page">
<!--
从后台获取数据(通用方法)
-->
<div class="index-module big-module">
<div class="index-module-title red">
<span id="Common1"></span>
</div>
<div class="index-module-content">
<div id="CommonData1" class="index-Chart">
</div>
</div>
</div>
<div class="index-module big-module">
<div class="index-module-title red">
<span id="Common2"></span>
</div>
<div class="index-module-content">
<div id="CommonData2" class="index-Chart">
</div>
</div>
</div>
<div class="index-module">
<div class="index-module-title red">
<span id="Common3"></span>
</div>
<div class="index-module-content">
<div id="CommonData3" class="index-Chart">
</div>
</div>
</div>
</div>
</body>
</html>
- JS方法（需引用echarts.js和jquery.js）
/**
* ECharts柱状图，折线图,扇图通用方法
* @param {Object} id DOM容器id
* @param {Object} title DOM标题id
* @param {Object} url
*/
function MyECharts(id, title, url) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(id));
//数据
$.ajax({
url: url,
success: function(data) {
data = JSON.parse(data);
$("#" + title).html(data.text);
var option = new Object();
switch(data.type) {
case 'line':
option = {
title: {
text: data.text,
subtext: data.subtext,
x: 'center'
},
legend: {
left: 'right',
orient: 'vertical',
align: 'right'
},
tooltip: {},
dataset: {
// 提供一份数据。
dimensions: data.dimensions,
source: data.source
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {
type: 'category'
},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: data.series
};
break;
case 'bar':
option = {
title: {
text: data.text,
subtext: data.subtext,
x: 'center'
},
legend: {
left: 'right',
orient: 'vertical',
align: 'right'
},
tooltip: {},
dataset: {
// 提供一份数据。
dimensions: data.dimensions,
source: data.source
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {
type: 'category'
},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: data.series
};
break;
case 'pie':
// 指定图表的配置项和数据
option = {
title: {
text: data.text,
subtext: data.subtext,
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
left: 'right',
orient: 'vertical',
align: 'right'
},
series: [{
name: data.text,
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: data.source,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
break;
default:
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error: function() {
//alert("error");
}
})
}
//调用例子
MyECharts("CommonData1", "Common1", "/DataBind.ashx?method=GetCommonDataListbar");
MyECharts("CommonData2", "Common2", "/DataBind.ashx?method=GetCommonDataListline");
MyECharts("CommonData3", "Common3", "/DataBind.ashx?method=GetCommonDataListpie");
- C#后台数据封装方法
/// <summary>
/// ECharts数据转化
/// </summary>
/// <param name="type">图表类型：line折线图，bar柱状图,pie扇图（扇图不能有多列）</param>
/// <param name="dt">数据</param>
/// <param name="text">标题</param>
/// <param name="subtext">备注</param>
/// <returns></returns>
public static string EChartsToJson(string type,DataTable dt,string text,string subtext)
{
StringBuilder jsonBuilder = new StringBuilder();
StringBuilder series = new StringBuilder();//数据列
StringBuilder dimensions = new StringBuilder();
int Columns = dt.Columns.Count;
if (type == "pie")
{
series.Append("null");
}
else
{
series.Append("[");
for (int i = 0; i < Columns - 1; i++)
{
series.Append("{");
series.AppendFormat("\"type\":\"{0}\"", type);
series.Append("}");
series.Append(",");
}
series.Remove(series.Length - 1, 1);
series.Append("]");
}
dimensions.Append("[");
for (int i = 0; i < Columns; i++)
{
dimensions.Append("\"" + dt.Columns[i].ColumnName + "\",");
}
dimensions.Remove(dimensions.Length - 1, 1);
dimensions.Append("]");
jsonBuilder.Append("{");
jsonBuilder.AppendFormat("\"text\":\"{0}\", ", text);
jsonBuilder.AppendFormat("\"subtext\":\"{0}\", ", subtext);
jsonBuilder.AppendFormat("\"dimensions\":{0}, ", dimensions);
jsonBuilder.AppendFormat("\"type\":\"{0}\", ", type);
jsonBuilder.AppendFormat("\"series\":{0}, ", series);
jsonBuilder.Append("\"source\":");
jsonBuilder.Append("[ ");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < Columns; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j]);
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
jsonBuilder.Replace("\n", " ");
return jsonBuilder.ToString();
}
//方法调用
EChartsToJson("bar", dt, "标题", "备注");//柱状图
EChartsToJson("line", dt, "标题", "备注");//折线图
EChartsToJson("pie", dt, "标题", "备注");//扇图
