Echarts图表中的几个问题

Merry He 12/22/2023

最近需求中用到 Echarts 的双y轴图表时遇到几个问题，有必要记录一下

一、双y轴刻度线水平对齐问题
二、 tooltip内容过多无法完全展示问题
三、 series动态变化时，图表曲线数量错误问题

option 基础配置如下

const option = {
    title: {
        show: true,
        textstyle: {
            fontsize: 16
        },
        left:'50%',
        top:'0%'
    },
    legend:{
        show: true,
        // type:'scroll',显示图例分页(图例过多时可配置此项)
        orient: "horizontal",
        top:"30px",
        data: [] //图例 例：  ["东部地区","中部地区", ......]
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {type: ' shadow'}
    },
    dataZoom:[ //横向滚动条(可在横坐标数据量太大的时候配此项)
        {
            type:'slider',
            show:true,
            height:'10px',
            bottom:'15px'
        }
    ],
    xAxis:{
        type:'category',
        axisTick:{
            alignWidthLabel:true,
        },
        data:[]//横坐标值
    },
     yAxis:[ //两个y轴时，yAxis用数组配置
        {
            type:'value',
            name:'',//y轴名称，例 降雨量
            nameTextStyle:{
                fontsize:14
            },
            position:'left',//y轴在图表左边
            // min:0, 最小值
            // splitNumber:5  分隔数量
        },
        {
            type:'value',
            name:'',//y轴名称，例 温度
            nameTextStyle:{
                fontsize:14
            },
            position:'right',//y轴在图表左边
            // min:0, 最小值
            // splitNumber:5  分隔数量
        }
    ],
    series:[]
}

# 双y轴刻度线水平对齐问题

以上配置的双y轴左右两条 y轴的刻度左右水平是不对齐的，可以分别给两条y轴设置最小值 (min) 、最大值 (max) 、刻度分隔数量 (splitNumber)、间隔 (interval)以保证水平对齐；其中最小值 min 一般是 0 , 刻度分隔数量 splitNumber 根据需要自定义，我这里分五份，这两项为静态配置可以在定义option基础配置的时候直接写上。

但是y轴最大值和间隔我们是不知道的，往往是从后台获取的数据，所以y轴最大值和间隔是动态变化的；在调用接口获取数据后会给series赋值，其中series数组中的每个对象要添加一个 yAxisIndex 用来指定使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。这样我们可以拿到同一条y轴的所有纵坐标数据并使用Math对象取其最大值。

series示例

series:[
    {
        name:'东部地区',//name值需要与图例名称相同
        type:'line',//图表类型
        yAxisIndex：0,
        data:[]// 例 [130,260,360,450,220]
    },
    {
        name:'中部地区',
        type:'line',//图表类型
        yAxisIndex：1,
        data:[]// 例 [200,130,260,100,300]
    }
]

//左右y轴最大值
const leftMax = Math.max(...option.series.filter(item=>item.yAxisIndex === 0).map(_item=>_item.data).flat())
const rightMax = Math.max(...option.series.filter(item=>item.yAxisIndex === 1).map(_item=>_item.data).flat())
//设置最大值和间隔
option.yAxis[0].max = leftYMax
option.yAxis[1].max = rightYMax
option.yAxis[0].interval = leftYMax / 5
option.yAxis[1].interval = rightYMax / 5

然后重新设置图表配置 myChart.setOption( option )这样就解决了上述y轴刻度线水平对齐的问题

# tooltip内容过多无法完全展示问题

鼠标移动到曲线上时会有 tooltip 显示每个图例以及对应的纵坐标值，当内容很多时，tooltip会超出图表区域，且超出的部分有时会被其他区域遮住导致看不见；
方法一：配置 tooltip.confine 属性为 true ，表示将 tooltip 框限制在图表的区域内，这样tooltip就不会超出图表，全在图表区域内展示；此配置对于内容量不是特别大时已经满足基本要求，但是数据量很大的时候显然图表区域内也不一定够完全展示；
方法二：配置 tooltip.formatter 方法，格式化输出 tooptip 的内容( 此为静态配置，在定义option基础配置的时候直接写上 )，即

tooltip: {
    trigger: 'axis',
    axisPointer: {type: ' shadow'},
    // confine:true,让tooltip显示在图表区域内(一般在tooltip内容过多时配置此项)
    formatter: function (params){ // tootltip内容过多时格式化输出tooltip，可搭配上面confine:true一起使用
        if (params instanceof Array){
            let str = ''
            str += `${params[0].axisValue}<br/>`
            params.forEach((item, index) => {
                str +=`<span class="chart-tooltip-color" style="display:inline-block;margin-right:5px;background-color: ${item.color}; width:10px;height:10px;border-radius:100%;"></span>`
                str += `${item.seriesName} : ${item.data}`
                str += '<span style="margin-left:20px"></span>'
                str += `${index % 2 === 0 ? '<br/>' : ''}` // 一行展示2个图例，可更改
            })
            return str
        }
    }
}

# series动态变化时，图表曲线数量错误问题

第一次查询后展示四条曲线，然后改变查询参数后重新查询会重新给 option.series 赋值，数组只有两项了但还是显示了四条曲线，查看文档得知 echarts.setOption( ) 方法默认开启了跟之前设置的 option 进行合并，配置此方法的第二个参数可关闭合并，即 myChart.setOption( option , { notMerge:true } )

Merry He's Blogs

Choose mode