通过Echarts怎样实现立体柱状图

这篇具有很好参考价值的文章主要介绍了通过Echarts怎样实现立体柱状图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

图表样例

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

通过Echarts怎样实现立体柱状图

上述设计图种柱状图都是立体的样式,那我们来看下如何实现

实现方法

先写一个常规的柱状图

通过Echarts怎样实现立体柱状图

在这个基础上进行改进

<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的配置选项

通过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
          }
      }
      
    • 其中,关于 dataIndexdataIndexInside 的区别:

      • 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()
  };
}

来看下我们的实现效果

通过Echarts怎样实现立体柱状图

柱状图效果出来了,那来看下怎么将柱状图改为立体图

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()
      }
    ]
  };
}

再来看下效果

通过Echarts怎样实现立体柱状图

可以看到立体形状的柱状图已经实现了,那还有个缺点就是颜色需要再按照设计图来改改

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怎样实现立体柱状图

结尾

Echarts实现立体柱状图——码上掘金

如果文章对你有帮助,期望点一下赞支持一下,🙏🙏🙏文章来源地址https://www.toymoban.com/news/detail-421483.html

到了这里,关于通过Echarts怎样实现立体柱状图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue echarts实现3D效果柱状图

    在vue2项目里面,研究了哈,这里记录下eacharts 实现3D效果柱状图 在main.js引入eacharts 展示效果:大屏demo

    2024年02月15日
    浏览(44)
  • ECharts实现简单饼图和柱状图

    前端使用vue,后端使用SpringBoot 前端使用vue,后端使用SpringBoot Python可视化案例数据资源-CSDN文库 可以点个免费的赞吗!!!    

    2024年01月21日
    浏览(39)
  • echarts实现3D柱状图(视觉层面)和3D饼图

    原理: 立体图形从一个方向只能看到三个面,于是我们通过echarts图表实现 顶部,明面,和暗面。 效果图如下: 需要四份数据, 两个柱子的数据+X轴数据+颜色数据, 通过 setData 和 setColor 生成需要的数据,横向柱状图同理,参照代码中注释。 以下是完整案例代码: 3D饼图没

    2024年02月16日
    浏览(40)
  • echarts实现3d柱状图的两种方式

    看了不少关于3d柱状图的案例,发现做3d柱状图 常用的两种方式就是 自定义图形和象型柱图, 两种实现方式效果如下: 方法1: echarts.graphic.extendShape 自定义图形 echarts自定义图形的详细用法点这里, 官网点这里, 图中第一个3d柱状图我参考的案例在这里, 看了很多 echarts这种3d案例,

    2024年02月01日
    浏览(51)
  • vue使用echarts与echarts-gl实现3d地图与 3d柱状图

    目录 前言 一、下载echarts与echarts gl 二、vue引入与页面使用 1.引入 2.页面引入echarts-gl 三、下载地图数据 四、使用地图 1、html初始化地图放入位置: 2、data创建变量 3、创建地图 4、钩子函数渲染地图 5、渲染完成效果 总结 提示:本项目使用vue,请提前搭建好vue项目 本次需求

    2024年02月12日
    浏览(43)
  • vue+echarts——实现3D地图+3D柱状图 效果——粗糙代码记录——技能提升

    最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 所以,最后的决定是通过 echarts 中的 3D地图 来写。但是写出来的效果不慎好看。功能是可以实现的。 初版效果图如下: 直接上代码: 我这边是存储到当前文件夹中了。。。 背景颜色是 ec

    2024年02月09日
    浏览(66)
  • echart 3d立体颜色渐变柱状图

    如果可以实现记得点赞分享,谢谢老铁~ 1.需求描述 根据业务需求将不同的法律法规,展示不同的3d立体渐变柱状图。 2.先看下效果图 3. 确定三面的颜色,这里我是自定义的颜色 4.然后绘画三个面对应的函数,且注册 5.重点在renderItem 自定义渲染函数上 5.最后看全文吧,这个

    2024年02月12日
    浏览(41)
  • Java 基于 Apache ECharts 实现:柱状图、折线图、环形图等案例

    效果图 源代码 复用 如果想复用上面的代码,只需要把xAxis和series的data改下就行。 效果图 源代码 复用 如果想复用上面的代码,只需要把xAxis和series改下就行。 效果图 源代码 复用 如果想复用上面的代码,只需要把tooltip的data和series的data改下就行。 效果图 源代码 复用 如果

    2024年02月10日
    浏览(36)
  • vue echarts实现根据选择项年月时间切换数据显示柱状图,vue页面监听自适应

    echarts配置文档参考:Documentation - Apache ECharts 功能:可进行月度、年度切换显示相应的收入和支出柱状图数据; 这里进行了柱状图的简化配置,X轴Y轴都有所改写,具体的简化配置下文会贴出代码,参照功能开发时按照自己的需要去处理; 这里也会提到在开发时会遇到的问题

    2024年02月15日
    浏览(34)
  • vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

    一、实现效果 使用echarts实现省市地图绘制,你也可以绘制全国地图。 根据数据在地图显示柱状图,根据经纬度实现定位。 根据数据显示数据,涟漪动态效果。 当然你也可以根据你自己的需求,增删效果哦。 二、实现方法 1、安装echarts插件 2、获取省市json数据 https://datav.

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包