Echarts折线图案例
公司要求做个累计收益图,没用过Echarts,再这里记录一下
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="~/scripts/jquery/jquery-1.11.0.js"></script>
<script src="~/scripts/echart/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px; height: 400px;"></div>
<input type="button" id="region0" value="全部"/>
<input type="button" id="region3" value="最近三个月"/>
<input type="button" id="region1" value="最近一个月"/>
</body>
</html>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var income_chart = echarts.init(document.getElementById('main'));
//累计收益chart图表初始化
function init_income_chart() {
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis',
formatter: function formatter(params) {
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
var con = params[i].value;
con = con + "%";
res += (res === '' ? '' : '<br/>') +
'<a href="#" style="color:' +
params[i].color +
';font-size:20px;text-decoration:none;">●</a>' +
params[i].seriesName +
' : ' +
con;
}
return res;
}
},
legend: {
right: '5%',
data: ['策略累计收益', '股票累计收益']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: []
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
formatter: function formatter(value) {
return value + '%';
}
}
},
series: [
{
name: '策略累计收益',
type: 'line',
smooth: true,
// data: [120, 132, 101, 134, 90, 230, 210]
data: []
},
{
name: '股票累计收益',
type: 'line',
smooth: true,
// data: [220, 182, 191, 234, 290, 330, 310]
data: []
}
]
};
// 使用刚指定的配置项和数据显示图表。
income_chart.setOption(option);
//数据加载完之前先显示一段简单的loading动画
income_chart.showLoading();
}
//首次加载累计收益chart图表
function load_income_chart(region,code) {
$.ajax({
url: "/T0/GetCumulativeIncomeTrend/",
type: "POST",
dataType: "JSON",
data: { region: region, code: code },
success: function (data) {
if (data.code === 200) {
console.log(data.data);
var names = data.data.dateTime; //时间
var strRate = data.data.strRate; //策略累计收益
var ccRate = data.data.ccRate; //股票累计收益
income_chart.hideLoading(); //隐藏加载动画
income_chart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [
{
name: '策略累计收益',
data: strRate
}, {
name: '股票累计收益',
data: ccRate
}
]
});
}
},
error: function (data) {
}
});
}
$("#region0").click(function() {
load_income_chart(0, "000001");
});
$("#region1").click(function () {
load_income_chart(1, "000001");
});
$("#region3").click(function () {
load_income_chart(3, "000001");
});
//JS入口
$(document).ready(function () {
init_income_chart();
load_income_chart(0,"000001");
});
</script>
Controller控制器
/// <summary>
/// 创建人 谭福超
/// 日期 2018年12月5日
/// 累计收益走势图
/// </summary>
/// <param name="region">区间选择</param>
/// <param name="code">股票代码</param>
/// region 0-全部,1-最近一个月,3-最近三个月
/// <returns></returns>
[HttpPost]
public JsonResult GetCumulativeIncomeTrend(int region,string code)
{
ResultObjOfEchartsDatajao5I8VC ro = null;
{
ServiceClientHelper<BFT0Strategy_ContractClient>.Invoke(new BFT0Strategy_ContractClient(), client =>
{
ro = client.BFGetCumulativeIncomeTrend(SessionHelper.Token, region,code);
});
}
return Json(ro, JsonRequestBehavior.DenyGet);
}
api服务
/// <summary>
/// 创建人 谭福超
/// 日期 2018年12月6日
/// 股票和策略累计收益图
/// </summary>
/// <param name="region">0-</param>
/// <param name="code"></param>
/// <param name="validateGuid"></param>
/// <returns></returns>
public ResultObj<EchartsData> BFGetCumulativeIncomeTrend(string validateGuid,int region, string code)
{
var ro = new ResultObj<EchartsData>();
var bll = new t_bf_t0strategy_BLL();
try
{
if (!string.IsNullOrWhiteSpace(code))
{
var data = bll.GetCumulativeIncomeTrend(region,code);
ro.code = (int)EHttpStatus.OK;
ro.msg = "请求成功！";
ro.data = data;
}
else
{
ro.code = (int)EHttpStatus.ParameterError;
ro.msg = "参数错误！";
}
}
catch (Exception ex)
{
ro.code = (int)EHttpStatus.ParameterError;
ro.msg = "服务器内部错误！";
LogHelper.WriteLog("BFGetCumulativeIncomeTrend()->\r\n\t【Message】：" + ex.Message + "\r\n\t【StackTrace】：" + ex.StackTrace + "\r\n\t【Parameters】：" );
}
return ro;
}
Echarts折线图案例的更多相关文章
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图，数据切换时（最近七天）绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- echarts折线图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- echarts 折线图点击高亮
echarts中注册事件很多 ,记录下今天做的折线图点击高亮: 查了api,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大. ...
随机推荐
- Vue状态管理之Vuex
Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 ...
- java 11 实现RFC7539中指定的ChaCha20和Poly1305两种加密算法, 代替RC4
实现 RFC 7539的ChaCha20 and ChaCha20-Poly1305加密算法 RFC7748定义的秘钥协商方案更高效, 更安全. JDK增加两个新的接口 XECPublicKey 和 ...
- （十六）qt-udp，组播
基本流程 简单聊天程序 #include "server.h" #include <QApplication> #include "client.h" ...
- JS学习笔记Day23
一.什么是Promise (一)Promise是ES6新增的解决异步(非阻塞)中存在的问题而产生的构造函数 二.Promise中的三种状态 pending(进行中) resoved(成功后) reje ...
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- java 根据经纬度坐标计算两点的距离算法
/** * @Desc 根据经纬度坐标计算两点的距离算法<br> * @Author yangzhenlong <br> * @Data 2018/5/9 18:38 */ p ...
- Swift 4 Hex Color
上点干货,写个extension, 可以通过hex值去设置Color,以及通过UIColor的color case 去得到hex值. extension UIColor { var toHex ...
- SQL Server TVPs 批量插入数据
在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...
- 【汇编语言】Win10 安装 DOXBox0.74
1.下载package包,有用的只有前两个. 2.解压 masm 压缩文件,我把它解压到D盘. 3.双击 图1 中的 DOXBox 0.74.exe 进行安装. 4.打开 DOXBox0.74 (参考 ...
- java 数组中的方法
//要import java.util.Arrays: fill(int[] a,int value);//对a数组进行全部用value填充 fill(int[] a,int fromIndex,in ...