Echarts角锥柱形图

最新推荐文章于 2024-09-13 15:34:59 发布

凉秋秋秋

最新推荐文章于 2024-09-13 15:34:59 发布

阅读量4.1k

点赞数 3

分类专栏：实用技巧文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_44659356/article/details/121383037

版权

实用技巧专栏收录该内容

4 篇文章

订阅专栏

开发中遇到要求需要展示锥形柱状图，类似如下效果
在这里插入图片描述
我知道Highcharts是有角锥图的配置文档的，如果项目中使用的是Highcharts，那么就可以直接配置了
Highcharts配置文档

但是我目前项目都是用的Echarts，如果Highcharts可以做到，那么Echarts也肯定是可以的。
翻阅了一天的配置项文档后发现
官方文档：Echarts柱状图有一种类型是象形柱图，象形柱图是可以设置各种具象图形元素的柱状图，象形柱图可以被想象为：它首先是个柱状图，但是柱状图的柱子并不显示。这些柱子我们称为『基准柱（reference bar）』，根据基准柱来定位和显示各种象形图形（包括图片）。

解决

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'pictorialBar', // 象形柱图
      symbol: 'triangle', // 三角形
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#e877a9'
        }, {
          offset: 1, color: 'rgba(232, 119, 169, 0.31)'
        }]
      },
    }
  ]
};