網頁中echarts雙折線圖折線回折

• 問題描述
• • 原因分析
  • 解決
  • 相關注意

問題描述

今天終于解決了這個bug,用一個折線圖顯示兩種資料的資料變化時出現了x軸的data顯示的順序部分錯亂的問題.

原因分析

經排查發現是option中的data設定的方法出現了問題,不應該在有兩種資料的一張折線圖中的series中的每一種折線的data放入var data1=[[0,0],[0,0],[0,0],[0,0]];這樣的資料,在另一個折線data2中如果資料少的話,将兩個data資料放在一起比對,x軸上的資料順序就會發生錯亂,

解決

正确方法應該是在xAxis中單獨設定x軸的資料var x = [0,1,2,3,4,5];

然後在series裡的每個折線都單獨設定yList = [10,20,30,40]這樣的一維數組,這樣就不會發生回折問題了.

var line_chart_option = {
                tooltip: {
                    trigger: 'axis',
                    showContent: true,
                },
                title: {
                    textStyle:{ 
                        color:'#fff'
                    },
                    text: text,
                    subtext: subtext,
                },
                legend: {
                    data: ['最低薪資', '最高薪資'],
                    textStyle:{ 
                        color:'#fff'
                    },
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                label:{
                       textStyle:{ 
                            color:'#fff'
                        }
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        formatter: '{value} 元',
                        //axisTick: {length:5},
                        textStyle:{ 
                            color:'#fff'
                        },
                    }, 
                    itemStyle: {
                        color:'#fff'
                    },
                    data:xList,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 份',
                        textStyle:{ 
                            color:'#fff'
                        },
                    },
                    itemStyle: {
                        color:'#fff'
                    },

                },
                color: ['#FF4949','#FFA74D'],   //折線圖線的顔色 
                dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider',
                    },{
                        type: 'inside',
                        orient: 'vertical'
                    },{
                        type: 'slider',
                        orient: 'vertical'
                    }
                ],
                series: [{     
                        name: '最低薪資',
                        type: 'line',
                        smooth:true,
                        data: low_list_y,
                    },{
                       
                        name: '最高薪資',
                        type: 'line',
                        smooth:true,
                        data:high_list_y,

                    }]
            };
           

相關注意

如果是series的data中設定的是二維數組,xAxis中沒設定data,那麼點的點選事件(params.value[0],params.value[1])分别對應xAxis的data和series的data都是一維數組的(params.name,params.value),其中params.name是以字元串的形式出現的,如果想要轉換成int類型需要加parseInt(params.name)方法