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,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大. ...
随机推荐
- linux服务器显卡崩了怎么处理
在登录界面出现分辨率特别大,整个图形界面特别大,并且怎么也登录不上去的情况时 对于这种情况,一般就是显卡驱动崩了的原因,所以我们可以首先检查显卡驱动是否有问题 nvidia -smi 如果出现说驱动链 ...
- 论decltype和auto的区别
论decltype和auto的区别 decltype和auto的区别 ①对引用变量的不同之处:auto将引用变量赋给变量后,变量的类型为引用变量所对应的变量的类型.而decltype则是为引用类型 ...
- ubuntu安装nginx pagespeed
一.自动安装 使用最新稳定版本的ngx_pagespeed自动安装依赖项并构建最新的主线版nginx,请运行: $ sudo bash <(curl -f -L -sS https://ngxp ...
- 移动开发day2_css预处理器_flex布局
css预处理器 一种技术,可以提高编写css代码的技术而已. 有3种预处理器常见 less sass stylues less使用流程 编写符合less语法的less文件 使用工具 将less编译成 ...
- XSS绕过<>进行测试
大家都知道,普遍的防御XSS攻击的方法是在后台对以下字符进行转义:<.>.’.”,但是经过本人的研究发现,在一些特殊场景下,即使对以上字符进行了转义,还是可以执行XSS攻击的. 首先看一个 ...
- 关于NPOI导入的时候有时出现乱码解决办法
手上这个项目之前客户说过导入的时候回出现乱码问题,一直没用重视,现在自己做做一个功能,乱码经常出现,开始以为是代码的问题,最后百度了试了很多方法猜找到解决办法: 乱码页面如下: 解决办法: 打开IIS ...
- 【ARC 063F】Snuke's Coloring 2
Description There is a rectangle in the xy-plane, with its lower left corner at (0,0) and its upper ...
- 12、Filter（拦截器）
一.过滤器(Filter):又称拦截器.实现Filter接口的类我们称之为Filter(过滤器或拦截器),Filter可以对用户访问的资源进行拦截.例如:客户端发送请求是,先将请求拦截下来,判断用户是 ...
- robot framework
一.步骤 1.创建工程和测试套件 2.创建测试案例 3.写脚本,运行案例 4.查看运行结果 report报告主要是概括性的报告,总结案例执行情况.log报告是更为详细的案例步骤的报告. 二.RIDE工 ...
- vue 移动端项目总结（mint-ui）
跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require ...