【Echarts 实战录】常见问题 (一) |
您所在的位置：网站首页 › dhtmlxgantt配置 › 【Echarts 实战录】常见问题 (一) |
【Echarts 实战录】常见问题 (一)
|
序章
Echarts 实战录, 记录了个人在使用 Echarts 期间遇到的各种疑难杂症; 同时为了控制文章篇幅, 所以将其分为多篇进行发布, 后续文章还在陆续更新中, 敬请期待! 最后如果你在使用 Echarts 期间有遇到啥奇怪需求, 欢迎在评论区进行留言、讨论…… 一、Tooltip 展示位置自适应需求内容: Tooltip 位置, 相对于屏幕来说, 鼠标 底部如果能够放下就放在底部、鼠标 右侧如果放得下就放在右侧; 其实 echarts tooltip 展示位置默认处理方式也类似、只是它是相对于 图表容器 来进行计算的, 如下图所示: 红色背景区域是 图表容器 当鼠标 hover 下移, Tooltip 会跑到鼠标上面, 因为相对于 图表容器 来说, 鼠标下方已经放不下 Tooltip 了, 但实际上对于整个屏幕来说, 鼠标下方空间还很充足 解决思路: 通过修改 tooltip.position 配置, 该配置允许设置一个函数, 从函数参数中可以获取到 Tooltip 相关信息, 通过计算、返回正确的位置坐标, 完整代码如下: const TOOLTIP_OFFSET = 8 // 提示框距离鼠标的距离 const container = document.getElementById('chart-container') // echarts 容器 // Tooltip 的位置: 底部放得下就放底部、右侧放得下就放右侧 const getTooltipPosition = (point, params, dom, rect, size) => { // 图表距离容器「左侧」「顶部」的距离 const [offsetLeft, offsetTop] = point // 页面视口「宽」「高」 const { clientWidth, clientHeight } = document.body // 图表组件容器距离视图「顶部」「左侧」的距离 const { top: containerTop, left: containerLeft } = container.getBoundingClientRect() // 当前鼠标位置距离浏览器视口「顶部」「底部」「左侧」「右侧」的距离 const top = containerTop + offsetTop const left = containerLeft + offsetLeft const bottom = clientHeight - top const right = clientWidth - left // 提示框的「宽」「高」 const [tooltipWidth, tooltipHeight] = size.contentSize // 如果底部可以放下提示框, 则放底部、否则放在顶部 const tooltipY = tooltipHeight + TOOLTIP_OFFSET < bottom ? offsetTop + TOOLTIP_OFFSET : offsetTop - tooltipHeight - TOOLTIP_OFFSET // 如果底部可以放下提示框, 就放右侧、否则放在左侧 const tooltipX = tooltipWidth + TOOLTIP_OFFSET < right ? offsetLeft + TOOLTIP_OFFSET : offsetLeft - tooltipWidth - TOOLTIP_OFFSET return [tooltipX, tooltipY] } option = { tooltip: { trigger: 'axis', position: getTooltipPosition, }, ... } 复制代码最终效果有: 在实际开发过程, 我们可能需要监听到 Tooltip 显示、隐藏的状态 通过查阅官方文档, 并未找到相关文档, 但实际上目前 Echarts 是支持 showTip hideTip 事件的, 只是文档缺失了 myChart.on('showTip', 'series.line',() => { console.log('showTip') }) myChart.on('hideTip','series.line', () => { console.log('hideTip') }) 复制代码 三、饼图高亮时颜色不变、只保持放大效果Echarts 中当饼图颜色较浅(#fafafa), 如果按照 Echarts 默认处理方式, 高亮后饼图颜色会变得很浅很浅, 如下图所示(图有点糊): 上图演示代码如下: option = { series: [ { type: 'pie', radius: ['40%', '70%'], label: { show: false }, labelLine: { show: false }, data: [ { value: 1048, itemStyle: { color: '#fafafa' } }, { value: 735 }, { value: 580 }, { value: 484 }, { value: 300 } ] } ] }; 复制代码由于上面问题暂无法找到解决办法, 故退一步, 索性 高亮时不修改图表的颜色, 只保留饼图的缩放, 这里给出了两个解决方案: 方案一: 饼图 data 是支持设置独立的高亮颜色, 所以可以将每个饼图的高亮颜色和默认状态的颜色保存一致 ... data: [ { value: 75, itemStyle: { color: '#0B9BEE' }, emphasis: { itemStyle: { color: '#0B9BEE' } } }, { value: 25, itemStyle: { color: '#E5F6FF' }, emphasis: { itemStyle: { color: '#E5F6FF' } } } ] ... 复制代码 方案二(推荐): 饼图中高亮颜色是支持 inherit 字段的, 可直接将高亮颜色设置为 inherit 来取消高亮颜色 option = { series: [ { type: 'pie', radius: ['40%', '70%'], label: { show: false }, labelLine: { show: false }, + emphasis: { + itemStyle: { color: 'inherit' } + }, data: [ { value: 1048, itemStyle: { color: '#fafafa' } }, { value: 735 }, { value: 580 }, { value: 484 }, { value: 300 } ] } ] }; 复制代码 四、Tooltip 隐藏时, 隐藏 DOMEcharts Tooltip 默认是通过设置 opacity: 0 来隐藏 DOM 元素的, 这样的话 DOM 依然会占位, 可能会导致一些隐藏 BUG, 故而希望当 Tooltip 隐藏时能够将 DOM display 掉 解决思路: 为 Tooltip 设置 className 并通过属性选择器, 来找到隐藏的 Tooltip 将其 display 掉 **主要代码如下: ** option = { tooltip: { trigger: 'item', // 添加 className className: 'echarts-tooltip' }, ... } 复制代码 // 根据 className 并通过属性选择器找到隐藏的 Tooltip .echarts-tooltip[style$="opacity: 0;"] { display: none !important; } 复制代码参考: github.com/apache/echa… 五、堆叠展示总数需求内容: 需要在堆叠图最后面需要展示总量 解决思路: 额外添加一条 serie 数据, 用于展示总数 主要代码如下: const total = [440, 434] option = { xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['Mon', 'Tue'] }, series: [ { name: 'Direct', type: 'bar', stack: 'total', data: [320, 302] }, { name: 'Mail Ad', type: 'bar', stack: 'total', data: [120, 132] }, // 新增的列, 用于展示总数 { type: 'bar', stack: 'total', name: void 0, // name 为 undefind, 就不会在 legend 中显示 silent: true, // 取消鼠标响应 data: [0, 0], // data 所有值都设置为 0 起到隐藏柱子的效果 label: { show: true, position: 'right', formatter: ({ dataIndex }) => total[dataIndex], } } ] }; 复制代码 六、相邻堆叠图颜色相近或相等时, 会有白边当两个堆叠图的颜色相近、或相等, 中间会有一条白线, 如下图所示: 上图演示代码: option = { xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['Mon', 'Tue'] }, series: [ { type: 'bar', stack: 'total', barMaxWidth : 30, itemStyle: { color: '#69b1ff' }, data: [320, 302] }, { type: 'bar', stack: 'total', itemStyle: { color: '#69b1ff' }, data: [120, 132] } ] }; 复制代码解决办法: 为柱状图设置投影, 通过投影来填充间隙 option = { xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['Mon', 'Tue'] }, series: [ { type: 'bar', stack: 'total', barMaxWidth : 30, + itemStyle: { + color: '#69b1ff', + shadowColor: '#69b1ff', // 关键代码 + shadowOffsetX: 1, // 关键代码 + }, data: [320, 302] }, { type: 'bar', stack: 'total', itemStyle: { color: '#69b1ff' }, data: [120, 132] } ] }; 复制代码 七、饼图设置边框, 切换图例会变大/变小如下图, 为了给饼图添加间距, 设置了边框为白色, 这样的话在切换图例的时候, 图例会变大/变小 上图演示代码: option = { legend: {}, series: [ { type: 'pie', radius: ['40%', '70%'], itemStyle: { borderWidth: 2, borderRadius: 10, borderColor: '#fff', }, data: [ { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ] }; 复制代码解决思路: 出现跳动主要原因是, legend 继承了饼图的边框, 这里只需要设置图例 borderWidth 以及 inactiveBorderWidth 等于 0 就行, 具体代码如下: option = { + legend: { + itemStyle: { + borderWidth: 0 + }, + inactiveBorderWidth: 0 + }, series: [ { type: 'pie', radius: ['40%', '70%'], itemStyle: { borderWidth: 2, borderRadius: 10, borderColor: '#fff', }, data: [ { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ] }; 复制代码 八、热力图, 非数值不渲染在热力图中, 如果色块的值, 不是数字类型的话, 对应的色块是不会被渲染的, 也 无法触发任何事件 官方示例中针对空值 0 进行了处理, 如果需要渲染 0 的色块, 需要把下图中, 圈出来的那部分代码去掉 参考: github.com/apache/echa… 九、Y 坐标轴顺序调整首先 Y 坐标轴, 默认顺序是 从下往上 的, 如下图所示: 但上图中, Y 坐标轴顺序改为 从上往下 或许更符合人们的阅读习惯, 这时我们就可以通过inverse: true 配置来修改 Y 坐标轴的顺序 完整代码有: option = { xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { inverse: true, type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六'] }, series: [ { type: 'bar', data: [19325, 23438, 31000, 121594, 134141, 681807] } ] }; 复制代码 十、为文本设置下划线在实际使用中, 有时我们可能需要为文本设置一个下划线, 这时我们就可以通过 rich 来实现下划线功能, 如下图所示: 完整代码如下: option = { series: [ { type: 'pie', radius: [60, 100], center: ['50%', '50%'], data: [ { value: 40, name: '文本下划线设置' }, { value: 38, name: '文本下划线设置1' }, ], label: { formatter: ({ name }) => `{v|${name}}\n{hr|}`, rich: { // 文本样式 v: { color: '#000000' }, // 下划线样式 hr: { height: 1, // 下划线大小 lineHeight: 10, // 下划线距离文字的间距 width: '105%', // 下划线的长度 backgroundColor: 'red', // 下划线颜色 }, }, } } ] }; 复制代码未完待续…… |
【本文地址】