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

最新推荐文章于 2024-05-11 15:48:27 发布
最新推荐文章于 2024-05-11 15:48:27 发布
阅读量1.6k 收藏 2
点赞数
文章标签： echarts vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46577631/article/details/127263118
版权

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>
代码De搬运工
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue+Echarts 折线图markPoint凸显某条数据的实现过程
weixin_45542021的博客
06-29 1322
在vue项目中使用echarts完成一个简单的折线图，使用markPoint凸显当前选中的数据，并自定义部分样式。
鼠标拖拽建立选区，选中元素
qq_42241862的博客
07-14 778
个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com 近段时间做一个编辑器，就需要一个鼠标拖拽选区的功能，方便批量选中元素，进行相应操作，所有就有了这篇文章。 效果展示 建立选区组件 1、要想选中元素，肯定要先建立选区 根据两个坐标点确定选区位置，并绘制出选区 根据两个坐标删除选区的宽与高 let size = computed(() => { let width = props.endPoint.x === 0
echarts 折线图如何鼠标放上显示数据
weixin_71574589的博客
11-18 3265
echarts 折线图如何鼠标放上显示数据
echarts环形图 legend文字过长显示...鼠标移动上展示全称
最新发布
vfjcgg的博客
05-11 307
【代码】echarts环形图 legend文字过长显示...鼠标移动上展示全称。
vue中使用Echarts自定义折线图+粒度选项+自定义legend
weixin_45419441的博客
08-12 5147
大家好,今天所分享的案例是在vue中使用echarts自定义折线图(复杂点是通过点击勾选单个选项卡显示对应的折线图,通过切换粒度,可以拆分为日粒度,周粒度,月粒度,x轴时间轴也做对应的变化) 本案例主要涉及到 通过日期选择器选择对应的时间段 通过选项卡点击单选显示对应的x轴 通过粒度 可以切换不同的x轴 自定义legend 点击重置 重置选项卡以及图表 实现双y轴(一般数值和百分比轴) 本案例是一个完成的图表功能(附带代码) 第一步使用echarts图表 安装依赖...
echarts中框选范围并获得框选区域中的坐标
weixin_56581632的博客
02-25 4366
1.首先，在option中设置brush属性， 然后此时图的右上角会出现框选按钮 点击上面的图标之后，即可框选，在框选完成之后，使用brushEnd时间拿到相应的数据 myChart.on('brushEnd', function (params) {}) console.log（params） 里面的coordRanges中的数组就是需要的数据，coordRanges[0]是x轴的index，而coordRanges[1]就是y轴的具体范围。 ...
echarts 折线图默认只有拐点，鼠标移入折线显示
m0_62082930的博客
08-07 1253
【代码】echarts 折线图默认只有拐点，鼠标移入折线显示。
vue+echarts实现动态折线图的方法与注意
10-14
在Vue.js框架中结合ECharts库创建动态折线图，主要涉及到以下几个关键步骤和技术要点： 1. **引入ECharts库**： 在项目中安装ECharts依赖，可以通过npm或yarn进行安装： ``` npm install echarts ``` 2. **在...
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
在本文中，我们将探讨如何使用Vue.js和ECharts库来创建一个可拖动节点的折线图，并且支持拖动方向和上下限的设置。首先，我们要了解Vue和ECharts的基本概念。 Vue.js是一个轻量级的前端JavaScript框架，它采用组件...
在vue中使用echarts(折线图的demo,markline用法)
10-15
在Vue项目中集成ECharts，可以利用其丰富的图表功能来展示数据。本示例主要讲解如何在Vue中创建一个折线图，并应用markline（标记线）功能，以实现基准线的效果。 首先，确保你已经安装了Vue CLI，然后通过npm或...
HTML+VUE+Echarts折线图让某一个点闪烁
11-04
HTML+VUE+Echarts折线图让某一个点闪烁
vue中使用echarts折线图配置总结
SunFlower914的博客
07-22 3559
最后附重点：如何添加一个平行于x轴的标线？ 1.取消鼠标移入折线图时的虚线指示器、 2.改变legend形状及颜色样式、 3. 为Y轴设置最大值与最小值的同时避免Y轴轴线消失、 4.取消平行于X轴的Y轴横线与刻度线、 6.取消折线图线段上面的圆点、 7.让数据一样的折线段从同一起点出发：取消 stack: 'Total' 这一行... 8.解决部分线段内部数据为空时，页面折线中断的问题......
vue中echarts实现双图联动展示数据，折线图+饼图（附带源码）
weixin_45745641的博客
05-03 5956
前言 最近写项目，有一块功能需要使用双图进行联动的展示，左边折线图，鼠标移动折线图焦点，能把每个点的数据情况展示到饼图上，这里记录一下，希望对大家有帮助 实现的效果： 实现步骤： 首先先实现折线图的部分： option = { color: ['#c6e8ad', '#00DDFF', '#37A2FF', '#FFBF00', '#f3a19e'], legend: {}, tooltip: { trigger: 'axis', showContent:
vue 项目为echarts图添加点击事件 及常见的两问题分析
cjFrontEnd的博客
10-08 3551
vue 项目里用echarts已经很长一段时间了，项目的配置项什么的也查了不少， 但是隔断时间换个项目， 很多内容都容易忘记，或者掉进之前踩过的坑， 所以下面做个简单的记录： 步骤一： 本地安装echarts npm install echarts --save 步骤二： 在main文件里面先引入echars： import echarts form ‘echars’; ...
采用Qt快速绘制多条曲线（折线），跟随鼠标动态显示线上点的值（基于Qt的开源绘图控件QCustomPlot进行二次开发）
u014613270的博客
09-19 2567
采用Qt快速绘制多条曲线（折线），跟随鼠标动态显示线上点的值（基于Qt的开源绘图控件QCustomPlot进行二次开发）
vue+echarts中国地图数据可视化展示
xiaozhidian的博客
02-22 3551
vue+echarts中国地图数据可视化展示
vue - vue使用echarts实现中国地图和点击省份进行查看
qq_43886365的博客
11-30 9827
vue使用echarts实现中国地图和点击省份进行查看
echarts柱状图、折线图 渐变色，填充渐变色，鼠标移入样式，双y轴
weixin_54106595的博客
02-21 4909
echarts 图表：柱状图渐变色。折线图填充色，折线图鼠标移入样式，双y轴
vue+echarts折线图拐点样式的配置和教程（简单易懂）
热门推荐
意初的博客
06-28 1万+
效果图一，没触发emphasis时（鼠标移上去的时候，拐点的颜色和样式） 效果图二，触发emphasis 项目场景： 1）点击拐点激活颜色，首先定义默认激活下标.2）其次，用到了echarts的点击函数定义拐点选中值等3）最后在Option里，调用拐点color的回调函数自定义颜色...
springboot和vue怎么根据数据库表中的不同活动类型活动把数据在前端动态显示echarts图
05-24
可以使用Vue和ECharts结合的方式来实现根据数据库表中不同活动类型动态显示ECharts图表。具体步骤如下： 1. 在后端使用Spring Boot开发RESTful API，查询数据库表中的不同活动类型数据，并返回给前端。 2. 在前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码De搬运工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值