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,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大. ...
随机推荐
- maven settings.xml--需要保存到用户/.m2文件夹下
<?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...
- mysql 修改表结构、表字段注释语句
虽然现在有各种各样的工具可以直接对表结构进行修改,但是我还是喜欢使用语句进行修改.以下语句是对表增加字段.给字段加注释的语句 alter table orders add column isupdyq ...
- 数据库基础——跟着【克里斯学SQL】哈哈。
前言: 很多同学呀,对数据库的操作仅仅只能在于Navicat 等第三方可视化的工具上面!!!! 这是可怕的,数据库的操作十分的重要,甚至,他是程序最重要的部分. 面试经常问题, 了解那个数据? 写一个 ...
- C语言博客作业06——结构体&文件
C语言博客作业06--结构体&文件 1.本章学习总结 1.1思维导图 1.2.本章学习体会 在本周的学习中,我们学习了关于结构体和文件的内容.结构体的本身并不难,但以结构体为基础的链表还是让我 ...
- Entity Framework系列教程汇总
翻译自http://www.entityframeworktutorial.net/,使用EF几年时间了,一直没有系统总结过,所以翻译这一系统文章作为总结,由于英语功底有限,翻译的可能有些问题,欢迎指 ...
- Java反射-修改字段值, 反射修改static final修饰的字段
反射修改字段 咱们从最简单的例子到难, 一步一步深入. 使用反射修改一个private修饰符的变量name 咱们回到主题, 先用反射来实现一个最基础的功能吧. 其中待获取的name如下: public ...
- MySql的Communications link failure解决办法
在使用JDBC连接mysql时可能会遇到以下错误: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications li ...
- 20155324《网络对抗》Exp2 后门原理与实践
20155324<网络对抗>Exp2 后门原理与实践 20155324<网络对抗>Exp2 后门原理与实践 常用后门工具实践 Windows获得Linux Shell 在Win ...
- Studio 5000编程：一种累计时间的编程方法
前言:在很多项目中,需要累计设备的运行.停机.故障时间,当然实现该功能的编程方法也是多种多样,各有千秋,不过有的方法累计误差会越来越大,比如:在连续任务里用定时器来累计时间,就存在一定的误差.本文分享 ...
- linux Centos7下安装python3及pip3
先去python官网下载python3安装包 执行命令:wget https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 安装zlib-dev ...