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图调用多个接口的更多相关文章

  1. echarts 图的点击事件(含:点击重复触发的问题及其解决方法)

    今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图  但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...

  2. js调用百度地图接口

    原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...

  3. 使用wsimport和JAX-WS调用Web Service接口

    本文简单举例说明如何使用wsimport工具和JAX-WS API调用Web Service接口.此方法的优点:使用JDK自带的工具和API接口,无需依赖第三方库. JDK版本:1.8.0_141开发 ...

  4. 调用微信JS-SDK接口上传图片

    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...

  5. C#调用国家气象局天气预报接口

    原文:C#调用国家气象局天气预报接口 一.需求 最近,刚好项目中有天气预报查询功能的需求,要求录入城市名称,获取该城市今日天气信息及相关气象生活辅助信息等. 例如:查询北京市天气 结果为: 今日北京天 ...

  6. python调用C语言接口

    python调用C语言接口 注:本文所有示例介绍基于linux平台 在底层开发中,一般是使用C或者C++,但是有时候为了开发效率或者在写测试脚本的时候,会经常使用到python,所以这就涉及到一个问题 ...

  7. java调用CXF WebService接口的两种方式

    通过http://localhost:7002/card/services/HelloWorld?wsdl访问到xml如下,说明接口写对了. 2.静态调用 // 创建WebService客户端代理工厂 ...

  8. java获取https网站证书,附带调用https:webservice接口

    一.java 获取https网站证书: 1.创建一个java工程,新建InstallCert类,将以下代码复制进去 package com; import java.io.BufferedReader ...

  9. asp.net mvc 如何调用微信jssdk接口:分享到微信朋友(圈)| 分享到qq空间

    如何在asp.net mvc 项目里, 调用微信jssdk接口,现实功能: 分享到微信朋友(圈)| 分享到qq空间 1 创建一个Action,准备一些数据,初始化数据(签名): /// <sum ...

随机推荐

  1. sql server导入excel等数据

    1.首先打开并登陆sql server数据库 2.选择要将表导入的数据库,右击选择任务-->导入数据 3.在弹出的窗口中选择下一步 4.在弹出的窗口中选择数据源,也就是从哪种文件导入,sql s ...

  2. iBase4J项目笔记

    目录: 1 数据库密码加密 2 service层概述 3 web层概述 4 后端CRUD 4.1 READ 4.2 UPDATE 4.3 CREATE 4.4 DELETE 5 facade层概述 1 ...

  3. Angular03 将数据添加到组件中

    准备:已经搭建好angular-cli环境.知道如何创建组件 一.将一个数据添加到组件中 1 创建一个新的组件 user-item 2 将组件添加到静态模板中 3 为组件添加属性,并利用构造器赋值 4 ...

  4. JS对表单的操作

    JS对表单中的style的操作,包括复选框技术 废话不多说直接上文件代码!!! 功能:全选\反选,鼠标监测变颜色 <html> <head> <meta charset= ...

  5. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-004Table per class hierarchy(@Inheritance..SINGLE_TABLE)、@DiscriminatorColumn、@DiscriminatorValue、@DiscriminatorFormula)

    一.结构 You can map an entire class hierarchy to a single table. This table includes columns for all pr ...

  6. 面试经常问的一个问题:final、finalize、finally

    http://m.blog.csdn.net/u010980446/article/details/51493658

  7. JavaWeb_泛型(Generic)

    JDK5以前,对象保存到集合中就会失去其特性,取出时通常要程序员手工进行类型的强制转换,这样不可避免的就会引发程序的一些安全性问题.例如: ArrayList list = new ArrayList ...

  8. Android二维码扫描功能的集成开发

    二维码开发主要依赖ZXing开源项目 项目地址:https://github.com/zxing/zxing 这个开源项目可以扫描一维,和二维码, 一维码指的是书后面的条形码 首先配置ZXing库和A ...

  9. springcloud中通过Filter实现微服务跨域访问允许

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.an ...

  10. c#创建Table

    private void BindDatazhangting() { DataTable dt = new DataTable(); dt.Columns.Add("channel" ...