技术文章转载|JAVA开发人员画图表总结（ECHARTS） ajax动态加载数据|画图表总结（

JAVA开发人员画图表总结（ECHARTS）随着大数据的到来，越来越多的数据需求需要开发，而这些需求不可避免需要使用JS画出图表，而大多后端JAVA开发人员对JS不太熟悉，导致身心倍受折磨，今天记录以下最近我使用echarts的步骤，供参考：
一、环境说明前端框架：echarts、Jquery
后端框架：SPRINGMVC
二、开发过程前端代码：
文章图片

Insert title here - 锐客网

文章图片

对于我来说，编写这些JS最困难了。
1、首先需要AJAX获取数据
2、需要与echarts相互结合
3、option这个对象是核心，后端需要生成的也是这个对象。
获取的后端数据：

[{"calculable":true,"graphType":null,"legend":{"data":["报表"]},"series":[{"data":[1,2,3],"name":"报表","type":"bar"}],"title":{"color":"red","fontSize":24,"link":"http://www.qunar.com","subText":"报表","text":"去哪儿-报表"},"tootip":{"show":true},"xAxis":{"data":[1,2,3],"type":"category"},"yAxis":{"data":[],"type":"value"}}]

后端如何生成这些JSON数据就不在这里说了，任何提供REST服务或者SpringMVC都能实现。这里需要注意的是，如果想要长期使用echarts，建议还是好好阅读文档，因为任何的小错误，都可能导致效果相差很大。

转载来源：https://www.cnblogs.com/liqiu/p/3761353.html

echarts在.Net中使用实例(二) 使用ajax动态加载数据前一篇文章链接：echarts在.Net中使用实例(一) 简单的Demo
通过上一篇文章可以知道和echarts参考手册可知，series字段就是用来存储我们显示的数据，所以我们只需要用ajax来获取series的值就可以.
option

名称	描述
{color}backgroundColor	全图默认背景，（详见backgroundColor），支持rgba，默认为无，透明
{Array} color	数值系列的颜色列表，（详见color），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取
{boolean}renderAsImage	非IE8-支持渲染为图片，（详见renderAsImage）
{boolean}calculable	是否启用拖拽重计算特性，默认关闭，（详见calculable，相关的还有 calculableColor， calculableHolderColor，nameConnector， valueConnector）
{boolean}animation	是否开启动画，默认开启，（详见 animation，相关的还有 addDataAnimation， animationThreshold，animationDuration， animationDurationUpdate ， animationEasing）
{Object} timeline	时间轴（详见timeline），每个图表最多仅有一个时间轴控件
{Object} title	标题（详见title），每个图表最多仅有一个标题控件
{Object} toolbox	工具箱（详见toolbox），每个图表最多仅有一个工具箱
{Object} tooltip	提示框（详见tooltip），鼠标悬浮交互时的信息提示
{Object} legend	图例（详见legend），每个图表最多仅有一个图例，混搭图表共享
{Object}dataRange	值域选择（详见dataRange）,值域范围
{Object}dataZoom	数据区域缩放（详见dataZoom）,数据展现范围选择
{Object}roamController	漫游缩放组件（详见roamController）,搭配地图使用
{Object} grid	直角坐标系内绘图网格（详见grid）
{Array \| Object}xAxis	直角坐标系中横轴数组（详见xAxis），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴
{Array \| Object}yAxis	直角坐标系中纵轴数组（详见yAxis），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴
{Array} series	驱动图表生成的数据内容（详见series），数组中每一项代表一个系列的特殊选项及数据

首先定义一个Serial类

文章图片

/// /// 定义一个Series类设置其每一组sereis的一些基本属性 /// class Series { /// /// sereis序列组id /// //public int id //{ //get; //set; //}/// /// series序列组名称 /// public string name { get; set; }/// /// series序列组呈现图表类型(line、column、bar等) /// public string type { get; set; }/// /// series序列组的数据为数据类型数组 /// public List data { get; set; } }

文章图片

接着将Serial实例化并将其转化为json格式(必须用大神器：Newtonsoft.Json.dll)，代码如下图

文章图片

privatevoid ShowChart() { //考虑到图表的series数据为一个对象数组这里额外定义一个series的类 List seriesList = new List(); Series series1 = new Series(); series1.name = "actual"; series1.type = "bar"; series1.data = https://www.it610.com/article/new List(){ 26061649.1, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00 }; Series series2 = new Series(); series2.name = "Budget"; series2.type = "bar"; series2.data = https://www.it610.com/article/new List() { 28176503.36, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 2777777.00, 0.00, 0.00, 0.00, 0.00, 0.00, }; seriesList.Add(series1); seriesList.Add(series2); var newObj = new { series = seriesList }; string strJson = ToJson(newObj); WriteJson(strJson); }public static string ToJson( object obj) { return NewtonsoftJson(obj); }public static string NewtonsoftJson(object obj) { return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None); }private static void WriteJson(string str) { HttpContext.Current.Response.Write(str); //HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式 HttpContext.Current.Response.End(); }

文章图片

前台代码只需要用ajax来获取值并赋给option的serial属性即可

文章图片

文章图片

所见即所得