新公司，刚来几天，闲着没事，领导让我做些无关痛痒的活，优化报表统计！！！之前是用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. flex进行页面的基础布局

    接触flex有一段时间了,由于自己在移动上的经验比较少,一直以为这个和css3的其他属性差不多,就是一个盒模型的缩放之类的.今天一个移动的小项目用到了这个属性,仔细看了下,先不说里面具体的属性,就fl ...

  2. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

  3. M1M2总结

    这个学期很开心可以和一帮兄弟姐妹们一起做软件写代码,总体看下来真的是充满哦了艰辛和困苦.虽然我是负责软件测试的这一块的,但是看着他们辛苦的写代码我也很是为他们着急和心疼.毕竟,编译当头,数据库辅助,每 ...

  4. 关于Xcode7中添加不了libresolv.dylib等类似库的问题

    Xcode7中,由于某些机制,使得我们在添加类似于 libresolv.dylib.libz.dylib等库的时候,直接在Build Phases中点击加号添加,似乎已经无法找到相应的库.此时,我们可 ...

  5. C# interface

    我们学习了interface,即接口,其与抽象类有点像,但是他们也有一些区别,比如类不能多重继承但是接口却可以多重继承. 接口只包含方法.委托或事件和属性的签名(接口包含的成员).不能包含字段(因为字 ...

  6. 在ubuntu上配置nginx+php+mysql+phpmyadmin

    1.先更新ubuntu系统 更新命令 sudo apt-get update sudo apt-get upgrade 2 添加ubuntu nginx更新源镜像 cd /etc/apt/ sudo ...

  7. 决策树 -- C4.5算法

    C4.5是另一个分类决策树算法,是基于ID3算法的改进,改进点如下: 1.分离信息   解释:数据集通过条件属性A的分离信息,其实和ID3中的熵:   2.信息增益率   解释:Gain(A)为获的A ...

  8. java word 转 pdf

    这里使用jacob将word转pdf,使用的是jacob.jar import java.io.File;import com.jacob.activeX.ActiveXComponent;impor ...

  9. 我和Java有个约定

    2012年8月31日,我在父亲的陪伴下,第一次登上的火车,千里迢迢从老家来到了现代化大都市--西安,目睹着这里的繁华,与从小生活的环境截然的天壤之别,蓦然间问自己,你确定这是想来的地方吗? 依稀记得曾 ...

  10. 微信公共平台开发-（.net实现）2--ACCESSTOKEN值获得

    成功的走出第一步后,我们紧接着趁热打铁开始下一步: 成为了开发者之后微信平台会给您AppId和AppSecret,在订阅号中是没有的,所以因该申请一下服务号, 若没有请注意上一篇http://www. ...