vue3+typescript(Echarts tooltip中formatter自定义并求和)
vue3+typescript(Echarts tooltip中formatter自定义并求和)
文章目录
- vue3+typescript(Echarts tooltip中formatter自定义并求和)
- 一、自定义formatter（以下示例是关于折线图）
- 添加全部代码
-
- tooltip里必须是字符串拼接
一、自定义formatter（以下示例是关于折线图）
tooltip: {
trigger: 'axis',
// triggerOn: "click",
alwaysShowContent: true,
renderMode: "html", // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
axisPointer: {
// 坐标轴指示器配置项。
type: "shadow", // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: "auto", // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
formatter: (params: any) => {
var res = params[0].name + '
' //tooltip 头部的标题
//循环图表数据的每一项并用字符串拼接
params.forEach((value: any, i: any) => {
res += value.seriesName + ':' + value.data + '人' + '' //tooltip里的数据必须要是字符串
})
//设置一个保存所有data的数组
var arr: any = [];
params.forEach((v: any, i: any) => {
arr.push(Number(v.data)) //把数据push到数组中
})
//写一个reduce的函数进行求和
function sum(arr: any) {
return arr.reduce(function (total: any, value: any) {
return total + value;
}, 0);
}
res += '共计:' + sum(arr) + '人' //得到一个总数
return res
}
},
添加全部代码
<template>
<div class="chart_box">
<div id="myChart">
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, getCurrentInstance, ref } from 'vue'
import { GetDay, GetWeek, GetMouth } from "@/api/index";
import { number } from 'echarts';
export default defineComponent({
setup() {
//获取本日活跃用户数据
let option: any = ref()
const { proxy } = getCurrentInstance() as any
GetDay().then((res: any) => {
let DaysY: any = Object.values(res.data.data.lineChat)
//获取keys
let DaysX: any = Object.keys(res.data.data.lineChat)
//设置数组增加字段
let DayX: Array<string> = []
DaysX.forEach((value: string) => {
DayX.push(`${value}点`)
})
option = {
title: {
// text: `活跃用户统计`
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(#000819,#000819,#000819,0.5)',
textStyle: {
color: '#fff',
},
borderColor: "#00948D",
shadowColor: "#00948D",
// triggerOn: "click",
// alwaysShowContent: true,
renderMode: "html", // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
axisPointer: {
// 坐标轴指示器配置项。
type: "shadow", // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: "auto", // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
formatter: (params: any) => {
var res = params[0].name + '
' //tooltip 头部的标题
//循环图表数据的每一项并用字符串拼接
params.forEach((value: any, i: any) => {
res += '在线人数' + ':' + value.data + '人' //tooltip里的数据必须要是字符串
})
return res
}
},
// legend: {
// data: ['本日']
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
// type: 'category',
// boundaryGap: false,
name: `小时`,
data: DayX,
axisLine: {
lineStyle: {
color: '#0C9EB3', //x轴的颜色
}
},
nameTextStyle: {
color: "#fff"
},
axisLabel: {
color: "#fff"
},
},
yAxis: {
name: `人`,
type: 'value',
nameTextStyle: {
color: "#fff",
padding: [0, 0, 5, -10]
},
axisLabel: {
color: "#fff"
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#3670B3",
width: 0.5,
}
}
// axisLabel: {
// formatter: '{value}'
// },
// scale: true,
// boundaryGap: [0, 0.2]
},
series: [
{
name: '本日',
type: 'line',
stack: 'Total',
smooth: true,
data: DaysY,
itemStyle: {
normal: {
color: "#33C5FF", //改变折线点的颜色
lineStyle: {
color: "#33C5FF", //改变折线颜色
},
},
}
}
]
}
// 获取挂载的组件实例
const echarts = proxy.$ECharts
//初始化挂载
const echarts1 = echarts.init(document.getElementById('myChart'))
//添加配置
echarts1.setOption(option, true)
// 自适应
// window.onresize = function () {
// echarts1.setOption(option)
// echarts1.resize()
// }
setTimeout(function () {
window.addEventListener("resize", () => {
echarts1.resize()
echarts1.setOption(option, true)
})
}, 200)
})
onMounted(() => {
})
return {
}
}
})
</script>
<style scoped>
#myChart {
width: 100%;
height: 100%;
}
.chart_box {
/* width: 60%; */
flex: 1;
height: 100%;
}
</style>