基于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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
使用Vue生成动态表单
Nov 26 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
详解Vue中的watch和computed
Nov 09 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警告错误信息的解决方法
2013/06/03 PHP
php类自动加载器实现方法
2015/07/28 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Django的models模型的具体使用
2019/07/15 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
python批量处理txt文件的实例代码
2020/01/13 Python
python 瀑布线指标编写实例
2020/06/03 Python
python如何调用php文件中的函数详解
2020/12/29 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
护理自荐信范文
2013/10/05 职场文书
办护照工作证明
2014/10/01 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
寒假安全保证书
2015/02/28 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android