百度EChart3初体验
2024-03-31 15:09:15
由于项目需要在首页搞一个订单数量的走势图，经过多方查找，体验，感觉ECharts不错，封装的很细，我们只需要看自己需要那种类型的图表，搞定好自己的json数据就OK。至于说如何体现出来，官网的教程很详细。大家可以去看下。大概了解下用法就OK。
百度ECharts 3：http://echarts.baidu.com/index.html
其实还有很多，可以到官网中找。
下面是我进行操作的步奏，大家可以看下，做个参考。
ECharts初体验—01...
需要到官网下载最新的版本的js文件(完整版)，其实只有一个，但是你要想出来一些好看的效果就应该把主题也下载好。
地址：http://echarts.baidu.com/download.html
其实只需要4步就OK。
1：划分一块区域用来显示图形；
2：初始化echart插件；
3：填充option中的数据data;
4：加载，装配数据到echart。
这样就OK了。其实最难的不是使用，而是如何将这个插件和自己的后台联系起来，比如数据应该展示那些，如何将数据json化之后传递过来。如何实现异步等……
ECharts初体验—02...
下面是MVC中一个简单的页面,只是为了将图表先展示出来。
/// <summary>
/// 折线图
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
<h2>Index</h2> <div id="main" style="width: 600px;height:400px;"></div>
@*引人外部JS文件，下面的vintage,dark是主题。*@
<script src="~/Scripts/echarts/echarts.js"></script>
<script src="~/Scripts/echarts/vintage.js"></script>
<script src="~/Scripts/echarts/dark.js"></script>
<script>
//第一步；
var myChart = echarts.init(document.getElementById('main'), 'dark'); //这就样
//第二步；
var option = {
title: {
text: '堆叠区域图'
},
//气泡提示框，呈现更详细的数据。
tooltip: {
trigger: 'axis'
},
//图例，表述数据和图表的关联
legend: {
data: ['邮件营销']
},
//辅助工具箱，如添加标线，框选缩放.
toolbox: {
feature: {
saveAsImage: {}
}
},
//用于定义直角系的布局。
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//坐标系中的X轴--类目录
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ["2016-10-12", "2016-10-13", "2016-10-14", "2016-10-15", "2016-10-16", "2016-10-17", "2016-10-18", "2016-10-19", "2016-10-20", "2016-10-21", "2016-10-22", "2016-10-23", "2016-10-24", "2016-10-25", "2016-10-26"]
}
],
//坐标系中的Y轴--数据值
yAxis: [
{
type: 'value'
}
],
//数据列表，一个图表可能包含多个系列，每一个系列可能包含多个数据。格式为json的形式。
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: { normal: {} },
label: {
normal: {
show: true,
position: 'top'
}
},
data: [, , , , , , , , , , , , , , ]
}
]
};
//第三步 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
其中的每一步都有解释，每一个名词都有各自的意义，大家可以了解下。至于每一个data，都是使用静态的json，后面会从后台传递数据。下面是这个的效果。
ECharts初体验—03...
其实上面的数据都是静态的，很好的实现。但是对于我们实际的项目中都是从数据库中取到的数据，不可能是静态的，此时我们就需要将其json化，进行一定的转换。把数据从后面传递到前台，在进行操作。
dataList类
public class DateList
{ public IList<string> datetime { get; set; } public IList<int> ordernumber { get; set; }
}
控制器Controller
[HttpGet]
public ActionResult ZhiXian()
{
return View();
}
[HttpPost, ActionName("ZhiXian")]
public ActionResult ZhiXianPost()
{
var listData = new List<string>();
var datetimes = DateTime.Now.AddDays();
for (int i = ; i <=; i++)
{
listData.Add(datetimes.AddDays(-i).ToString("yyyy-MM-dd"));
}
listData.Reverse();
var aa = new int[] { , , , , , , , , , , , , , , };
var data = new DateList()
{
datetime = listData,
ordernumber = aa,
};
return Json(new{status=,result=data});
}
视图View
<h2>ZhiXian</h2>
<div id="main" style="width: 800px;height:400px;"></div>
@*引人外部JS文件*@
<script src="~/Scripts/echarts/echarts.js"></script>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/echarts/vintage.js"></script>
<script src="~/Scripts/echarts/roma.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'roma'); //这就
$.post("/Home/ZhiXian", function (response) {
if (response.status == ) {
console.log(response.result.datetime);
console.log(response.result.ordernumber);
var option = {
title: {
text: '近10天订单数量分析图'
},
//气泡提示框，呈现更详细的数据。
tooltip: {
trigger: 'axis'
},
//图例，表述数据和图表的关联
legend: {
data: ['订单总量']
},
//辅助工具箱，如添加标线，框选缩放.
toolbox: {
feature: {
saveAsImage: {}
}
},
//用于定义直角系的布局。
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//坐标系中的X轴--类目录
xAxis: [
{
type: 'category',
boundaryGap: false,
data: response.result.datetime
}
],
//坐标系中的Y轴--数据值
yAxis: [
{
type: 'value'
}
],
//数据列表，一个图表可能包含多个系列，每一个系列可能包含多个数据。格式为json的形式。
series: [
{
name: '订单总量',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: { normal: {} },
data: response.result.ordernumber
}
]
};
myChart.clear();
myChart.hideLoading();
//// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
} else {
alert("图表请求不成功，请重新请求。");
}
});
</script>
效果如下：
我们可以发现颜色和第二个的不一样，这个就是我们使用了主题，这个在获取dom元素的时候标记的。如下所示。
下面是一个饼状图的主要option,其余的不变；
myChart.setOption({
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: [
{ value: , name: '搜索引擎' },
{ value: , name: '直接访问' },
{ value: , name: '邮件营销' },
{ value: , name: '联盟广告' },
{ value: , name: '视频广告' }
]
}
]
});
我一直相信，只要我一直走，就一定可以到达。虽然我不知道要到那里去...
最新文章
- iOS7的启动画面设置及asset catalogs简介
- JSON和JSONP （含jQuery实例）（share）
- python——django使用mysql数据库（一）
- 使用 Sandcastle 生成代码帮助文档
- Linux常用命令-入门
- 当AS3遇见Swift(一)
- 阿里BCG重磅报告《人工智能，未来致胜之道》
- SVN与TortoiseSVN实战：补丁详解
- impdp ORA-29913: error in executing ODCIEXTTABLEOPEN callout
- other
- C#针对DataTable进行分页方法
- UESTC_摩天轮 2015 UESTC Training for Dynamic Programming<Problem K>
- 接着上一个版本在上一个分离access-token和ticket的版本
- 将从数据库中获取的数据 ，以HTML表格的形式显示
- JavaScript 中的事件类型5（读书笔记思维导图）
- ural1018（树形dp）
- DUBBO初探-搭建DUBBO开发环境
- PAT1055:The World's Richest
- TSPL学习笔记(1)
- SPOJ 8222 NSUBSTR - Substrings