使用echart百度图表的一些经验（1）

   myChart.setOption({          
            tooltip: {
                trigger : 'axis'
            },
            color:['#36b0de','#6fc536','#b46b51'],
            legend: {
          	  align: 'left',
          	  x: 20,            	  
          	  data:[
                      {
                    	    name:'支付宝',
                    	    icon:'circle'
                      },
                      {
                      	name:'微信',
                      	icon:'circle'
                        },
                        {
                        	name:'银行卡',
                        	icon:'circle'
                        },
                    ]
          },     
          grid : {
                left : '3%',
                right : '4%',
                bottom : '3%',
                containLabel : true
            },
          calculable : true,
          xAxis: {
                type : 'category',
                boundaryGap : false,
                data:data.dateList,              
              
            },
          yAxis: { 
                  type : 'value'              
          },
          series: [{
                name: '支付宝',
                type: 'line',
                stack : '支付宝金额',               
                data: data.alipayDataList,              
                
            },
            {
                name: '微信',
                type: 'line',
                stack : '微信金额',                                
                data:data.wxpayDataList,              
                
            },
            {
                name: '银行卡',
                type: 'line',
                stack : '银行卡金额',                
                data:data.bankpayDataList,              
                
            },]
        });   

1.echarts折线图不堆叠设置

   折线图堆叠的重要参数是stack，只要将stack的值设置为不相同，就不会堆叠了。标红位置为stack

     series: [{
                name: '支付宝',
                type: 'line',
                stack : '支付宝金额',               
                data: data.alipayDataList,              
                
            },
            {
                name: '微信',
                type: 'line',
                stack : '微信金额',                                
                data:data.wxpayDataList,              
                
            },
            {
                name: '银行卡',
                type: 'line',
                stack : '银行卡金额',                
                data:data.bankpayDataList,              
                
            },]

2.legend 图例的相关修改

 legend: {
                align: 'left',
                x: 20,                  
                data:[
                      {
                            name:'支付宝',
                            icon:'circle'
                      },
                      {
                          name:'微信',
                          icon:'circle'
                        },
                        {
                            name:'银行卡',
                            icon:'circle'
                        },
                    ]
          },    
 align指的是图例的位置，要结合下边的x，y一起使用。

icon是图例的形状，可以任意修改。效果图如下：