Echarts中数据对tooltip小气泡的影响

最新推荐文章于 2024-01-22 08:45:00 发布

阿琰a_

最新推荐文章于 2024-01-22 08:45:00 发布

阅读量185

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/A15029296293/article/details/133386666

版权

本文介绍了在ECharts中使用toopltip时遇到null值的解决方案，包括修改trigger属性为item以及使用formatter进行自定义显示。通过示例展示了如何处理null值并定制tooltip内容。

摘要由CSDN通过智能技术生成

toopltip的用法很简单，只需要在echarts的配置项中添加tooltip属性就好了，但是有一些小的注意点需要注意。

toopltip官方文档：Documentation - Apache ECharts

当数据中存在null后，toopltip对应的数据会以 " - " 形式展示。

为了解决这种情况，数据为null时不展示这个字段，可以修改toopltip对象中的trigger属性，将trigger:'axis'修改为trigger:'item'。

第二种方法可以formatter来实现，formatter可以自定义toopltip里的布局以及数据，对开发者来说可以非常灵活的实现想要的结构，formatter回调函数打印的params如下；可以通过返回一个模板字符串的dom元素。

demo源代码

import './App.css';
import React, {useEffect, useRef, useState} from 'react';
import * as echarts from "echarts";

function App() {
    const echartsRef = useRef();
    const option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        tooltip:{
            trigger:'axis',
            formatter:(params)=> {
                console.log(params,'ppppppp')
                let arr=params.map((item)=>{
                    if(item.data){
                        return item
                    }
                })
                return `
                        <div>${arr[0].seriesName}</div>
                        <div>${arr[0].name} : ${arr[0].data}</div>
                        <div>${arr[1]?arr[1].name:''} ${arr[1]?arr[1].data:''}</div>
                        `
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'aaa',
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                stack: 'Ad',
            },
            {
                name:'bbb',
                data: [10, 20, 15, null, 7, 11, null],
                type: 'bar',
                stack: 'Ad',
            }
        ]
    };

    useEffect(()=>{
        const chart1 = echarts.init(echartsRef.current);
        chart1.setOption(option);
    },[])
    return (
        <div className="App" style={{paddingTop:20}}>
            <div style={{width:'100%',height:500}}>
               <div ref={echartsRef} style={{width:'100%',height:'100%'}}></div>
            </div>


        </div>
    );
}

export default App;