react-native 中Echart图时自定义 tooltip 内容

图片.png

参考来自 : https://blog.csdn.net/acknowledged/article/details/101220237

let label = ['10:00', '10:15', '10:30', '10:45', '11:00'];
let value = [6, 12, 6, 14, 20];
let value2 = [9, 6, 12, 14, 35];

option = {
    // width:Util.size.width,
    height: 180,
    top: 10,
    backgroundColor: '#fff',
    grid: {
        top: 20,
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        // formatter: 'a : {a}--b-{b}-c--{c}--c1-{c1}℃',
        formatter: (params, ticket, callback) => {
            console.log('params', params);
            
            return `
${params[0].marker}${params[0].seriesName} ${String('温度：')}${params[0].value}
                        
 
                    `;
            // return `${params[0].marker}${params[0].seriesName}温度：${params[0].value}
`;
        },
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(255,255,255,0)', // 0% 处的颜色
                        },
                        {
                            offset: 0.5,
                            color: 'rgba(255,255,255,1)', // 100% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,0)', // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
            },
        },
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                formatter: '{value}',
                fontSize: 14,
                margin: 20,
                textStyle: {
                    fontSize: 11,
                    color: '#9CA6AE',
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#E9F1F7',
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#243753',
                },
            },
            axisTick: {
                show: false,
            },
            data: label,
        },
    ],
    yAxis: [
        {
            boundaryGap: false,
            type: 'value',
            axisLabel: {
                formatter: '{value}℃',
                textStyle: {
                    fontSize: 11,
                    color: '#9CA6AE',
                },
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: 12,
                lineHeight: 40,
            },
            splitLine: {
                lineStyle: {
                    color: '#E9F1F7',
                },
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#E9F1F7',
                },
            },
            axisTick: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '2020-12-15 至 2020-12-16',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
                color: '#19a3df',
                borderColor: '#4E9FFA',
            },
            lineStyle: {
                normal: {
                    width: 3,
                    color: '#4E9FFA',
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(88,255,255,0.2)',
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(88,255,255,0)',
                            },
                        ],
                        false
                    ),
                },
            },
            data: value,
        },
        {
            name: '2020-12-17 至 2020-12-18',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
                color: '#40B4A5',
                borderColor: '#40B4A5',
            },
            lineStyle: {
                normal: {
                    width: 3,
                    color: '#40B4A5',
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(88,255,255,0.2)',
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(88,255,255,0)',
                            },
                        ],
                        false
                    ),
                },
            },
            data: value2,
        },
    ],
};