基于Echarts 3.19 制作常用的图形(非静态)


Posted in Javascript onMay 19, 2016

饼图:

环境:Echarts 3.19 vs2013

实现方式:ajax+ashx+json

注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错

具体代码,各位看官 请下移目光。

<!--请先引用文件--> <script src="../Scripts/jquery-1.8.2.min.js"></script>
<script src="../Scripts/echarts/echarts.min.js"></script>

页面部分就设置一个div 就好了

<div><input type="button" id="btngo" value="Pie" /> </div>
<div id="contanis" style="width:px;height:px"></div>

 接下来就是js部分了 其实Echarts 跟HTML5中的 Canvans 还是有联系的 想知道的可以查资料哟

$("#btngo").click(function () { //这里用的是点击事件下面 当然这也是模仿你有条件查询的时候咯
var dom = document.getElementById('contanis');
var mycharts = echarts.init(dom);
option = {
title: {
text: '部门人口比例',
subtext: '测试数据',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series: [
{
name: '2012年度',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' //这怎么会有个.5呢? 看来还是要看看H5哟
}
}
}
]
};
mycharts.setOption(option);

 接下来就是 ajax部分了 动态加载数据才是根本的 数据固定多没意思,来干了这碗孟婆汤 来世就做UI设计尸

$.ajax({
type: "get",
async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "../Handler/DepartmentHandler.ashx", 
data: {},//demo 没加条件
dataType: "json", //返回数据形式为json
success: function (result) {
for (var i = 0; i < result.length; i++)
{
name.push(result[i].name); 
} 
mycharts.setOption({ //加载数据图表
legend:{data:name },
series: [{
data:result
}]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
});

 ashx部分就简单多了 单纯的序列化数据

DataTable result = BLL.Department.GetDeptNumber(); 
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["number"]);
//自己粗心 用values Echarts 不认 一直就是undefined 
d.name = dr["D_Name"].ToString(); 
list.Add(d);
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string json = jss.Serialize(list);
public class Deart //其实可以不用这么定义 自己保险让它出来的 value 值为int
{
public int value { get; set; }
public string name { get; set; } 
}

附上效果图吧:

基于Echarts 3.19 制作常用的图形(非静态)

柱状图:

环境:Echarts 3.19 vs2013

实现方式:ajax+ashx+json

注意事项: 官网所需格式为:[5,6,7,9,34] 数组类型

具体代码,各位看官 请下移目光。

<!--js代码 --> <script src="../Scripts/jquery-1.8.2.min.js"></script>
<script src="../Scripts/echarts/echarts.min.js"></script> 
<div>
<%--按钮触发--%>
<input type="button" id="btncanv" value="去吧 皮卡丘" /> 
</div>
<%--声明一个DIV 用来装Canvas绘制的图片--%>
<div id="contanis" style="width:1000px;height:800px" >
<script type="text/javascript"> 
$("#btncanv").click(function () {
//获取到绘制dom
var dom = document.getElementById("contanis");
var myChart = echarts.init(dom);
myChart.setOption({
title: {
text: '异步数据加载示例' //图片标题
},
tooltip: {},
legend: {
data: ['部门人口'] 
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '2015',
type: 'bar',//可以更改为 line(折线)
data: [] //此处给空 后面用ajax给他赋值
}]
});

老规律 下面就是ajax 部分了 :

myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组(实际用来盛放X轴坐标值)
var nums = []; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type: "post",
async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "../Handler/DepartmentHandler.ashx", //请求发送到../Handler/DepartmentHandler处
data: {},
dataType: "json", //返回数据形式为json
success: function (result) { 
//请求成功时执行该函数内容,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].values); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis:{data: names},
series: [{ data: nums }]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
});

附上效果图吧:

基于Echarts 3.19 制作常用的图形(非静态)

 其实option的设置是可以放在ajax里面的 一样会出效果 而且容易更看

就拿饼图来说吧 代码可以这么写啊

$.ajax({
type: "get",
async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "../Handler/DepartmentHandler.ashx", 
data: {},//demo 没加条件
dataType: "json", //返回数据形式为json
success: function (result) { for (var i = 0; i < result.length; i++)
{
name.push(result[i].name); 
} 
option = {
title: {
text: '部门人口比例',
subtext: '测试数据',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data:name
},
series: [
{
name: '2012年度',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: result,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}; 
}, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } });

如果你是想学习这个 作为一个吃过亏的菜鸟告诉你 先还是好好看看 官方的例子 然后理清思路在下手

以上所述是小编给大家介绍的基于Echarts 3.19 制作常用的图形(非静态)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
前端js文件合并的三种方式推荐
May 19 #Javascript
Node.js+Express配置入门教程
May 19 #Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 #Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 #Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 #Javascript
去除html代码里面的script正则方法
May 19 #Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
php检查页面是否被百度收录
2015/10/28 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Django的models模型的具体使用
2019/07/15 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
Python 中Operator模块的使用
2021/01/30 Python
python中@contextmanager实例用法
2021/02/07 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
幼儿园春游活动方案
2014/01/19 职场文书
美术指导求职信
2014/03/17 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
社区助残日活动总结
2014/08/29 职场文书
医院病假条范文
2015/08/17 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书