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

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

饼图：

环境：Echarts 3.19 vs2013

实现方式：ajax+ashx+json

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

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

页面部分就设置一个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}
{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

foreach (DataRow dr in result.Rows)

{

// 附上Echarts 所需的格式：[{value:335, name:'直接访问'}]

Deart d = new Deart();

d.value = Convert.ToInt32(dhttp://r["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 vs2013

实现方式：ajax+ashx+json

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

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

<%--按钮触发--%>

<%--声明一个DIV 用来装Canvas绘制的图片--%>

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。