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>

当前效果:

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

1. 显示极值

  • markPonit属性 :用于在图表上标记特定数据点,允许用户在图表的指定位置添加自定义标注点(比如最大值、最小值、特定数据标签等)
series: [{
    data: [95, 130, 100, 80, 90, 110, 95],
    type: 'bar',
    markPoint: {
      data:[
        {
          type: 'max',
          name: '最大值'
        },
        {
          type: 'min',
          name: '最小值'
        }
      ]
    }
}]

效果:

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

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

2.显示平均值

  • markLine属性 :用于在图表上绘制标记线,这些线条可以用来表示数据的趋势线、辅助线、警戒线等。它允许用户自定义连线的起始点和结束点,以及线段的样式和标注文本。
// 和markPoint同级
markLine:{
  data:[
    {
      type: 'average',
      name: '平均值'
    },
    // // 支持自定义坐标位置的标记线
    // [    //   { coord: [10, 20] }, // 起始坐标
    //   { coord: [50, 60] }, // 结束坐标
    // ],
  ],
  label: { // 线上的标签样式
    formatter: '{b}',
  },
}

根据ECharts中的参数约定:

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

效果:

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

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

3. 数值显示

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

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

label: {
  show: true,
  rotate:60
}

效果:

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

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

常用通用配置

1. tooltip

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

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

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

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

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

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

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

下面是一个示例代码:

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字符串,这里简单地显示姓名和成绩
    },
},

效果:

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

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

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

2.toolbox

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

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

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

效果:

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

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

效果:

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

  1. 动态类型切换
  • DataZoom:提供数据区域缩放功能,通过滑动或选择范围来放大或缩小图表中的数据展示区间。
toolbox: {
    feature: {
      dataZoom:{}
    }
},

效果:

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

  • Magic Type:允许用户在不同类型的图表之间进行快速切换,如柱状图转为折线图、饼图等。
toolbox: {
    feature: {
      magicType: {
       // 在柱状图和折线图之间切换
        type: ['line', 'bar']
      }
    }
},

效果:

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

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

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

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

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

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

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

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

效果:

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

3.legend

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

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

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

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

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

效果:

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

留言

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

参考资料

(Documentation – Apache ECharts-API)

(Documentation – Apache ECharts-配置项)

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

(0)
上一篇 2024年2月15日 下午4:11
下一篇 2024年2月15日 下午4:22

相关推荐

发表回复

登录后才能评论