echarts初始化怎么加载两个折线图

4 篇文章 0 订阅
1 篇文章 0 订阅
  var a=new Array();                     //这里定义一个数组类
        var month=new Array();
  $.post('${basePath}/userinfo.do/userInfo',{},
  function(data){
   
  for(var i=0;i<data.dayaUpLoadCount.length;i++){
 
  a[i]=data.dayaUpLoadCount[i];   //添加数组
  }
 
  var content="";
 
  for(var i=0;i<data.listMonth.length;i++){
  // alert(data.listMonth[i]);
  content+="<option value='"+data.listMonth[i].month+"'>"+data.listMonth[i].monthStr+"</option>";
 
  }
 
  var yearContent="";
  for(var i=0;i<data.yearList.length;i++){
  yearContent+="<option value='"+data.yearList[i]+"'>"+data.yearList[i]+"年"+"</option>";
 
  }
 
  $("#stYear").html(yearContent);
 
  $("#st").html(content);
  myChart.setOption({
         xAxis: {
           data: data.days
         },
         series: [{
             // 根据名字对应到相应的系列
            name: '下载量',
             data: data.dayCount
         },{
          name:'上传量',
          data:a                          //放入data数据中
          
         }],
 
     });  
   
  }
 
 
 
  ,'json');
  
由于我是AI语言模型,无法生成图片,但是我可以给你一个示例代码,你可以自己在Echarts官网上运行并查看两个折线图的效果。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="chart1" style="width: 600px;height:400px;"></div> <div id="chart2" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var chart1 = echarts.init(document.getElementById('chart1')); var chart2 = echarts.init(document.getElementById('chart2')); // 指定图表的配置项和数据 var option1 = { title: { text: '折线图示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20] }] }; var option2 = { title: { text: '折线图示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["1月","2月","3月","4月","5月","6月"] }, yAxis: {}, series: [{ name: '销量', type: 'line', data: [150, 230, 224, 218, 135, 147] }] }; // 使用刚指定的配置项和数据显示图表。 chart1.setOption(option1); chart2.setOption(option2); </script> </body> </html> ``` 其中,`option1`和`option2`分别为两个折线图的配置项和数据,它们是通过`echarts.init`方法初始化Echarts实例,最后通过`chart1.setOption(option1)`和`chart2.setOption(option2)`来显示图表。你可以根据自己的需求修改这些配置项和数据,生成自己想要的折线图
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

马怀啸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值