Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

首页地图渲染之国际化(三)—趋势图联动显示



实现效果

1.三个趋势图一起联动显示

var myChart = echarts.init(document.getElementById('main'), 'infographic');       
            myChart.setOption(option = {
                tooltip:{
                    trigger: 'axis',
                    formatter: function (params, ticket, callback) {
                        var titleData1;
                        var titleData2;
                        var titleData3;
                        var color1;
                        var color2;
                        var color3;
                        var time= params[0].name;
                        var titleHTML;
                        for (var i = 0; i < params.length; i++) {
                            titleData = params[i].data;
                           if ( params[i].seriesName==($.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_poorareacount'))){
                                titleData1=(isNaN(String(titleData))?"--":(titleData));
                                color1 = params[i].color;
                            }else if ( params[i].seriesName==($.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_dealingorder'))){
                                titleData2=(isNaN(String(titleData))?"--":(titleData));
                                color2 = params[i].color;
                            }else if ( params[i].seriesName==($.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_overtimeorder'))){
                                titleData3=(isNaN(String(titleData))?"--":(titleData));
                                color3 = params[i].color;
                            }

                        }
                        titleHTML=time+'<br><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + color1 + '"></div>&nbsp;&nbsp'
                                + $.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_poorareacount')+' : ' +  titleData1+'<br><br>'
                                +time+'<br><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + color2 + '"></div>&nbsp;&nbsp'
                                +$.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_dealingorder')+ ':' +  titleData2+'<br><br>'
                                +time+'<br><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + color3 + '"></div>&nbsp;&nbsp'
                                +$.i18n.prop('com_zte_lte_processingpoorqualitregion_header_poorqualitregion_overtimeorder')+ ':' +  titleData3;
                        return titleHTML;
                    }
/*position: function (pos, params, dom, rect, size) {
      // 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
             var obj = {top: 60};
                   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                         return obj;
                           } */
//position: ['50%', '50%']   
                }, 

                axisPointer: {
                    link: {xAxisIndex: 'all'},
                    label: {
                        backgroundColor: '#777'
                    }
                },

                grid: [
                {               
                    height: '20%',
                    top:'16%'
                }, {                
                    top: '49%',   //44
                    height: '20%'  //20
                 },
                 {              
                    top: '80%',   //44
                    height: '20%'  //20
                 }

                ],  

                xAxis:[{
                    gridIndex: 0,//定义图标所在位置,不给默认为0,即第一个,而且必须按照从小到大的
                    type : 'category',
                    position:'bottom',
                    axisLine:{
                        lineStyle:{//坐标轴颜色
                            type:'dashed',
                            color:"#FFFFFF"
                        }
                    },  
                    splitLine:{
                        show:false,//网格是否显示
                        interval: 0,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    axisLabel: {
                        show: true,
                        interval: 2,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    data : chartData.data1.x
                },{
                    gridIndex: 1,
                    type : 'category',  
                    position:'bottom',
                    axisLine:{
                        lineStyle:{
                            type:'dashed',
                            color:"#FFFFFF"
                        }
                    },  
                    splitLine:{
                        show:false,//网格是否显示
                        interval: 0,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    axisLabel: {
                        show: true,
                        interval: 2,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    data : chartData.data2.x
                },{
                    gridIndex: 2,
                    type : 'category',  
                    position:'bottom',
                    axisLine:{
                        lineStyle:{
                            type:'dashed',
                            color:"#FFFFFF"
                        }
                    },  
                    splitLine:{
                        show:false,//网格是否显示
                        interval: 0,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    axisLabel: {
                        show: true,
                        interval: 2,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    data : chartData.data3.x
                },
                {
                    gridIndex: 0,//定义图标所在位置,不给默认为0,即第一个,而且必须按照从小到大的
                    type : 'category',
                    position:'top',
                    axisLine:{
                        lineStyle:{//坐标轴颜色
                            type:'dashed',
                        }
                    },  
                    splitLine:{
                        show:false,//网格是否显示
                        interval: 0,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // axisLabel: {
     //                    show: true,
     //                    textStyle: {
     //                        color: '#fff'
     //                    }
     //                },
                    // data : chartData.data1.x
                },{
                    gridIndex: 1,
                    type : 'category',  
                    position:'top',
                    axisLine:{
                        lineStyle:{
                            type:'dashed',
                            color:"#FFFFFF"
                        }
                    },  
                    splitLine:{
                        show:false,//网格是否显示
                        interval: 0,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // axisLabel: {
     //                    show: true,
     //                    textStyle: {
     //                        color: '#fff'
     //                    }
     //                },
                    // data : chartData.data2.x
                },{
                    gridIndex: 2,
                    type : 'category',  
                    position:'top',
                    axisLine:{
                        lineStyle:{
                            type:'dashed',
                            color:"#FFFFFF"
                        }
                    },  
                    splitLine:{
                        show:false,//网格是否显示
                        interval: 0,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    // axisLabel: {
     //                    show: true,
     //                    textStyle: {
     //                        color: '#fff'
     //                    }
     //                },
                    // data : chartData.data3.x
                }],


                yAxis : [{
                    type : 'value', 
                    axisLabel:{
                        formatter:'{value}',
                        show: true,
                            textStyle: {
                                color: '#fff'
                            }
                    },  
                    axisLine:{
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    splitNumber:5,  
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    yAxisIndex:0,
                    min:0,
                    max:getMax(chartData.data1.y)
                },
                {
                    gridIndex: 1,
                    type : 'value', 
                    axisLabel:{
                        formatter:'{value}',
                        show: true,
                            textStyle: {
                                color: '#fff'
                            }
                    },   

                    axisLine:{
                        lineStyle:{
                            type:'dashed'
                        }
                    },  
                    splitNumber:5,
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    min:0,
                    max:getMax(chartData.data2.y)
                 },
                {
                    gridIndex: 2,
                    type : 'value', 
                    axisLabel:{
                        formatter:'{value}',
                        show: true,
                            textStyle: {
                                color: '#fff'
                            }
                    },   

                    axisLine:{
                        lineStyle:{
                            type:'dashed'
                        }
                    },  
                    splitNumber:5,
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    min:0,
                    max:getMax(chartData.data3.y)
                 }
                 ,{
                    type : 'value',
                    gridIndex: 0,
                    position:'right',   
                    axisLine:{
                        lineStyle:{
                            type:'dashed',
                            color:"#FFFFFF"
                        }
                    },
                },
                {
                    gridIndex: 1,
                    type : 'value', 
                    position:'right',
                    axisLine:{
                        lineStyle:{
                            type:'dashed',
                            color:"#FFFFFF"
                        }
                    },
                },{
                    gridIndex: 2,
                    type : 'value', 
                    position:'right',
                    axisLine:{
                        lineStyle:{
                            type:'dashed',
                            color:"#FFFFFF"
                        }
                    },
                }

                ],  

                series : [
                {
                    name:chartData.data1.name,
                    type:'line',                         
                    smooth:true,
                    showAllSymbol: true,
                    data:chartData.data1.y
                },                  
                {
                    name:chartData.data2.name,
                    type:'line',                         
                    smooth:true, 
                    yAxisIndex:1,
                    xAxisIndex:1,
                    showAllSymbol: true,
                    data:chartData.data2.y
                },                  
                {
                    name:chartData.data3.name,
                    type:'line',                         
                    smooth:true, 
                    yAxisIndex:2,
                    xAxisIndex:2,
                    showAllSymbol: true,
                    data:chartData.data3.y
                }
                ]
            });
            if(allProvinceNames[0].indexOf(chartData.titleData.province)==-1){
                analysis_type = 'province'
                choseProvince=chartData.titleData.province
                $('.right_info_box_button').removeClass('notAllowed').removeClass('analysisBackgroundNot')
            }
            return myChart;
        }

转载自:https://blog.csdn.net/this_tall_people/article/details/78853576