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

本文链接：https://blog.csdn.net/wang20y8/article/details/90758846

本文介绍了如何使用Echarts库创建一个折线图，并为每条线设置不同的单位。通过示例代码展示了如何配置tooltip、legend、x轴和y轴等属性，使得A、B、C相电流和剩余电流四条线的数据以mA为单位清晰呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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：

效果图2：