echarts相关设置，看注释

var myChart1 = echarts.init(document.getElementById("charts1"));

  var option = {
             title: {  
                  text: '订单维度导航使用率 ',    //标题  
                  textStyle: {  
                      fontWeight: 'normal',              //标题颜色  
                      color: '#c2c2c2',
                      fontSize:14,
                      x:"center",
                  },  
              },  
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            legend: {
                bottom: '10px',
                data:['Hawaii', '腾讯','Hawaii导航订单','Hawaii总订单','腾讯导航订单','腾讯总订单'],
                textStyle: {  
                      fontWeight: 'normal',              
                      color: '#F1F1F3' ,
                  }, 
               selected: {//把下列的默认为不显示
                  '腾讯':false,
                  'Hawaii总订单':false,
                  '腾讯导航订单':false,
                  '腾讯总订单':false,
               } 
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                     axisLine:{  
                          lineStyle:{  
                              color:'#c2c2c2',  
                              width:2  
                          }  
                      },  
                    type: 'category',
                    boundaryGap: true,
                    data:date
                },
                // {
                //     type: 'category',
                //     boundaryGap: true,
                //     data: []
                // }
            ],
            yAxis: [
                {
                    axisLine:{  
                          lineStyle:{  
                              color:'#c2c2c2',  
                              width:2  
                          }  
                      },
                    type: 'value',
                    name: '百分比',
                    boundaryGap: [0, '100%'],//不设置可自适应
                    splitLine: {
                          show: false
                      }
                },
                {
                    axisLine:{  
                          lineStyle:{  
                              color:'#c2c2c2',  
                              width:2  
                          }  
                      },
                    type: 'value',
                    scale: true,
                    name: '订单量',
                    splitLine: {
                          lineStyle: {
                              type: 'dashed',//条形统计图的背景线的设置
                              color:'#c2c2c2'
                          }
                      },
                    }
            ],
            grid: [
                {x: '7%', y: '17%', width: '80%'}//图的位置大小的调整
            ],
            series: [
                {
                    name:'Hawaii',
                    type:'line',
                    itemStyle:{
                        normal:{
                            lineStyle: {
                                color: "#F28E3D" //图标颜色
                            }
                            
                        }
                    },
                    data:order_rate_by_hawaii
                },
                {
                    name:'腾讯',
                    type:'line',
                    itemStyle:{
                        normal:{
                            lineStyle: {
                                color: "#92BEAA" //图标颜色
                            }
                            
                        }
                    },
                    data:order_rate_by_soso
                },
                {
                    name:'Hawaii导航订单',
                    type:'bar',
                    // xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle:{
                        normal:{
                          
                                color: "#E58365" //图标颜色


                            
                        }
                    },
                    data:navi_order_num_by_hawaii
                },
                {
                    name:'Hawaii总订单',
                    type:'bar',
                    // xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle:{
                        normal:{
                           
                                color: "#CB6D6C" //图标颜色
                            
                            
                        }
                    },
                    data:order_num_by_soso
                },
                {
                    name:'腾讯导航订单',
                    type:'bar',
                    // xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle:{
                        normal:{                              
                                color: "#8DB7A5" //图标颜色
                            
                        }
                    },
                    data:navi_order_num_by_soso
                },
                {
                    name:'腾讯总订单',
                    type:'bar',
                    // xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle:{
                        normal:{        
                                color: "#6F8D94" //图标颜色        
                        }
                    },
                    data:order_num_by_soso
                },
            ]
        };
        myChart1.setOption(option);
        window.onresize = myChart1.resize();//图表的自适应