新公司，刚来几天，闲着没事，领导让我做些无关痛痒的活，优化报表统计！！！之前是用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. .NET 4.5+项目迁移.NET Core的问题记录

    .NET 4.5+项目迁移.NET Core的问题记录 这几天试着把目前的开发框架迁移到新的.net core平台,中间遇到的问题在这里简单记录一下. 迁移过程遇到的最大的问题IOC容器.我目前使用的 ...

  2. Windows Phone 8.1 新特性 - 页面导航

    本篇介绍一下Windows Phone 8.1 中页面导航的实现方式. 大家对Windows Phone 8 中页面导航的实现一定不陌生,我们使用 NavigationService 来实现.具体写法 ...

  3. 河南省第四届ACM程序设计大赛

    A: 序号互换 #include <cstdio> #include <cstdlib> #include <cstring> #include <algor ...

  4. babylonjs

    A Babylon.js Primer Table of contents Babylon.js WebGL Game Creation System! The Browser Useful Link ...

  5. 冒泡排序-java

    排序-冒泡排序 基本思想:从一端开始,逐个比较相邻的两个元素,发现倒序即交换. 这里按从后往前(从下往上)逐个比较相邻元素. 平均时间:O(n2) 最好情况:O(n) 最坏情况:O(n2)(逆序) 辅 ...

  6. Python学习笔记1——Python基础

    一． 数据类型和变量 整数:十六进制用0x前缀和0-9,a-f表示 浮点数:小数,科学计数法:10用e代替:整数和浮点数在计算机内部存储的方式是不同的,整数运算永远是精确的(包括除法),浮点数运算则可 ...

  7. PN结的形成

    P型半导体 在纯净的硅晶体中掺入3价元素如硼,使之取代晶格中硅原子的位置,就形成了P型半导体.在P型半导体中,空穴为多字,自由电子为少子,主要靠空穴导电.掺入的杂质越多,空穴的浓度就越大,导电性就越强 ...

  8. unity渲染层级关系小结(转存）

    最近连续遇到了几个绘制图像之间相互遮挡关系不正确的问题,网上查找的信息比较凌乱,所以这里就把自己解决问题中总结的经验记录下来. Unity中的渲染顺序自上而下大致分为三层. 最高层为Camera层,可 ...

  9. Replication的犄角旮旯（八）-- 订阅与发布异构的问题

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  10. SQL入门经典(七) 之脚本和批处理

    什么是脚本.我们前面学的CREATE TABLE <table name> ,USE <database name>这些都是脚本,为什么用脚本.脚本存储到文件中并且可以重复利用 ...