vue⾥echarts实现折线图tooltip⾃定义样式
效果
实现
先编写⽗组件：
<stacked-line-chart :tooltipData="tooltipData":monthNameData="monthNameData":allApplyCountData="allApplyCountData"
:hallApplyCountData="hallApplyCountData":netApplyCountData="netApplyCountData"
></stacked-line-chart>
<script>
export default{
data(){
return{
tooltipData:['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06','2020-07','2020-09','2020-10','2020-12','2021-01','2021-02'], monthNameData:['1⽉','2⽉','3⽉','4⽉','5⽉','6⽉','7⽉','9⽉','10⽉','12⽉','1⽉','2⽉'],// x轴⽉份数据
allApplyCountData:[120,132,101,134,90,230,210,120,132,101,134,90],// 总申办量
hallApplyCountData:[320,332,301,334,390,330,320,320,332,301,334,390],// 实体⼤厅申办量
netApplyCountData:[820,932,901,934,1290,1330,1320,820,932,901,934,1290],// ⽹上⼤厅申办量
};
},
}
</script>
在编写StackedLineChart组件
<template>
<div ref="stackedLineChart"class="stacked-line-chart-box"></div>
</template>
<script>
import*as echarts from'echarts';
export default{
name:'StackedLineChart',
props:{
// ⽤于提⽰
tooltipData:{
type: Array,
default:()=>{
return[];
}
},
/
/ x轴⽉份数据
monthNameData:{
type: Array,
default:()=>{
return[];
return[];
}
},
// 总申办量
allApplyCountData:{
type: Array,
default:()=>{
return[];
}
},
// 实体⼤厅申办量
hallApplyCountData:{
type: Array,
default:()=>{
return[];
}
},
/
/ ⽹上⼤厅申办量灵鹫宫
netApplyCountData:{
type: Array,
default:()=>{
return[];
}
},
},
data(){
return{
option:{
tooltip:{
trigger:'axis',
padding:[8,10,8,10],
axisPointer:{
type:'line',
lineStyle:{
color:'rgba(0, 0, 0, 0.65)'
},
},
// ⾃定义提⽰框的内容
formatter:(params)=>{
let result =ltipData[params[0].dataIndex]+"</br>";
params.forEach(el =>{
result +=`${this.lor)}${el.riesName}：${el.data}</br>` })
return result;
}
},
color:['#9A47FF','#1890FF','#2FC25B'],
斯托夫人legend:{
data:['总申办量','实体⼤厅申办量','⽹上⼤厅申办量'],
left:'left',
icon:'circle',
padding:0,
itemGap:24,
itemWidth:6,
itemHeight:6,
textStyle:{
color:'#333',
padding:[2,0,0,0],
lineHeight:20
}
},
grid:{
left:'0',
right:'2%',
bottom:'0',
containLabel:true,
},
xAxis:{
type:'category',
关于自我介绍的作文boundaryGap:fal,
data:[],
axisLine:{
lineStyle:{
color:'#E9E9E9'
}
},
axisTick:{
lineStyle:{
color:'#E9E9E9'
}
},
axisLabel:{
color:'#777777'
}
},
yAxis:{
type:'value',百家讲坛国史通鉴
nameTextStyle:{
color:'red'
},
axisLine:{
show:fal
},
axisTick:{
show:fal
},
axisLabel:{
老母猪照片color:'#777777'
},白带变多
splitLine:{
lineStyle:{
运动员等级标准color:'#E9E9E9',
type:'dashed'
}
}
},
ries:[
{
name:'总申办量',
开门揖盗zlevel:1,
type:'line',
stack:'总量',
symbol:'circle',
symbolSize:[2,2],
showSymbol:fal,
itemStyle:{
borderWidth:1,
borderColor:'#fff'
},
data:[]
},{
name:'实体⼤厅申办量',
zlevel:1,
type:'line',
stack:'总量',
symbol:'circle',
symbolSize:[2,2],
showSymbol:fal,
itemStyle:{
borderWidth:1,
borderColor:'#fff'
},
data:[]
},{
name:'⽹上⼤厅申办量',
zlevel:1,
type:'line',
stack:'总量',
symbol:'circle',
symbolSize:[2,2],
showSymbol:fal,
itemStyle:{
borderWidth:1,
borderColor:'#fff'
},
data:[]
}
],
}
};
},
mounted(){
this.initRender();
},
methods:{
// 初始化渲染
initRender(){
this.option.xAxis.data =hNameData;// x轴⽉份数据
this.option.ries[0].data =this.allApplyCountData;// 总申办量
this.option.ries[1].data =this.hallApplyCountData;// 实体⼤厅申办量
this.option.ries[1].data =this.hallApplyCountData;// 实体⼤厅申办量this.option.ries[2].data =thisApplyCountData;// ⽹上⼤厅申办量let chartDom =this.$refs.stackedLineChart;
let myChart = echarts.init(chartDom);
myChart.tOption(this.option);
},
// ⽣成⼤⼩⼀样样⾊不同的圆点
markDot(color){
let domHtml ='<span style="'+
'display: inline-block;'+
'margin-right: 8px;'+
'margin-bottom: 2px;'+
'border-radius: 6px;'+
'width: 6px;'+
'height: 6px;'+
`background-color: ${color}`+
'"></span>'
return domHtml;
}
},
};
</script>
<style lang="scss"scoped>
.stacked-line-chart-box{
height: 388px;
}
</style>
