The line chart tootip of echarts in vue dynamically displays data according to the mouse movement and the selected 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>