echarts图调用多个接口
html:
<div id="sentimentMain1" style="width:960px;height:500px;margin:20px auto;"></div>
js:
var myChart1 = echarts.init(document.getElementById('sentimentMain1')); var colors = ['#5793f3','#d14a61', '#675bba'];var selectOne='20ma'
var selectTwo='50ma'
var option1={
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data:['','index','']
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},//右上角功能键去掉:option里在toolbox:{。。。}里,不要的图标删掉。如果一个图标都不用,就把整个toolbox删掉。
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: true
},
data:[] ,
},
yAxis: [
{
type: 'value',
name: '',
position: 'left',
offset:50,
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: function (value, index) {
return value+"%";
}
}
},
{
type: 'value',
name: 'index',
position: 'right',
min:0,
max:0,
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: function (value, index) {
return value.toFixed(2);
}
}
},
{
type: 'value',
name: '',
position: 'left',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: function (value, index) {
return value+"%";
}
}
}
],
dataZoom: [{
type: 'inside',
start: 0,
end: 100
}, {
start: 98,
end: 100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '10%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'',
type:'line',
data: []
},
{
name:'index',
type:'line',
yAxisIndex: 1,
data: []
},
{
name:'',
type:'line', yAxisIndex: 2,
data: []
}
]
}
function myChart1_chart(myChart1,selectOne,selectTwo,option){
var data1=[];
var data2=[];
var data3=[];
var date = [];
var index_min;
var index_max;
var url="stock/indexApi";
$.post(url,{},function(msg){
msg = JSON.parse(msg);
if (msg.code == '') {
//success
for (var i = ; i < msg.data.length; i++) {
data1.push(parseFloat(msg.data[i].price).toFixed());
date.push(msg.data[i].date);
}
//取最大值和最小值
index_min=parseFloat(data1[]);
index_max=parseFloat(data1[]);
for(var k=;k<data1.length;k++){
if(parseFloat(data1[k])>index_max){
index_max=parseFloat(data1[k]);
}
if(parseFloat(data1[k])<index_min){
index_min=parseFloat(data1[k]);
}
}
myChart1.setOption({
legend: {
data:[selectOne,'index',selectTwo]
},
xAxis: {
data: date,
},
yAxis: [
{
name: selectOne,
},
{
name: 'index',
min:index_min,
max:index_max,
},
{
name: selectTwo,
}
],
series: [
{
name:selectOne,
data: data2
},
{
name:'index',
data: data1
},
{
name:selectTwo,
data: data3
}
]
})
} else {
//error
}
});
var url="stock/maApi";
$.post(url,{ma_type:selectOne,data_type:},function(msg){
msg = JSON.parse(msg);
if (msg.code == '') {
for (var i = ; i < msg.data.length; i++) {
data2.push(msg.data[i].perc);
}
// myChart1.hideLoading();
myChart1.setOption({
legend: {
data:[selectOne,'index',selectTwo]
},
xAxis: {
data: date,
},
yAxis: [
{
name: selectOne
},
{
name: 'index',
min:index_min,
max:index_max
},
{
name: selectTwo
}
],
series: [
{
name:selectOne,
data: data2
},
{
name:'index',
data: data1
},
{
name:selectTwo,
data: data3
}
]
})
} else {
//error
}
});
var url="stock/maApi";
$.post(url,{ma_type:selectTwo,data_type:},function(msg){
msg = JSON.parse(msg);
if (msg.code == '') {
//success
for (var i = ; i < msg.data.length; i++) {
data3.push(parseFloat(msg.data[i].perc).toFixed());
}
myChart1.setOption({
legend: {
data:[selectOne,'index',selectTwo]
},
xAxis: {
data: date,
},
yAxis: [
{
name: selectOne,
},
{
name: 'index',
min:index_min,
max:index_max
},
{
name: selectTwo,
}
],
series: [
{
name:selectOne,
data: data2
},
{
name:'index',
data: data1
},
{
name:selectTwo,
data: data3
}
]
})
} else {
//error
}
});
myChart1.setOption(option1);
} myChart1_chart(myChart1,selectOne,selectTwo,option1);
echarts图调用多个接口的更多相关文章
- echarts 图的点击事件(含:点击重复触发的问题及其解决方法)
今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图 但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...
- js调用百度地图接口
原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...
- 使用wsimport和JAX-WS调用Web Service接口
本文简单举例说明如何使用wsimport工具和JAX-WS API调用Web Service接口.此方法的优点:使用JDK自带的工具和API接口,无需依赖第三方库. JDK版本:1.8.0_141开发 ...
- 调用微信JS-SDK接口上传图片
最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...
- C#调用国家气象局天气预报接口
原文:C#调用国家气象局天气预报接口 一.需求 最近,刚好项目中有天气预报查询功能的需求,要求录入城市名称,获取该城市今日天气信息及相关气象生活辅助信息等. 例如:查询北京市天气 结果为: 今日北京天 ...
- python调用C语言接口
python调用C语言接口 注:本文所有示例介绍基于linux平台 在底层开发中,一般是使用C或者C++,但是有时候为了开发效率或者在写测试脚本的时候,会经常使用到python,所以这就涉及到一个问题 ...
- java调用CXF WebService接口的两种方式
通过http://localhost:7002/card/services/HelloWorld?wsdl访问到xml如下,说明接口写对了. 2.静态调用 // 创建WebService客户端代理工厂 ...
- java获取https网站证书,附带调用https:webservice接口
一.java 获取https网站证书: 1.创建一个java工程,新建InstallCert类,将以下代码复制进去 package com; import java.io.BufferedReader ...
- asp.net mvc 如何调用微信jssdk接口:分享到微信朋友(圈)| 分享到qq空间
如何在asp.net mvc 项目里, 调用微信jssdk接口,现实功能: 分享到微信朋友(圈)| 分享到qq空间 1 创建一个Action,准备一些数据,初始化数据(签名): /// <sum ...
随机推荐
- 【272】ArcPy处理数据
参考:ArcPy 函数列表(按字母顺序) 参考:在arcgis上用python脚本(arcpy)做数据批处理 1. 导入 ArcPy,定义 Workspace >>> import ...
- Emulator PANIC: Could not open: AVD2.3.1
这是这两年的sdk才需要这样,以前这样根本没错的 在环境变量 里面增加一个系统变量ANDROID_SDK_HOME,值就是当前的系统用户文件夹的位置.比如c:\\Users\xxx(不要加.andro ...
- css实现三角形(转)
css实现三角形 (2012-09-10 14:17:26) 标签: css 三角形 杂谈 分类: 网页制作 css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重 ...
- ZROI2018提高day6t1
传送门 分析 我们发现这个四元组可以分解成一个逆序对拼上一个顺序对,这个线段树搞搞然后乘一下就可以求出来了,但是我们发现可能有(a,b)为逆序对且(b,c)为顺序对的情况,所以要进行容斥,我们只需要枚 ...
- 初识Servlet(JSP)
Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. Servle ...
- com.fasterxml.jackson.databind.JavaType.isReferenceType
<dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-map ...
- 错误页设置,设置HTTP状态码404,500(八)
web.xml设置错误跳转(注意,路径必须以斜杠开头)
- 未能加载文件或程序集“Interop.SQLDMO”或它的某一个依赖项
程序运行没问题,当您配置好IIS后,打开安装向导时出现以下错误信息: 解决办法为:在IIS应用程序池中“启用32位应用程序”, 1,打开IIS应用程序池,选中相应应用程序池,点击右侧“高级设置” 2, ...
- Xamarin.Forms(一) 学习笔记
Xamarin.Forms是Xamarin跨平台开发app的跨平台的一个Framework,要使用这套Framework,要从XAML说起. XAML是同通过xml的方式来描述控件和动作,可以通过编译 ...
- InnoDB记录压缩及使用分析
此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这篇文章,源于RDS组内的一次饭后闲聊,两位小伙伴在探讨InnoDB启用压缩后的种种,比如在磁盘上是怎么存放 ...