新公司，刚来几天，闲着没事，领导让我做些无关痛痒的活，优化报表统计！！！之前是用flash做的，现在要改成echart实现。好吧，之前没用过，抱着学习态度，研究了下。写点东西打发下时间，能帮到需要帮助朋友更好。好了废话少说，开搞！

第一步搞个页面：

  1. <body>
  2. <div id="'mainBar1'"style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  3. </body>

第二部：添加相关js引用，参照api，初始化js和函数

<script src="../../resources/js/echarts/echarts.js">

</script> <script type="text/javascript">

var identity = 0;

var chart_bar;

require.config({ paths: { echarts: '../../resources/js/echarts' } });

require( [ 'echarts', 'echarts/chart/bar', ], DrawEChart );

function DrawEChart(ec)

{

chart_bar = ec.init(document.getElementById('mainBar1'));

Getdata();

}

function Getdata()

{ ption =

{

title: { text: '长者统计报表', subtext: '', x: 'center', y: 'top', zlevel: 0, textStyle: { fontSize: 18, fontWeight: 'bolder', color: '#333', } },

tooltip: { trigger: 'item' },

legend: { data: [], x: 'center', orient: 'horizontal', height: '100px', zlevel: 0, y: 'bottom', },

grid: { x: 80, y: 50, y2: 120, },
calculable: true,

xAxis: [ { type: 'category', data: [], } ],

yAxis: [ { type: 'value', axisLabel: { formatter: '{value} ' }, name:"总人数", } ],

series: []

};

//通过Ajax获取数据

$.ajax({

async: false, //同步执行 url: 'SaHandler.ashx?t="相关参数,        //这里就用一般处理程序来处理数据，返回json格式

dataType: "json", //返回数据形式为json

type: "post",

success: function (result) {

if (result) {

if (result.series != "") {

chart_bar.clear();

option.legend.data = result.legend;  //待返回

option.series = result.series;  //待返回 这个地方返回有讲究，因为你我需要把name,type,lable样式全部从后台动态获取，从而达到想要效果。具体看下面一般处理程序对返回数据的处理

option.xAxis[0].data = result.AgeList;  //待返回

chart_bar.refresh(true);

} else {   Ext.example.msg('', '该查询条件没有统计数据！'); }
}

}, error: function (errorMsg)

{

Ext.example.msg('提示', '不好意思，图表请求数据失败啦！');

} });

chart_bar.setOption(option);

</script>

第三步：一般处理程序处理数据，这个地方就要考虑了，你需要返回那些东西，根据api的案例你需要返回什么样格式或者类型数据。

在这里 我需要返回 三个东西 图表的legend,series 和xAxis。好吧 为了返回相应json格式字符串我们新建一个jsonhelp类（帮助返回Series使用）

public class SeriesJson {

/// <summary> /// sereis序列组id ///

</summary>

public int id { get; set; }

/// <summary> /// series序列组名称 ///

</summary>

public string name { get; set; }

/// <summary> /// series序列组呈现图表类型(line、column、bar等)

/// </summary>

public string type { get; set; }

/// <summary> /// series序列组的数据为数据类型数组 /// </summary>

public List<int> data { get; set; }

//这个是处理样式的

public object    itemStyle{get;set;}  }

第四步就是做数据了，赋值然后输出就ok了。

前台需要的，我们要返回的想定义好：(下面数据是乱写的与运行效果图数据不一致，仅供参考思路)

List<string> legend = new List<string>(){"测试一"，“测试二”，“测试三”};   //源程序代码太乱，随便赋值了  但是要注意，实际项目中下面legend里面的name需要保持一致才行。

List<string> AgeList = new List<string>() { "60岁及以下", "60-69岁", "70-99岁", };

List<SeriesJson> SeriesJosn = new List<SeriesJson>();

for(int i=0,i<=legend.length,i++){

SeriesJson json = new SeriesJson(); json.id = i; json.type = "bar"; json.data = new List<int>(){1,2,3}

json.name=legend[i];

json.itemStyle = new { normal = new { label = new { show = true, position = "top" } } };

}

}

var newObj = new { series = SeriesJosn, legend=legend, AgeList=AgeList, };

最后输出：Output(JsonConvert.SerializeObject(newObj));

后台输出，前台接收，ok,不出意外图表就出来了。

echart饼状图使用，打发时间。的更多相关文章

  1. echart饼状图的学习

    一.引入js文件 <!--Step:1 引入一个模块加载器,如esl.js或者require.js--> <script src="~/Scripts/esl.js&quo ...

  2. echart 饼状图自定义样式

    echarts.init(document.getElementById('WaterCategoryStatistics')).setOption({ legend: { orient:'verti ...

  3. echart中饼状图的高亮显示。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  5. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  6. arcgis api for flex之专题图制作（饼状图，柱状图等）

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

  7. WPF、Silverlight项目中使用柱状图、饼状图、折线图

    在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...

  8. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  9. JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图

    JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...

随机推荐

  1. C#匿名函数的坑

    在for循环中catch索引 for (int i = 0; i < n; i++) { foo(() =>{ if (i == x) //这里的i始终都是最后一个... { //bala ...

  2. 【转载】为什么V8引擎这么快？

    原文地址:http://blog.csdn.net/horkychen/article/details/7761199

  3. 微信小视频复制到手机本地Android APP 分享

    因为需要将拍的宝宝的微信小视频上传到亲宝宝软件,每次去手动找文件比较麻烦,所以做了个微信视频复制到手机本地的APP,做工虽然粗糙,但是绝对实用, 下载地址 http://pan.baidu.com/s ...

  4. mysql5.7 密码策略

    查看现有的密码策略 mysql> SHOW VARIABLES LIKE 'validate_password%';+-------------------------------------- ...

  5. 使用的组件：JQuery UI

    jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使 ...

  6. 【原创】.NET之我见

    最近在准备面试,自己也顺带巩固了下基础,加上自己对码农的一些理解都写在这里了,水平不行,欢迎吐槽 //.NET基础 1.Class 和struct 区别 类是一种“引用类型”.创建类的对象时,对象赋值 ...

  7. objective-c（继承）

    objective-c的继承给出基础例子及注意点: 定义并实现基类ClassA #import <Foundation/Foundation.h> @interface ClassA : ...

  8. Windows Phone 8.1上的开发人员请看

    1)SDK选择:如果你是在Windows Phone 8.1上做一个新App, 或者想把7.x/8.0的App移植到8.1上,请使用WinRT SDK,而不是Silverlight.当然Silverl ...

  9. dojo/dom源码学习

    dojo/dom模块作为一个基础模块,最常用的就是byId方法.除此之外还有isDescendant和setSelectable方法. dom.byId(myId)方法:   各种前端类库都免不了与D ...

  10. Jquery Mobile 小结

    第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...