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,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大. ...
随机推荐
- MySQL物理备份 xtrabackup
MySQL 备份之 xtrabackup | innobackupex Xtrabackup 介绍 Xtrabackup 是一个对 InnoDB 做数据备份的工具,支持在线热备份(备份时不影响数据读写 ...
- postgreSQL可视化工具pgAdmin3 导入表结构和数据
材料:.backup文件.postgreSQL(pgAdmin3) 1.新建一个数据库2.选中数据库右键还原,弹出框中选择本地计算机备份文件路径---->点击还原(选择一个修改时间最早和最晚的还 ...
- Project 的ProjectTypeGuids和Solution的Project节点说明
https://www.cnblogs.com/jackking/p/6220085.html ProjectTypeGuids和Project 节点说明 <ProjectGuid>{BE ...
- Day057--django
1. http协议 请求的格式(request ---浏览器向服务器发送的消息) 请求方式: URL HTTP/1.1\r\n K1:V1\r\n K2:V2\r\n \r\n 请求正文/请求体(ge ...
- gzy的摄影梦
好像当身高180的摄影师啊. 记录一下素材,等自己有相机了,就一一实现. 竟然有人在看哎. 一袭红衣的女子,将手伸出窗外,开心的看这漫天大雪. 今天的晚霞,近处是蓝色,颜色逐渐变淡,一直延伸到远处.( ...
- I2C(二) linux2.6
目录 I2C(二) linux2.6 总线驱动 关键结构 入口 i2c_add_adapter 硬件操作 设备驱动 入口 注册 attach_adapter eeprom_detect i2c_att ...
- OCC上下文设置显示模式
#include <AIS_InteractiveContext.hxx> 通过AIS_InteractiveContext::SetDisplayMode()函数来设置 void Se ...
- 使用Ueditor编辑器上传图片总结；
今天使用Ueditor编辑器上传图片一直出问题,在网上找了多种方法,最后总结如下: Ueditor编辑器是百度开发的编辑器,要在jsp页面添加Ueditor编辑器,需要以下几步: (1)到 http: ...
- 新装的SSMS一打开就显示VS许可证过期，但VS又运行正常，解决方法。
1.出现问题如下图: 2.解决方法 打开控制面板->程序卸载->找到Microsoft Visual Studio *** Shell(****),右击-修复. 3.修复好了,然后重启电脑 ...
- Idea主题下载
http://www.riaway.com/ 将jar导入