新公司，刚来几天，闲着没事，领导让我做些无关痛痒的活，优化报表统计！！！之前是用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. Java Environment Setting

    As a non-Java developer, I am quit stuck in Java environment setting because I am not familiar with ...

  2. Python学习之路—Day1

    第1章 Python语言简介 1.1 Python是什么 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn)是什么呢?简单的说,它是一种计算机编程语言及一组配套的软件工具和库. ...

  3. DECLARE_GLOBAL_DATA_PTR宏定义问题

    最近闲着顺便看了看6410的uboot代码,因为友善的boot对nand部分代码做了隐藏,所以干脆找了光盘里面三星原厂的uboot代码来看,因为友善的boot代码肯定也是基于厂商的代码改的,肯定可以的 ...

  4. 1.webService入门

    学习webService前,先来思考一个问题: 请看以下截图: 以上是一个综合网站的部分显示信息,我们能很明显的看出打开该网页所处区域的一些信息,比如:地点是厦门,天气是阵雨,温度是9摄氏度等等... ...

  5. Visual Studio 2013 Nuget控制台无法找到程序包

    前几天因为公司的项目使用的是MVC4框架,用VS2015不方便新增控制器,切换回2013.用了一个大半年没有用的功能,就是Nuget控制台. 当我尝试使用Nuget控制台的命令安装一个Package的 ...

  6. java 内存机制

    1.Java的内存机制 Java 把内存划分成两种:一种是栈内存,另一种是堆内存.在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配,当在一段代码块定义一个变量时,Java 就在 ...

  7. 好用的SQL TVP~~独家赠送[增-删-改-查]的例子

    以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化.  本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...

  8. TypeScript - 基本类型系统

    对于程序来说我们需要基本的数据单元,如:numbers, strings, structures, boolean 等数据结构.在TypeScript中我们支持很多你所期望在JavaScript中所拥 ...

  9. drag & resize元素的jQuery实现

    有时项目中会遇到需要拖动元素.拖拽调整元素大小的需求.大部分时候都不想自己写一遍,因为已经有很多现成的例子了.例如jqueryui提供的drag和resize.但是仅仅是为了这么小一个功能就引入一个库 ...

  10. DBCC DROPCLEANBUFFERS失效了？

    原文出处:http://www.sqlskills.com/blogs/paul/when-dbcc-dropcleanbuffers-doesnt-work/ DBCC DROPCLEANBUFFE ...