【Echarts 实战录】常见问题 (一)

880 阅读4分钟

序章

Echarts 实战录, 记录了个人在使用 Echarts 期间遇到的各种疑难杂症;

同时为了控制文章篇幅, 所以将其分为多篇进行发布, 后续文章还在陆续更新中, 敬请期待!

最后如果你在使用 Echarts 期间有遇到啥奇怪需求, 欢迎在评论区进行留言、讨论……

一、Tooltip 展示位置自适应

需求内容: Tooltip 位置, 相对于屏幕来说, 鼠标 底部如果能够放下就放在底部、鼠标 右侧如果放得下就放在右侧;

其实 echarts tooltip 展示位置默认处理方式也类似、只是它是相对于 图表容器 来进行计算的, 如下图所示: 红色背景区域是 图表容器 当鼠标 hover 下移, Tooltip 会跑到鼠标上面, 因为相对于 图表容器 来说, 鼠标下方已经放不下 Tooltip 了, 但实际上对于整个屏幕来说, 鼠标下方空间还很充足

klx.pro.S2FwdHVyZSAyMDIzLTAyLTE4IGF0IDExLjI0LjQ2LmdpZjE2NzY2OTA3ODIzMzg=.gif

解决思路: 通过修改 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,
  },
  ...
}

最终效果有:

klx.pro.S2FwdHVyZSAyMDIzLTAyLTE4IGF0IDExLjQ1LjA1LmdpZjE2NzY2OTIwMDQ5Mjc=.gif

二、监听 Tooltp 显示、隐藏

在实际开发过程, 我们可能需要监听到 Tooltip 显示、隐藏的状态

通过查阅官方文档, 并未找到相关文档, 但实际上目前 Echarts 是支持 showTip hideTip 事件的, 只是文档缺失了

myChart.on('showTip', 'series.line',() => {
  console.log('showTip')
})

myChart.on('hideTip','series.line', () => {
  console.log('hideTip')
})

三、饼图高亮时颜色不变、只保持放大效果

Echarts 中当饼图颜色较浅(#fafafa), 如果按照 Echarts 默认处理方式, 高亮后饼图颜色会变得很浅很浅, 如下图所示(图有点糊):

klx.pro.S2FwdHVyZSAyMDIzLTAyLTE5IGF0IDExLjE3LjU3LmdpZjE2NzY3NzY3MTI3OTE=.gif

上图演示代码如下:

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'
      }
    }
  }
]
...
  1. 方案二(推荐): 饼图中高亮颜色是支持 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 隐藏时, 隐藏 DOM

Echarts 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…

五、堆叠展示总数

需求内容: 需要在堆叠图最后面需要展示总量

klx.pro.aW1hZ2UucG5nMTY3Njg1MzU3MDU3MQ==.png

解决思路: 额外添加一条 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],
      }
    }
  ]
};

六、相邻堆叠图颜色相近或相等时, 会有白边

当两个堆叠图的颜色相近、或相等, 中间会有一条白线, 如下图所示:

klx.pro.aW1hZ2UucG5nMTY3NjUwNzc4Mzc2OA==.png

上图演示代码:

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]
    }
  ]
};

七、饼图设置边框, 切换图例会变大/变小

如下图, 为了给饼图添加间距, 设置了边框为白色, 这样的话在切换图例的时候, 图例会变大/变小

klx.pro.S2FwdHVyZSAyMDIzLTAyLTE2IGF0IDA5LjA1LjUzLmdpZjE2NzY1MDk1ODQ3NzM=.gif

上图演示代码:

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 的色块, 需要把下图中, 圈出来的那部分代码去掉

klx.pro.aW1hZ2UucG5nMTY3NjUxMjExMTY0MQ==.png

参考: github.com/apache/echa…

九、Y 坐标轴顺序调整

首先 Y 坐标轴, 默认顺序是 从下往上 的, 如下图所示:

klx.pro.aW1hZ2UucG5nMTY3NjUxMjYzNDUxMQ==.png

但上图中, Y 坐标轴顺序改为 从上往下 或许更符合人们的阅读习惯, 这时我们就可以通过inverse: true 配置来修改 Y 坐标轴的顺序

klx.pro.aW1hZ2UucG5nMTY3NjUxMjg2OTc4Nw==.png

完整代码有:

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 来实现下划线功能, 如下图所示:

klx.pro.aW1hZ2UucG5nMTY3NjUxNTg1OTUzNw==.png

完整代码如下:

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', // 下划线颜色
        },
      },
    }
    }
  ]
};

未完待续……

Group 3143