echarts：绘制每个单元格的标记线

一只小柯

已于 2022-09-23 15:16:21 修改

阅读量240

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2022-09-07 17:41:07 首次发布

本文链接：https://blog.csdn.net/z_5126/article/details/126750642

版权

本文介绍如何使用ECharts在柱状图中实现每个单元格的标记线，详细阐述了如何绘制标记线以突出显示每个单元格的最小值。

摘要由CSDN通过智能技术生成

需求

用echarts绘制每个单元格的标记线，而非整个图表的标记线

实现

柱状图：绘制标记线，标记每个单元格的最小值

//法一：
var data1 = [18203, 23489, 29034, 44970, 31744, 30230];
var data2 = [19325, 23438, 31000, 21594, 54141, 81807];
var dataMin = [];
for (var i = 0; i < data1.length; ++i) {
   
  dataMin.push(Math.min(data1[i], data2[i]));
}

option = {
   
  title: {
   
    text: 'World Population'
  },
  tooltip: {
   
    trigger: 'item',
    axisPointer: {
   
      type: 'shadow'
    }
  },
  legend: {
   },
  grid: {
   
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  }