echarts折线图多条线不同的线不同的的单位

桃扇骨 2022-01-23 12:39 1198阅读 0赞

JS代码：  
opt3=\{  
            grid:\{  
                top:50,  
                right:20,  
                bottom:30,  
                left:60  
            \},  
            tooltip : \{  
                   formatter: "\{a\} : \{c\}A",  
                   show: true //显示提示框  
            \},  
            legend:\{  
                top:0,  
                orient:'horizontal',  
                textStyle:\{  
                    padding:0,  
                    lineHeight:20,  
                    fontSize:14,  
                    color:'\#fff'  
                \},  
                data:\['A相电流','B相电流','C相电流','剩余电流'\]  
            \},  
            xAxis:\{  
                data:\[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23\],  
                axisLine:\{  
                    lineStyle:\{  
                        color:'\#efeff1'  
                    \}  
                \},  
                axisTick:\{  
                    show:false  
                \},  
                axisLabel:\{  
                    show:true,  
                    color:'\#efeff1',  
                    align:'center',  
                    margin:10,  
                    fontSize:14,  
                    lineHeight:20,  
                    interval:0  
                \},  
                boundaryGap:false  
            \},  
            yAxis:\{  
                axisLine:\{  
                    lineStyle:\{  
                        color:'\#efeff1'  
                    \}  
                \},  
                axisTick:\{  
                    show:false  
                \},  
                axisLabel:\{  
                    show:true,  
                    color:'\#efeff1',  
                    align:'right',  
                    margin:10,  
                    fontSize:14  
                \},  
                splitLine:\{  
                    show:false,  
                    lineStyle:\{  
                        color:'\#ecedf1'  
                    \}  
                \}      
            \},  
            series:\[  
                \{  
                    name:'A相电流',  
                    type:'line',  
                    lineStyle:\{  
                        color:'\#76b1ff',  
                        width:2  
                    \},  
                    /\* label:\{  
                        formatter: '\{c\}mA',  
                        show: true  
                    \}, \*/  
                    itemStyle:\{  
                        borderWidth:2,  
                        borderType:'solid',  
                        borderColor:'\#76b1ff',  
                        color:'\#76b1ff'  
                    \},  
                    data:\[34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23\]  
                \},\{  
                    name:'B相电流',  
                    type:'line',  
                    lineStyle:\{  
                        color:'\#09c7cf',  
                        width:2  
                    \},  
                    itemStyle:\{  
                        borderWidth:2,  
                        borderType:'solid',  
                        borderColor:'\#09c7cf',  
                        color:'\#09c7cf'  
                    \},  
                    data:\[11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34\]  
                \},\{  
                    name:'C相电流',  
                    type:'line',  
                    lineStyle:\{  
                        color:'\#ffff00',  
                        width:2  
                    \},  
                    itemStyle:\{  
                        borderWidth:2,  
                        borderType:'solid',  
                        borderColor:'\#ffff00',  
                        color:'\#ffff00'  
                    \},  
                    data:\[52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11\]  
                \},\{  
                    name:'剩余电流',  
                    type:'line',  
                    lineStyle:\{  
                        color:'\#ff3300',  
                        width:2  
                    \},  
                    tooltip : \{  
                        formatter: "\{a\} : \{c\}mA"  
                    \},   
                    itemStyle:\{  
                          
                        borderWidth:2,  
                        borderType:'solid',  
                        borderColor:'\#ff3300',  
                        color:'\#ff3300'  
                    \},  
                    data:\[23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52,23,34,11,52\]  
                \}  
            \]  
        \};

效果图1：  
![20190603205436578.png][]

效果图2：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmcyMHk4_size_16_color_FFFFFF_t_70][]

[20190603205436578.png]: /images/20220123/00c6735cccd844b295281f3ef2e5c176.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmcyMHk4_size_16_color_FFFFFF_t_70]: /images/20220123/d98ffa96853f458098eab92ea90c38da.png