JAVA开发人员画图表总结(ECHARTS)
随着大数据的到来,越来越多的数据需求需要开发,而这些需求不可避免需要使用JS画出图表,而大多后端JAVA开发人员对JS不太熟悉,导致身心倍受折磨,今天记录以下最近我使用echarts的步骤,供参考:
一、环境说明
前端框架:echarts、Jquery
后端框架:SPRINGMVC
二、开发过程
前端代码:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height: 400px"></div> <script type="text/javascript"> $(function() { $.ajax({ url : "http://www.qunar.com/getJson", //获取JSON地址 dataType : "text", success : function(data) { var result = eval(data); // 路径配置 require.config({ paths : { 'echarts' : 'http://echarts.baidu.com/build/echarts', 'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts' } }); var myChart; // 使用 require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function(ec) { // 基于准备好的dom,初始化echarts图表 myChart = ec.init(document.getElementById('main')); // 为echarts对象加载数据 myChart.setOption(result[0]); }); } }); }); </script> </body> </html>
对于我来说,编写这些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的值就可以.
名称 | 描述 |
---|---|
{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类
/// <summary> /// 定义一个Series类 设置其每一组sereis的一些基本属性 /// </summary> class Series { /// <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<double> data { get; set; } }
接着将Serial实例化并将其转化为json格式(必须用大神器:Newtonsoft.Json.dll),代码如下图
private void ShowChart() { //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类 List<Series> seriesList = new List<Series>(); Series series1 = new Series(); series1.name = "actual"; series1.type = "bar"; series1.data = new List<double>(){ 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 = new List<double>() { 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属性即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="echarts/echarts.js"></script> </head> <body> <div id="main" style=" height:400px;"></div> </body> </html> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'echarts' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data: ['Actual', 'Budget'] }, xAxis: [ { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] } ], yAxis: [ { type: 'value'//Y轴显示的类型,默认为value } ], series: [] }; //ajax动态获取数据 $.ajax({ type: 'post', url: 'ajax.ashx?action=ShowChart', data: {}, dataType: 'json', async: false, success: function (result) { if (result) { // 获取json值 option.series = result.series; // 为echarts对象加载数据 myChart.setOption(option); } }, error: function () { alert("Error"); } }); } ); </script>
所见即所得
当然,最后奉上源码!
转载来源:https://www.cnblogs.com/youmeng/p/4874897.html