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,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大. ...
随机推荐
- 小计：Shopee批量删除修复~附脚本
需求 昨天浪的时候,无意之间看到文职人员在一个个删除违禁商品,大概23个店铺,每个店铺500多个商品,页面是用Ajax异步加载的,每删一个就需要等几秒,粗略估计一下用时:9h左右 然后了解了下是什么情 ...
- springMVC统一异常处理
Spring MVC处理异常有3种方式: 使用Spring MVC提供的简单异常处理器SimpleMappingExceptionResolver: 实现Spring的异常处理接口HandlerExc ...
- yarn安装使用
npm install yarn -g // 到指定文件夹 yarn init // 生成package.json文件 yarn init报错 Can't answer a question unle ...
- Django web编程1 -- 创建项目和应用
python:3.7.2 Django:2.1.7 1.创建虚拟环境 虚拟环境是系统的一个位置,可以在其中安装包,并将其与其他python包隔离. 创建目录,命名为learning_log,并切换到这 ...
- Flink 核心技术浅析（整理版）
1. Flink简介 Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink流执行引擎(streaming dataflow engine),提供支 ...
- NCE损失(Noise-Constrastive Estimation Loss)
1.算法概述 假设X是从真实的数据(或语料库)中抽取的样本,其服从一个相对可参考的概率密度函数P(d),噪音样本Y服从概率密度函数为P(n),噪音对比估计(NCE)就是通过学习一个分类器把这两类样本区 ...
- 乙方渗透测试之Fuzz爆破
前言 爆破在渗透测试中,对技术的要求不高,但是对技巧和字典的要求就很高了,本篇整理下平时学到的一些爆破思路和技巧(偏web渗透登陆),当你无措可施时,暴力破解是最好的方式. 世界上最可怕的事情是你的习 ...
- python—异常
异常是在程序中不可避免的,当程序遇到一个异常时程序就会停止,可以使用try—except进行处理异常,即便在出现异常程序也可以继续运行. 语法: try: 代码 except 异常名: 处理异常的代码 ...
- Lambda表达式概念与基本语法
Lambda表达式是Java 8的重要更新,一个被广大开发者期待已久的新特性.Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码来创建只有一个抽象方法的接口(这种接口被 ...
- parallels desktop for mac安装虚拟机 之parallelsdesktop密钥 以及 parallels desktop安装win10的办公推荐可以提高办公效率
大家好我是一个老程序员了. 用惯了 mac , 平时工作都是在 mac安装虚拟机,之后就是mac 安装 win10. 因为很多办公软件 mac 都不好用,主要是跟同事沟通不方便,当然mac 的软件还 ...