乐趣区

关于前端:通过Echarts怎样实现立体柱状图

jiezi

前言

大家好，我是梁木由。之前在做大屏可视化我的项目时，UI 设计了一个平面形态的柱状图，依据之前做的一些图表的我的项目没有能复用的，没有做过这种平面形态的图表，关上 echarts 也没看到有相干的 demo，看下如何实现

图表样例

来看下 UI 设计师给到的设计图

上述设计图种柱状图都是平面的款式，那咱们来看下如何实现

实现办法

先写一个惯例的柱状图

在这个根底上进行改良

<div id="main"></div>
​
#main{
  width: 500px;
  height: 350px;
}
​
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
​
option = {
  xAxis: {
    axisTick: {show: false},
    nameTextStyle: {color: '#fff'},
    data: ['春节', '元宵节', '端午节', '中秋节']
  },
  legend: {data: ['春节', '元宵节', '端午节', '中秋节'],
    right: '25',
    top: '18',
    icon: 'rect',
    itemHeight: 10,
    itemWidth: 10,
    textStyle: {color: '#000'}
  },
  yAxis: {
    type: 'value',
    axisLabel: {color: '#000'},
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: ['#ccc']
      }
    }
  },
  series: [
    {
      data: [{ name: '春节', value: 24},
        {name: '端午节', value: 44},
        {name: '中秋节', value: 32},
        {name: '春节', value: 50}
      ],
      barWidth: 30,
      type: 'bar'
    }
  ]
};
​
​
option && myChart.setOption(option);

echarts 的配置选项

首先呢咱们看下 echarts 的配置选项

那咱们看所有的 type 没有平面柱状图的类型，然而呢咱们看最初一项 type: custom，什么意思呢，自定义系列，那就是说咱们能够抉择 custom 类型来实现平面柱状图

renderItem

type 为 custom 能够自定义系列图形元素渲染。

依据查看配置项，发现有一个renderItem 函数，custom 系列须要开发者本人提供图形渲染的逻辑。这个渲染逻辑个别命名为 renderItem

看下 renderItem 函数的介绍

renderItem 函数提供了两个参数：

  • params：蕴含了以后数据信息和坐标系的信息。

    • {context: // {Object} 一个可供开发者暂存货色的对象。生命周期只为：以后次的渲染。seriesId: // {string} 本系列 id。seriesName: // {string} 本系列 name。seriesIndex: // {number} 本系列 index。dataIndex: // {number} 数据项的 index。dataIndexInside: // {number} 数据项在以后坐标系中可见的数据的 index（即 dataZoom 以后窗口中的数据的 index）。dataInsideLength: // {number} 以后坐标系中可见的数据长度（即 dataZoom 以后窗口中的数据数量）。actionType: // {string} 触发此次重绘的 action 的 type。coordSys: // 不同的坐标系中，coordSys 里的信息不一样，含有如下这些可能：coordSys: {
        type: 'cartesian2d',
        x: // {number} grid rect 的 x
        y: // {number} grid rect 的 y
        width: // {number} grid rect 的 width
        height: // {number} grid rect 的 height
    },
    coordSys: {
        type: 'calendar',
        x: // {number} calendar rect 的 x
        y: // {number} calendar rect 的 y
        width: // {number} calendar rect 的 width
        height: // {number} calendar rect 的 height
        cellWidth: // {number} calendar cellWidth
        cellHeight: // {number} calendar cellHeight
        rangeInfo: {
            start: // calendar 日期开始
            end: // calendar 日期结尾
            weeks: // calendar 周数
            dayCount: // calendar 日数
        }
    },
    coordSys: {
        type: 'geo',
        x: // {number} geo rect 的 x
        y: // {number} geo rect 的 y
        width: // {number} geo rect 的 width
        height: // {number} geo rect 的 height
        zoom: // {number} 缩放的比率。如果没有缩放，则值为 1。例如 0.5 示意放大了一半。},
    coordSys: {
        type: 'polar',
        cx: // {number} polar 的核心坐标
        cy: // {number} polar 的核心坐标
        r: // {number} polar 的外半径
        r0: // {number} polar 的内半径
    },
    coordSys: {
        type: 'singleAxis',
        x: // {number} singleAxis rect 的 x
        y: // {number} singleAxis rect 的 y
        width: // {number} singleAxis rect 的 width
        height: // {number} singleAxis rect 的 height
    }
    
-   其中，对于 `dataIndex` 和 `dataIndexInside` 的区别：-   `dataIndex` 指的 `dataItem` 在原始数据中的 index。-   `dataIndexInside` 指的是 `dataItem` 在以后数据窗口中的 index。[renderItem.arguments.api] 中应用的参数都是 `dataIndexInside` 而非 `dataIndex`，因为从 `dataIndex` 转换成 `dataIndexInside` 须要工夫开销。

  • api：是一些开发者可调用的办法汇合。

    • 所有属性

      {[value], [coord] , [size] , [style] , [styleEmphasis] , [visual] , [barLayout] , [currentSeriesIndices] , [font], [getWidth] , [getHeight], [getZr], [getDevicePixelRatio]}

    咱们应用 renderItem 来自定义元素会应用到 renderItem.api 的三个办法，先来介绍下这三个办法

  • [api.value(…)]，意思是取出 dataItem 中的数值。例如 api.value(0) 示意取出以后 dataItem 中第一个维度的数值。

    <!—->

  • [api.coord(…)]，意思是进行坐标转换计算。例如 var point = api.coord([api.value(0), api.value(1)]) 示意 dataItem 中的数值转换成坐标系上的点。

  • [api.size(…)]，示意失去坐标系上一段数值范畴对应的长度。

    看下代码实现

    series:  getSeriesData()
​
function getSeriesData() {const data = [];
  seriesData.forEach((item, index) => {
    data.push(
      {
        type: 'custom',
        name: item.label,
        renderItem: function (params, api) {return getRenderItem(params, api);
        },
        data: item.value,
      }
    )
  })
  return data
}
​
function getRenderItem(params, api) {
  // params.seriesIndex 示意本系列 index
  const index = params.seriesIndex;
  // api.coord() 坐标转换计算
  // api.value() 取出以后项中的数值
  let location = api.coord([api.value(0) + index, api.value(1)]);
  // api.size() 坐标系数值范畴对应的长度
  var extent = api.size([0, api.value(1)]);
  return {
    type: 'rect',
    shape: {x: location[0] - 20 / 2,
      y: location[1],
      width: 20,
      height: extent[1]
    },
    style: api.style()};
}

    来看下咱们的实现成果

    柱状图成果进去了，那来看下怎么将柱状图改为立体图

    return_group

    我看到 renderItem 能够返回一个 return_group 类型，来看看这个类型的介绍

  • group 是惟一的能够有子节点的容器。

  • group 能够用来整体定位一组图形元素。

    那就是说咱们能够将设定一组图形元素而后组合到一起造成平面柱状图

    那么问题又来了怎么设定一组图形元素呢？

    graphic

    这个呢是对于图形相干的办法，再来理解两个 API

    graphic.extendShape

    创立一个新的图形元素

    graphic.registerShape

    注册一个开发者定义的图形元素

    创立图形元素

    那咱们先来创立一个新的图形元素

    const leftRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 19, // 柱状图宽
      zWidth: 8, // 暗影折角宽
      zHeight: 4, // 暗影折角高
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
      const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
  const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
      const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
      const p4 = [shape.x + shape.width / 2, shape.y];
​
      ctx.moveTo(p0[0], p0[1]); 
      ctx.lineTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.lineTo(p0[0], p0[1]);
      ctx.closePath();},
  });
​
​
const rightRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 18,
      zWidth: 15,
      zHeight: 8,
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
      const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
      const p4 = [shape.x + shape.width / 2, shape.y];
      const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
      const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight / 2];
      const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight];
      ctx.moveTo(p4[0], p4[1]); 
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p5[0], p5[1]);
      ctx.lineTo(p6[0], p6[1]);
      ctx.lineTo(p4[0], p4[1]);
​
      ctx.moveTo(p4[0], p4[1]);
      ctx.lineTo(p6[0], p6[1]);
      ctx.lineTo(p7[0], p7[1]);
      ctx.lineTo(p1[0], p1[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();},
  });

    注册图形元素

    echarts.graphic.registerShape('leftRect', leftRect);
echarts.graphic.registerShape('rightRect', rightRect);

    再来批改一下return_group

    function getRenderItem(params, api) {
  const index = params.seriesIndex;
  let location = api.coord([api.value(0) + index, api.value(1)]);
  var extent = api.size([0, api.value(1)]);
  return {
    type: 'group',
    children: [
      {
        type: 'leftRect',
        shape: {
          api,
          xValue: api.value(0) + index,
          yValue: api.value(1),
          x: location[0],
          y: location[1]
        },
        style: api.style()},
      {
        type: 'rightRect',
        shape: {
          api,
          xValue: api.value(0) + index,
          yValue: api.value(1),
          x: location[0],
          y: location[1]
        },
        style: api.style()}
    ]
  };
}

    再来看下成果

    能够看到平面形态的柱状图曾经实现了，那还有个毛病就是色彩须要再依照设计图来改改

    const colors = [
    [{ offset: 0, color: 'rgba(26, 132, 191, 1)' },
      {offset: 1, color: 'rgba(52, 163, 224, 0.08)' },
    ],
    [{ offset: 0, color: 'rgba(137, 163, 164, 1)' },
      {offset: 1, color: 'rgba(137, 163, 164, 0.08)' },
    ],
    [{ offset: 0, color: 'rgba(44, 166, 166, 1)' },
      {offset: 1, color: 'rgba(44, 166, 166, 0.08)' },
    ],
    [{ offset: 0, color: 'rgba(34, 66, 186, 1)' },
      {offset: 1, color: 'rgba(34, 66, 186, 0.08)' },
    ],
  ];
​
// 在 getSeriesData 增加 itemStyle
itemStyle: {color: () => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
       },

## 结尾

[Echarts 实现平面柱状图——码上掘金(https://code.juejin.cn/pen/7189080753991319592)
退出移动版