Baidu开源项目Echarts无论从数据的展现能力,对桌面与智能终端的友好支持,还是在使用的方便性上,慢慢成为广大程序员使用图表展示数据的首选。在使用过程中,也会出现各种坑,而网上找到的大部分资料,都是人云亦云,相互抄来抄去,需要仔细斟酌,才能在万千资料中找到自己所能用的信息。本文详细介绍了在ASP.NET中使用ECharts的详细过程,希望对使用该方法的朋友有所帮助。
一、前端
1、从echarts.baidu.com官网下载最新版的echarts
2、打开一个应用echarts的页面
3、通过下面语句引入JQuery与Echarts的JS库。
<script type="text/javascript" src="/Scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="/Scripts/echarts.js"></script>
4、在页面的Body部分,添加一个DIV,用于并给它一个名字,用于后面的JS代码存取,以放置绘制的图表
<div id="main" style=" height:400px;">测试数据</div>
在这个DIV中,名称(id)可以自行定义,但是要跟后面的致,height根据自己的需要自行设定。
5、如下代码是前台绘制图表最主要部分,通过以下几个步骤实现:
(1)echarts对DIV进行初始化,为图表绘制做准备
var myChart = echarts.init(document.getElementById('main'));
echarts.init()方法对第4部创建的DIV做了初始化,它是EChart内置的方法。
(2)建立参数对象option,为图表的绘制指定各种参数与数据,主要包括图表标题(title)、工具栏(toolbox)、图例(Legend)、Y坐标轴(yAxis)、X坐标轴(xAxis)、数据(Series)。其中图例(Legend)、Y坐标轴(yAxis)、X坐标轴(xAxis)、数据(Series)可以根据需要指定多个,并且它们可以根据需要在后台生成。
var options = {
title: {
text: "月工程数据",
},
//右侧工具栏
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
calculable: true,
xAxis: [
{
type: 'category',
name: '月份',
data: []
}
],
yAxis: [
{
type: 'value',
name: '金额',
axisLabel: {
formatter: '{value} Y'
},
splitArea: { show: true }
},
{
type: 'value',
name: '工作量',
axisLabel: {
formatter: '{value} M3'
},
splitArea: { show: true }
}
],
series: []
};
(3)使用Ajax读取后台数据
$.ajax({
type: "POST",
async: false,
contentType: 'application/json; charset=utf-8', //如果不指定该参数,总是返回跳到error部分,而无法执行success部分
url: "/wsComm.asmx/getdataechart", //调用后台Webservice
dataType: "json", //返回数据形式为json
success: function (result) {
var obj = JSON.parse(result.d.Data); //一定要注意大小写,让它跟后台返回的JSON语句中一致。result.d.Data是字串数据,需要重新转换成JSON
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.yAxis[0].data = obj.value;
options.xAxis[0].data = obj.category;
options.series = obj.series;
options.legend.data = obj.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
}
});
注:Echarts3.X,已经不用Require指定echarts的引用路径,直接定义option语句,从后台读取数据即可。完整代码如下:
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
//定义图表options
var options = {
title: {
text: "月工程数据",
},
//右侧工具栏
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
calculable: true,
xAxis: [
{
type: 'category',
name: '月份',
data: []
}
],
yAxis: [
{
type: 'value',
name: '金额',
axisLabel: {
formatter: '{value} Y'
},
splitArea: { show: true }
},
{
type: 'value',
name: '工作量',
axisLabel: {
formatter: '{value} M3'
},
splitArea: { show: true }
}
],
series: []
};
//通过Ajax获取数据
$.ajax({
type: "POST",
async: false,
contentType: 'application/json; charset=utf-8',
url: "/wsComm.asmx/getdataechart",
dataType: "json", //返回数据形式为json
success: function (result) {
var obj = JSON.parse(result.d.Data); //一定要注意大小写,本语句中,一直把Data写成data,总是取不出数据,耽误了半天
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.yAxis[0].data = obj.value;
options.xAxis[0].data = obj.category;
options.series = obj.series;
options.legend.data = obj.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText);
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
</script>
二、创建后台WebService接口方法
1、创建专门类,存放Series数据
/// 定义一个Series类 设置其每一组sereis的一些基本属性
class Series
{
/// series序列组名称
public string name
{
get;
set;
}
/// series序列组呈现图表类型
public string type
{
get;
set;
}
/// series序列组呈现对应的Y轴刻度
public int yAxisIndex
{
get;
set;
}
/// series序列组的数据为数据类型数组
public List<double> data
{
get;
set;
}
}
2、创建Webserice方法,返回JSON数据
(1)下面方法中,使用了Newtonsoft的类库,进行JSON数据的封装,所以需要通过Nuget安装并且导入如下命名空间
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
(2)该方法返回三类数据:categoryList保存X轴数据,LegendList保存图例数据,seriesList保存Series数据,seriesList保存了两组数据,从而可以把两种对比数据显示在同一张表上。注意LegendList、yAxis、seriesList数据之间的对应关系,否则会出现数据的不致。程序中的代码已经进行了详细的说明,其他不再赘述。
public JsonResult getdata()
{
//考虑到图表的category是字符串数组 这里定义一个string的List
List<string> categoryList = new List<string>();
//考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
List<string> legendList = new List<string>();
//考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
List<Series> seriesList = new List<Series>();
//设置legend数组
legendList.Add("月支出金额"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("月工作量"); //这里的名称必须和series的每一组series的name保持一致
//填写第一个Series
//定义一个Series对象
Series seriesObj = new Series();
//seriesObj.id = 1;
seriesObj.name = "月支出金额";
seriesObj.type = "line"; //线性图呈现
seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错
//模拟两组数据,都放在二组数组中。该数据你可以从数据库中获取,关于如何从后台数据库进行读取,本文不再详述。
string[,] MonthCost = new string[,] { { "201701","10110020" }, { "201702", "2000000" }, { "201703", "3500000" }, { "201704", "4590876" }, { "201705", "5809833" }, { "201706", "5309902" }, { "201707", "7388332" }, { "201708", "2000000" }, { "201709", "19879802" }, { "2017010", "2378945" } };
string[,] ProjectVal = new string[,] { { "201701", "3000" }, { "201702", "7500" }, { "201703", "9500" }, { "201704", "10000" }, { "201705", "12000" }, { "201706", "10050" }, { "201707", "30050" }, { "201708", "7893" }, { "201709", "7312" }, { "2017010", "8905" } };
//设置数据
for(int i=0;i<10;i++)
{
//加入category刻度数组
categoryList.Add(MonthCost[i,0]);
//加入数据值series序列数组 这里提供为了效果只提供一组series数据好了
seriesObj.data.Add(Convert.ToDouble(MonthCost[i,1])); //数据依次递增
}
seriesList.Add(seriesObj);
//填写第二个Series
seriesObj = new Series();
//seriesObj.id = 1;
seriesObj.name = "月工作量";
seriesObj.type = "bar"; //线性图呈现
seriesObj.yAxisIndex = 1;
seriesObj.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错
//设置数据
for(int i=0;i<10;i++)
{
seriesObj.data.Add(Convert.ToDouble(ProjectVal[i,1])); //数据依次递增
}
seriesList.Add(seriesObj);
//最后调用相关函数将List转换为Json
//因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象
JsonResult json = new JsonResult();
var newObj = new
{
category = categoryList,
series = seriesList,
legend = legendList
};
json.Data = Newtonsoft.Json.JsonConvert.SerializeObject(newObj);
return json;
}
三、效果图