基于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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
微信小程序如何获取地址
Dec 24 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
php微信开发之关键词回复功能
2018/06/13 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jquery 插件开发备注
2010/08/27 Javascript
JS继承 笔记
2011/07/13 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
浅析Python中的多重继承
2015/04/28 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
听课评语大全
2014/04/30 职场文书
个人求职信范文
2014/05/24 职场文书
党小组考察意见
2015/06/02 职场文书
消费者投诉书范文
2015/07/02 职场文书
四则混合运算教学反思
2016/02/23 职场文书
详细介绍python类及类的用法
2021/05/31 Python
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
Python中的socket网络模块介绍
2022/07/23 Python