ECharts学习：柱状图常见效果和通用配置

前言

在之前的文章 ECharts快速上手 中，曾简单的介绍了一下ECharts的使用方法，今天继续分享一些关于ECharts的一些常见效果和通用配置，它们在我们进行图表绘制的时候常常被用到，会使得我们的图表变的更加美观，也能任意定制我们的需求。话不多说，开始今天的主题。

常见效果

这里以我们之前的案例来分析，从一个普通的柱状图，我们慢慢给他加上一些效果，使它变得更加美观。

代码：

<div id="main" style="width: 600px;height:400px;"></div>
<script>
    var chartInstance = echarts.init(document.getElementById('main'));

    var option = {
      title: {
        text: '语文成绩'
      },
      xAxis: {
        type: 'category',
        data: ['小明', '管一', '小红', '小美', '小周', '小李', '小孙']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [95, 130, 100, 80, 90, 110, 95],
        type: 'bar'
      }]
    };

    chartInstance.setOption(option);
</script>

当前效果：

1. 显示极值

• markPonit属性 ：用于在图表上标记特定数据点，允许用户在图表的指定位置添加自定义标注点（比如最大值、最小值、特定数据标签等）

series: [{
    data: [95, 130, 100, 80, 90, 110, 95],
    type: 'bar',
    markPoint: {
      data:[
        {
          type: 'max',
          name: '最大值'
        },
        {
          type: 'min',
          name: '最小值'
        }
      ]
    }
}]

效果：

后面展示的属性都和markPoint同级，我就不再重复上面代码了

2.显示平均值

• markLine属性 ：用于在图表上绘制标记线，这些线条可以用来表示数据的趋势线、辅助线、警戒线等。它允许用户自定义连线的起始点和结束点，以及线段的样式和标注文本。

// 和markPoint同级
markLine:{
  data:[
    {
      type: 'average',
      name: '平均值'
    },
    // // 支持自定义坐标位置的标记线
    // [    //   { coord: [10, 20] }, // 起始坐标
    //   { coord: [50, 60] }, // 结束坐标
    // ],
  ],
  label: { // 线上的标签样式
    formatter: '{b}',
  },
}

根据ECharts中的参数约定：

• {a}：通常表示图形组件类型。
• {b}：通常表示数据系列的名称或者类目的名称，在饼图中往往代表的是该扇区所对应的类别名称。
• {c}：通常表示数据项的实际值。
• {d}：在饼图中通常表示该扇区占总体的比例数值，并以百分比形式显示。

效果：

这样我们可以很直观的观察到哪些同学在没达到平均值。

3. 数值显示

• 只需将label中show的值设置成true即可，我们也可以对数组进行样式配置，比如旋转，详细的属性的都可以在官方文档中找到，属性众多就不一一体验了

label: {
  show: true,
  rotate:60
}

效果：

上面的图表还是有点单调，下面我们试着给他加上一点动态交互效果。这就需要用到一些通用配置了。

常用通用配置

1. tooltip

• 用于定义图表上的提示信息框（Tooltip）样式和内容格式。当用户鼠标悬浮在图表上时，会显示与当前数据点相关的详细信息。

tooltip中最常用的的属性主要有三个

• trigger（触发类型）：可以是item、axis或none,其中item指的是鼠标悬浮在柱状图内容区域内触发，axis指的是鼠标悬浮在当前数据所在的y轴上即可，不是一定要放在柱状图内容区域内才触发，触发范围更大，none就是不触发

• triggerOn（触发时机）：用于控制坐标轴指示器的触发时机，如 'mousemove' 或 'click' 等。在ECharts 5.0及以后版本中，这个功能被整合到了 tooltip.trigger 中，不再需要单独配置。

• formatter（格式化）：formatter 是一个非常重要的Tooltip属性，它允许开发者自定义Tooltip的内容。该属性接受一个函数作为值，该函数会在Tooltip即将显示时被调用。也可以接受字符串模版。其中字符串模版这里我引用官方文档中的描述：

函数我就直接在示例代码中书写一个了

下面是一个示例代码：

tooltip: {
    trigger: 'axis', // 触发方式，当鼠标悬浮在坐标轴刻度或数据点上时显示Tooltip
    // triggerOn:'click', // 鼠标点击显示ToolTip
    formatter: function (params) { // 自定义格式化函数
      // params是一个包含多个数据项的对象数组，每个对象表示一个系列中的一个数据点
      var value = params[0].value; // 获取第一个数据项的值
      var name = params[0].name; // 获取对应的类别名称（x轴的category）

      return `${name}: ${value}`; // 返回格式化的HTML字符串，这里简单地显示姓名和成绩
    },
},

效果：

当然，我发现不自定义Tooltip的内容，其实样式也好看，不过要显示‘语文’，就必须设置series中元素的name属性，这点得注意点。

2.toolbox

• toolbox是一个非常实用的组件，它提供了图表操作和数据视图相关的工具集合。在可视化图表中，toolbox通常以一个工具栏的形式出现在图表区域的某个角落，包含了一系列预定义或自定义的功能按钮。代码书写位置和tooltip同级

主要功能包括但不限于以下四个：

1. 导出图片  允许用户将当前图表保存为PNG、JPG或其他格式的图片文件，便于分享和存档。

toolbox: {
    feature: {
      saveAsImage:{},
    }
},

效果：

2. 数据视图  提供一个交互式的数据编辑面板，用户可以查看并直接修改图表所使用的原始数据，从而动态更新图表内容。

toolbox: {
    feature: {
      dataView:{}
    }
},

效果：

3. 动态类型切换

• DataZoom：提供数据区域缩放功能，通过滑动或选择范围来放大或缩小图表中的数据展示区间。

toolbox: {
    feature: {
      dataZoom:{}
    }
},

效果：

• Magic Type：允许用户在不同类型的图表之间进行快速切换，如柱状图转为折线图、饼图等。

toolbox: {
    feature: {
      magicType: {
       // 在柱状图和折线图之间切换
        type: ['line', 'bar']
      }
    }
},

效果：

但是上图我们可以看到在进行第二次切换图表的时候，原本在柱状图内部的数据被顶到了顶部，这通常是因为我们没有初始化好label的位置而造成的，我们只需给series的label属性加上定位即可解决这个问题

这下就不会出现之前的问题了

4. 重置  用于恢复图表至初始状态，移除所有手动设置的缩放、类型切换等影响，使图表显示全部原始数据。

我们把之前的功能都给它加上，来试试重置效果

toolbox: {
    feature: {
      saveAsImage: {},  // 导出图片
      dataView: {}, // 数据视图
      dataZoom: {},  // 区域缩放
      magicType: {   // 视图切换
        type: ['line', 'bar']
      },
      restore: {} // 重置
    }
},

效果：

3.legend

• 图例，用于筛选系列，需要和series配合使用

这里我们需要再添加一组数据，这次语文和数学都有，如下：

同样作为通用配置，它和tooltip同级，代码如下：

legend: {
    data: ['语文', '数学']
},

效果：

留言

这是ECharts指南的第二篇，内容比较简单，也是博主最近新学的一些知识，在这里总结分享给大家，希望能对各位掘友带来些许帮助。之后我还会继续分享一些ECharts的知识，并以可视化的动态图给大家带来更好的文章阅读体验。文章都发表在专栏ECharts使用指南中。

参考资料

(Documentation – Apache ECharts-API)

(Documentation – Apache ECharts-配置项)

原文链接：https://juejin.cn/post/7333937659839217716 作者：minxcs