echarts关于悬浮提示窗的设置

2023-11-14 13:41| 来源: 网络整理| 查看: 265

如果官网有现成的例子，就直接从官网拿了，链接会放在描述上，如果没有的话，我会贴出例子的具体代码与截图。

本篇文章作为记录，记录我开发的时候遇到的需求，可能有些很简单，但是如果有同样需求的童鞋会感觉很实用的。

感觉对你有用的话点个赞再走吧。哈哈😄

1、多个x轴的时候，这个时候就是普通展示，什么都不用额外做处理，tip就是横坐标加冒号加纵坐标的值。当然，也没有单位的显示(比如%、￥、G、M、人、天...)

关键代码：

option = { ...... tooltip: { trigger: 'axis' }, ...... series: [ { name: '邮件营销', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }, ...... ] };

2、展示内容添加单位

关键代码：

option = { ... ... tooltip: { trigger: 'axis' }, ... ... series: [ { name: '邮件营销', type: 'line', tooltip: { // 下面两个参数必须同时有，否则不生效 trigger: 'item', formatter: '{b0}: 实到 {c0} 人' }, data: [120, 132, 101, 134, 90, 230, 210] } ] }; trigger: 'item', // 触发条件，必须点到节点上，也就是那个小圆圈，这个时候就不像默认的那么智能了。 // 如果想要和以前一样智能，就需要配置触发条件或者换一种写法。 // 后面会有补充。

3、如果想要在图中直接显示数值（且同时添加单位），而不是悬浮才展示，就像这样：

关键代码：

option = { ... ... series: [ { name: '邮件营销', type: 'line', label: { normal: { show: true, position: 'right', formatter: '{c}%', textStyle: { color: '#2d2d2d', fontSize: '16' } } }, data: [120, 132, 101, 134, 90, 230, 210] } ] };

4、和2同样的需求，我换了一种写法，这个写法弥补了2的不智能。

关键代码：

option = { tooltip: { trigger: 'axis', formatter: function(params) { var name = params[0].name var value = params[0].value var tips = '' return name + ':' + value + '%' }, ... ... }, ... ... series: [ { name: '邮件营销', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] } ] };

5、需要展示的不知横纵坐标的值，还有其他额外的值

关键代码：找到x轴或者y轴唯一的变量，做对比，然后遍历数据数组，拼接显示。

这只是一种思路。后面还会有补充。

var arr_x = ['画板1', '画板2'] var arr_y = [300, 400] var arr_all = [{ id: 1, name: '画板1', value: 300, date: '2020-05-29', color: '红色' },{ id: 2, name: '画板2', value: 400, date: '2020-05-29', color: '黄色' }] option = { title: { text: '画板浏览情况' }, tooltip: { trigger: 'axis', formatter: function(params) { var name = params[0].name var tips = '' arr_all.map(item => { if (item.name === name) { tips = 'name：' + name + '浏览量：' + item.value + '人日期：' + item.date + '颜色柱图：' + item.color } }) return tips }, axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: arr_x }, yAxis: { type: 'value' }, series: [ { name: '邮件营销', type: 'line', data: arr_y } ] };

6、下面是展示多组数据

关键代码：

option = { tooltip: { trigger: 'axis', formatter: '{b0} {a0} :绩效完成 {c0}% {a1} :绩效完成 {c1}% {a2} :绩效完成 {c2}% {a3} :绩效完成 {c3}% {a4} :绩效完成 {c4}% {a5} :绩效完成 {c5}% {a6} :绩效完成 {c6}% {a7} :绩效完成 {c7}%' }, legend: { data: ['张三', '黎明', '杨六', '武米', '齐奇', '蒋加', '诗词', '米是'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: { type: 'value' }, series: [ { name: '张三', type: 'line', smooth: true, data: [20, 82, 91, 34, 90, 30, 10, 20, 20, 30, 25, 10] }, { name: '黎明', type: 'line', smooth: true, data: [10, 22, 41, 50, 22, 15, 46, 66, 20, 38, 10, 33] }, { name: '杨六', type: 'line', smooth: true, data: [33, 24, 12, 56, 22, 30, 15, 26, 26, 77, 10, 13] }, { name: '武米', type: 'line', smooth: true, data: [55, 25, 16, 37, 15, 57, 56, 30, 24, 16, 19, 80] }, { name: '齐奇', type: 'line', smooth: true, data: [57, 34, 22, 68, 78, 79, 10, 15, 57, 29, 37, 68] }, { name: '蒋加', type: 'line', smooth: true, data: [48, 36, 35, 68, 68, 15, 67, 63, 27, 17, 67, 80] }, { name: '诗词', type: 'line', smooth: true, data: [24, 46, 78, 26, 10, 15, 26, 23, 15, 78, 16, 90] }, { name: '米是', type: 'line', smooth: true, data: [25, 15, 26, 35, 78, 27, 38, 35, 78, 15, 57, 26] } ] };

有几个值，就顺到a几c几

当然，这样写，感觉图有点乱，可以做个堆叠，层次就清晰了。

关键代码：

series: [ { name: '张三', type: 'line', smooth: true, stack: '绩效完成度', data: [20, 82, 91, 34, 90, 30, 10, 20, 20, 30, 25, 10] }, ... ... ] stack: '绩效完成度', // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加

待补充......

【本文地址】

公司简介

联系我们