echarts问题记录

最新推荐文章于 2023-07-07 21:50:31 发布

写程序的吗喽

最新推荐文章于 2023-07-07 21:50:31 发布

阅读量775

点赞数

分类专栏： echarts vue 文章标签： typescript vue.js 前端

本文链接：https://blog.csdn.net/Yana1225/article/details/121605616

版权

vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

echarts

9 篇文章 0 订阅

订阅专栏

1. 渲染图在页面顶部，tooltip过长，导致顶部有一部分被遮挡看不到

解决： confine 是否将 tooltip 框限制在图表的区域内。

tooltip: {
    confine: true
}

2. 散点图，设置平均线

series: [
    {
        markLine: {
            silent: true,
            data: [
                {type: 'average', name: '平均值'},
                {yAxis: 12}
            ]
        }
    }
]
// silent: 图形是否会响应鼠标事件
// symbol: 标线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定
// type: 特殊的标注类型，用于标注最大值最小值等
//       'min' 最小值。'max' 最大值。'average' 平均值。'median' 中位数。
// yAxis: Y 值为给定值的标记线

3. tooltip需要拼接数据

1）需要拼接的是两种图中的value

tooltip: {
    trigger: "axis",
    show: true,
    formatter: params => { // params 中，0是第一组数据，1是第二组数据
        return `${params[0].axisValue}
            <br>${params[0].marker}  线上销售额&nbsp;&nbsp;<span style="float:right">${params[0].value}百万</span>
            <br>${params[1].marker}  同比上涨&nbsp;&nbsp;<span style="float:right">${params[1].value ? params[1].value + '%' : '-'}</span>`
    }
}

2）tooltip上展示的数据不全是图表中能直观看到的数据。举个例子：图表展示的只是金额的趋势， tooltip上想展示金额以及金额对应的占比等数据

data中就可以这么传

option.series.data = res.data.map((d) => ({
    name: d.odorType || d.brand,
    value: d.value,
    proportion: d.proportion,
}));

tooltip中就可以这么设置，重点是formatter

tooltip: {
    trigger: 'item',
    formatter: params => {
        return `${params.marker} ${params.name} ${params.data.proportion}%  （${params.value}百万）`
    }
},

待补充……