首页 前端知识 vue中echarts的折线图tootip根据鼠标移入和选择的lenged不同自定义样式和动态显示数据

vue中echarts的折线图tootip根据鼠标移入和选择的lenged不同自定义样式和动态显示数据

2024-07-22 01:07:07 前端知识 前端哥 921 643 我要收藏

vue中echarts的折线图tootip根据鼠标移入和选择的lenged不同动态显示数据

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

   <template>
    <div>
         <div id="brokenLineDom"></div>
    </div>
</template>
<script>
    import *as echarts from 'echarts'
    var myChart
export default {
   data(){
       return {
           
       }
   },
   mounted(){
         this.$nextTick(()=>{
             this.threeRelease()
         })
   },
   methods:{
       threeRelease(){
             let seriesName=[]
             let monthList=[]
             let LnStatInfoMonthsVoData=[
                {'areaName':'全省','eightMonth':160,'elevenMonth':255,'fiveMonth':300,'fourMonth':400,'nineMonth':500,'oneMonth':600,'sevenMonth':700,'sixMonth':800,'tenMonth':900,'threeMonth':1000,'twelveMonth':1100,'twoMonth':1200,'monthCount':[2,12,15,22,33,12,56,78,90,100,67,99]},
                {'areaName':'成都市','eightMonth':80,'elevenMonth':150,'fiveMonth':30,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[20,120,125,212,323,152,576,778,980,1040,637,919]},
                {'areaName':'绵阳市','eightMonth':20,'elevenMonth':20,'fiveMonth':32,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[211,122,154,252,363,172,568,781,90,1001,675,991]},
                {'areaName':'德阳市','eightMonth':10,'elevenMonth':20,'fiveMonth':99,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[222,112,155,22,343,12,536,78,930,100,637,995]},
                {'areaName':'南充市','eightMonth':10,'elevenMonth':20,'fiveMonth':21,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[23,12,155,22,33,132,56,778,920,100,67,994]},
                {'areaName':'自贡市','eightMonth':10,'elevenMonth':10,'fiveMonth':89,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[211,12,165,232,33,12,56,778,90,100,67,919]},
                {'areaName':'达州市','eightMonth':10,'elevenMonth':10,'fiveMonth':55,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[24,132,175,22,33,127,565,787,90,100,67,949]},
                {'areaName':'乐山市','eightMonth':5,'elevenMonth':10,'fiveMonth':66,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[277,172,175,242,337,12,565,78,90,100,67,939]},
                {'areaName':'内江市','eightMonth':5,'elevenMonth':10,'fiveMonth':30,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[286,152,175,262,373,122,56,718,90,100,67,919]},
                {'areaName':'宜宾市','eightMonth':10,'elevenMonth':5,'fiveMonth':10,'fourMonth':4,'nineMonth':5,'oneMonth':6,'sevenMonth':7,'sixMonth':8,'tenMonth':9,'threeMonth':10,'twelveMonth':11,'twoMonth':12,'monthCount':[290,123,145,222,133,125,546,786,960,1400,647,949]}
            ]
            let LnStatInfoMonths=[4,5,6,7,8,9,10,11,12,1,2,3]
            let formatterName=[['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市'],
                ['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市'],
                ['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市'],
                ['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市'],
                ['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市'],
                ['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市'],
                ['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市'],
                ['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市'],
                ['达州市','乐山市','成都市','绵阳市','内江市','德阳市','宜宾市','自贡市','南充市']
            ]
            let formatterData=[
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15],
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15],
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15],
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15],
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15],
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15],
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15],
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15],
                [1,2,3,4,5,6,7,8,9,11,12,13,14,15]
            ]
             let defaultColor=['#6260CE','#397ADB','#60A7E6','#62C9D1','#67BD99','#45C3AF','#ECAF2F','#CA4343','#D84E4E','#95307D','#F20B07','#BE5C5C','#037D48','#07F28B','#42B983']
             let hexToRgba=(hex,opacity)=>{
                     let rgbaColor='';
                     let reg=/^#[\da-f]{6}$/i;
                     if(reg.test(hex)){
                         rgbaColor=`rgba(${parseInt('0x'+hex.slice(1,3))},${parseInt('0x'+hex.slice(3,5))},${parseInt('0x'+hex.slice(5,7))},${opacity})`
                     }
                     return rgbaColor
             }
             for(let i=0;i<LnStatInfoMonthsVoData.length;i++){
                     seriesName.push(LnStatInfoMonthsVoData[i].areaName)
                     monthList.push(LnStatInfoMonthsVoData[i].monthCount)
             }
             let option={
                     title:{
                          text:'四川省市区数据',
                          textStyle:{
                              fontSize:16,
                              color:'#fff'
                          },
                          left:'1%',
                          top:'1%'
                     },
                     color:defaultColor,
                     tooltip:{
                          trigger:'axis',
                          formatter:function(data){  
                            // 需要定制的数据就在formatter这个方法中去实现,我这里的需求是默认显示全省的总数据,鼠标移入
                            //   后的现实全省以及各市的数据,就需要手动组装一下tootip现实窗的数据了,然后判断不是全省的情况就现实具体的市的数据

                                    if(data[0].seriesName=='全省'){
                                          if(data[0].axisValue=='1'){ // 这里的1是指横坐标的月份数据
                                                let index1=LnStatInfoMonths.map(item=>item).indexOf(1) // 获取一月在月数据的数组中的下标,然后再去数据数组中找到对应的下标的数据
                                                let m=[]
                                                m=formatterName[index1]&&formatterName[index1].map((name,i)=>({name,value:formatterData[index1][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+1+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='2'){
                                                let index2=LnStatInfoMonths.map(item=>item).indexOf(2)
                                                let m=[]
                                                m=formatterName[index2]&&formatterName[index2].map((name,i)=>({name,value:formatterData[index2][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+2+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='3'){
                                                let index3=LnStatInfoMonths.map(item=>item).indexOf(3)
                                                let m=[]
                                                m=formatterName[index3]&&formatterName[index3].map((name,i)=>({name,value:formatterData[index3][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+3+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='4'){
                                                let index4=LnStatInfoMonths.map(item=>item).indexOf(4)
                                                let m=[]
                                                m=formatterName[index4]&&formatterName[index4].map((name,i)=>({name,value:formatterData[index4][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+4+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='5'){
                                                let index5=LnStatInfoMonths.map(item=>item).indexOf(5)
                                                let m=[]
                                                m=formatterName[index5]&&formatterName[index5].map((name,i)=>({name,value:formatterData[index5][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+5+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='6'){
                                                let index6=LnStatInfoMonths.map(item=>item).indexOf(6)
                                                let m=[]
                                                m=formatterName[index6]&&formatterName[index6].map((name,i)=>({name,value:formatterData[index6][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+6+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='7'){
                                                let index7=LnStatInfoMonths.map(item=>item).indexOf(7)
                                                let m=[]
                                                m=formatterName[index7]&&formatterName[index7].map((name,i)=>({name,value:formatterData[index7][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+7+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='8'){
                                                let index8=LnStatInfoMonths.map(item=>item).indexOf(8)
                                                let m=[]
                                                m=formatterName[index8]&&formatterName[index8].map((name,i)=>({name,value:formatterData[index8][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+8+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='9'){
                                                let index9=LnStatInfoMonths.map(item=>item).indexOf(9)
                                                let m=[]
                                                m=formatterName[index9]&&formatterName[index9].map((name,i)=>({name,value:formatterData[index9][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+9+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='10'){
                                                let index10=LnStatInfoMonths.map(item=>item).indexOf(10)
                                                let m=[]
                                                m=formatterName[index10]&&formatterName[index10].map((name,i)=>({name,value:formatterData[index10][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+10+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='11'){
                                                let index11=LnStatInfoMonths.map(item=>item).indexOf(11)
                                                let m=[]
                                                m=formatterName[index11]&&formatterName[index11].map((name,i)=>({name,value:formatterData[index11][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+11+'</span>'+'</br>'+tip+'</div>'
                                          }else if(data[0].axisValue=='12'){
                                                let index12=LnStatInfoMonths.map(item=>item).indexOf(12)
                                                let m=[]
                                                m=formatterName[index12]&&formatterName[index12].map((name,i)=>({name,value:formatterData[index12][i]}))
                                                let provinceData={}
                                                provinceData.name='全省'
                                                provinceData.value=data[0].value
                                                m.unshift(provinceData)
                                                let tip=''
                                                m.forEach((item)=>{
                                                     tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+item.name+'<span style="font-weight:bold;padding-left:15px">'+item.value+'</span>'+'</br>'+'</div>'
                                                })
                                                return '<div>'+'<span style="font-weight:bold">'+12+'</span>'+'</br>'+tip+'</div>'
                                          }
                                    }else{
                                          if(data[0].axisValue=='1'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='2'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='3'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='4'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='5'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='6'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='7'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='8'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='9'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='10'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='11'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                          if(data[0].axisValue=='12'){
                                                let tip=''
                                                tip+='<div>'+'<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background:#6260CE">'+'</span>'+data[0].seriesName+'<span style="font-weight:bold;padding-left:15px">'+data[0].value+'</span>'+'</br>'+'</div>'
                                                return '<div>'+'<span style="font-weight:bold">'+data[0].axisValue+'</span>'+'</br>'+tip+'</div>'
                                          }
                                    }
                          }
                     },
                     legend:{
                        orient: 'horizontal',
                        right:'5%',
                        textStyle:{
                            color:'#fff',
                            fontSize:'14'
                        },
                        data:seriesName,
                        selected:{
                            '全省':true,
                            '成都市':false,
                            '绵阳市':false,
                            '达州市':false,
                            '南充市':false,
                            '德阳市':false,
                            '宜宾市':false,
                            '乐山市':false,
                            '内江市':false,
                            '自贡市':false,
                        },
                        selectedMode:'single'
                     },
                     grid:{
                        left:'3%',
                        right:'4%',
                        bottom:'3%',
                        containLabel:true
                     },
                     xAxis:[
                        {
                            type:'category',
                            boundaryGap:false,
                            axisLine:{
                                show:true,
                                lineStyle:{
                                    color:'#fff',
                                    fontSize:8
                                }
                            },
                            data:LnStatInfoMonths
                        }
                     ],
                     yAxis:[
                        {
                            type:'value',
                            splitLine:{
                                show:true
                            },
                            axisline:{
                                show:false,
                                lineStyle:{
                                    color:'#fff',
                                    fontsize:8
                                }
                            }
                        }
                     ],
                     series:[]
             };
             function setSeries(){
                   let series=[]
                   for(let i=0;i<seriesName.length;i++){
                        series.push({
                               name:seriesName[i],
                               type:'line',
                               stack:'',
                               symbol:'none',
                               data:monthList[i],
                               symbol:'circle',
                               showAllSymbol:true,
                               symbolSize:0,
                               smooth:true,
                               lineStyle:{
                                    normal:{
                                        color:defaultColor[i]
                                    }
                               },
                               itemStyle:{
                                   normal:{
                                       label:{
                                            show:true,
                                            position:'top',
                                            textStyle:{
                                                color:'#fff'
                                            }
                                       }
                                   }
                               },
                               symbol:'circle',
                               areaStyle:{
                                   normal:{
                                        color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                                                offset:0,
                                                color:hexToRgba(defaultColor[i],0.7)
                                        },{
                                                offset:1,
                                                color:hexToRgba(defaultColor[i],0.3)
                                        }])
                                   }
                               }
                        })
                   }
                   return {'series':series}
             }
             let seriesdataList=setSeries();
             option.series=seriesdataList['series'];
             option.legend.data=seriesName;

             myChart=echarts.init(document.getElementById('brokenLineDom'))
            //  if(myChart!=null&&myChart!=''&&myChart!=undefined){
            //          myChart.dispose()
            //  }
             myChart.setOption(option)
             window.addEventListener('resize',function(){
                      myChart.resize()
             })
        }
   }
}
</script>
<style>
     #brokenLineDom{
          width: 100vw;
          height: 80vh;
          background-color: #333;
     }
</style>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14196.html
标签
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!