基于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中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
前端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/11/16 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
django站点管理详解
2017/12/12 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
彻底理解Python中的yield关键字
2019/04/01 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
对python中return与yield的区别详解
2020/03/12 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
小学捐书活动总结
2014/07/05 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
申报优秀教师材料
2014/12/16 职场文书
通知函格式范文
2015/04/27 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
实习报告范文
2019/07/30 职场文书
python实现简单的井字棋
2021/05/26 Python
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis