vue3+typescript(Echarts tooltip中formatter自定义并求和)

vue3+typescript(Echarts tooltip中formatter自定义并求和)

---

一、自定义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 + '<br/>' //tooltip 头部的标题
        //循环图表数据的每一项并用字符串拼接
        params.forEach((value: any, i: any) => {
            res += value.seriesName + ':' + value.data + '人' + '</br>' //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 + '<br/>' //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>

tooltip里必须是字符串拼接