Echarts-实现3D柱状图显示，并单个柱子变色

已于 2023-03-13 22:31:15 修改
阅读量1.3k 收藏 3
点赞数 3
分类专栏： 可视化图形 文章标签： echarts 前端 javascript
于 2022-11-24 16:11:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41675812/article/details/128020860
版权

效果如下：

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模拟3D柱状图+渐变色柱子</title>

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"
    ></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="bar" style="width: 1000px; height: 500px"></div>
    <script type="text/javascript">
      let myBarChart = echarts.init(document.getElementById('bar'))
      // 得到的数据
      let seriesData1 = [
        {
          name: '国君',
          value: 20,
        },
        {
          name: '中信',
          value: 100,
        },
        {
          name: '中金',
          value: 50,
        },
        {
          name: '华泰',
          value: 44,
        },
        {
          name: '海通',
          value: 12,
        },
      ]
      // 柱子降序排列
      seriesData1.sort((a, b) => b.value - a.value)
      console.log(seriesData1)

      // x轴证券公司名称
      let xData = []
      seriesData1.forEach((item) => {
        xData.push(item.name)
      })
      // 数据
      let seriesData = []
      seriesData1.forEach((item) => {
        seriesData.push(item.value)
      })

      // 颜色组
      let linearArr = [
        '#4D89FF',
        '#84BEFF',
        '#3C6CCC',
        '#FFA95D',
        '#FF7F0E',
        '#CC650B',
        '#E46F07',
      ]

      // 绘制左侧面
      const offsetX = 10,
        sliderWidth = 7,
        offsetTick = 10
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // shape是从custom传入的
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          const c0 = [shape.x - offsetTick, shape.y]
          const c1 = [shape.x - offsetTick + offsetX, shape.y]
          const c2 = [xAxisPoint[0] - offsetTick + offsetX, xAxisPoint[1]]
          const c3 = [xAxisPoint[0] - offsetTick, xAxisPoint[1]]
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath()
        },
      })
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          const c1 = [shape.x - offsetTick + offsetX, shape.y]
          const c2 = [
            shape.x - offsetTick + offsetX + sliderWidth,
            shape.y - sliderWidth,
          ]
          const c3 = [
            xAxisPoint[0] - offsetTick + offsetX + sliderWidth,
            xAxisPoint[1] - sliderWidth + 4,
          ]
          const c4 = [shape.x - offsetTick + offsetX, xAxisPoint[1]]
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        },
      })
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x - offsetTick, shape.y]
          const c2 = [shape.x - offsetTick + offsetX, shape.y] // 右点
          const c3 = [
            shape.x - offsetTick + offsetX + sliderWidth,
            shape.y - sliderWidth,
          ]
          const c4 = [shape.x - offsetTick + sliderWidth, shape.y - sliderWidth]
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .lineTo(c1[0], c1[1])
            .closePath()
        },
      })

      // 注册三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)

      option = {
        xAxis: {
          axisTick: {
            // 不显示坐标刻度
            show: false,
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          data: xData,
        },
        yAxis: {
          type: 'value',

          // 不显示网格
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            type: 'custom',
            data: seriesData,
            itemStyle: {
              shadowColor: '#000',
              shadowBlur: 100,
            },
            renderItem: function (params, api) {
              let location = api.coord([api.value(0), api.value(1)])
              console.log(seriesData[params.dataIndex])
              return {
                type: 'group',

                children: [
                  // 柱子前面
                  {
                    type: 'CubeLeft',
                    // shape 属性描述了这个矩形的像素位置和大小
                    shape: {
                      api,
                      xValue: api.value(0), //表示取出当前 dataItem 中第一个维度的数值
                      yValue: api.value(0),
                      x: location[0],
                      y: location[1],
                    },
                    style: {
                      //柱子阴影
                      shadowColor:
                        xData[params.dataIndex] === '海通'
                          ? '#FF7F0E'
                          : '#8DD0FA',
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 7,
                      // 颜色
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,

                          color:
                            xData[params.dataIndex] === '海通'
                              ? linearArr[4]
                              : linearArr[0],
                        },
                        {
                          offset: 1,
                          color:
                            xData[params.dataIndex] === '海通'
                              ? linearArr[3]
                              : linearArr[1],
                        },
                      ]),
                    },
                  },
                  // 柱子侧面
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                    },
                    style: {
                      //柱子阴影
                      shadowColor:
                        xData[params.dataIndex] === '海通'
                          ? '#FF7F0E'
                          : '#8DD0FA',
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 7,
                      //颜色
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color:
                            xData[params.dataIndex] === '海通'
                              ? linearArr[6]
                              : linearArr[2],
                        },
                        {
                          offset: 1,
                          color:
                            xData[params.dataIndex] === '海通'
                              ? linearArr[5]
                              : linearArr[2],
                        },
                      ]), //平面颜色
                    },
                  },
                  // 柱子顶部
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                    },
                    style: {
                      //柱子阴影
                      shadowColor:
                        xData[params.dataIndex] === '海通'
                          ? '#FF7F0E'
                          : '#8DD0FA',
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 7,
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color:
                            xData[params.dataIndex] === '海通'
                              ? linearArr[4]
                              : linearArr[0],
                        },
                        {
                          offset: 1,
                          color:
                            xData[params.dataIndex] === '海通'
                              ? linearArr[3]
                              : linearArr[1],
                        },
                      ]), //平面颜色
                    },
                  },
                ],
              }
            },
          },
        ],
      }
      myBarChart.setOption(option)
    </script>
  </body>
</html>
且陶陶º
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
3D柱状图 给每根柱子设置不同的颜色.zip
12-21
3D柱状图 给每根柱子设置不同的颜色.zip
Echarts 设置柱状图颜色渐变以及柱状图粗细（补充：其他样式，比如横向柱状图，折线区域颜色渐变，x，y轴文字颜色，轴颜色，分割线颜色等）
程序猿小白的博客
07-23 5416
1、横向柱状图 series: [{ type: 'bar', barCategoryGap:'88%', barWidth:13, itemStyle: { normal: { color: new echarts.graphic.L...
echarts的3D柱状图
最新发布
zhuxiaolong1234的博客
02-27 455
【代码】echarts的3D柱状图。
01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等
热门推荐
X北辰北的博客
01-13 1万+
描述 在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCharts进行定制。接下来我们先对第一个图表——柱状图，进行定制。 我们先来看一下UI设计稿中的柱状图： 其次再看一下eCharts官网默认的柱状图： 除去DIV内边框的晕眩效果可以通过CSS或者直接拿切图...
echarts如何给柱形图的每个柱子设置不同颜色
yayayu_的博客
02-29 1万+
echarts如何给柱形图的每个柱子设置不同颜 https://www.cnblogs.com/snowhite/p/9178104.html 总结下这几日用echarts库作基本图形遇到的一些问题。 echarts快速上手可参考官网： http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%2...
echarts:实现3D柱状图 柱状图渐变颜色设置
weixin_44899642的博客
07-08 2808
重点部分： 对于柱状图颜色的设置： (1): 其中柱状图的最上方的斜边形设置为type:‘pictorialBar’, symbol: ‘diamond’, 菱形 symbolPosition: ‘end’, (2):对于柱状图本身的设置 type: ‘bar’,
echarts 3.8.5 含 bar3d控件
01-02
echarts 3.8.5 含 bar3d控件,官方只发布到3.8.4，我从官网例子里抠出的3.8.5的包
116Echarts - 热力图（Heatmap on Cartesian）
阿甘兄
05-05 3008
效果图 源代码 app.title = '笛卡尔坐标系上的热力图'; var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p'...
ECharts之3D立体柱状图一
关注最新技术问题并持续维护更新
11-16 2671
效果图 背景图片 下载ECharts npm install echarts --save 引入并注册全局ECharts     在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import echarts from 'echarts' Vue.prototy
echarts 3D 柱状图
qq_43730595的博客
04-01 2277
echarts 3D柱状图
echarts-省份地图+柱状图组合.zip
03-26
echarts 省份地图+柱状图组合。可以缩放，拖拽，很多朋友在找，现在分享给大家自己，做个参考吧，echarts版本3.3的，
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10...
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
echarts-柱状图-地图Demo.zip
11-07
Demo描述：柱状图表10s动态更新，地图图标10s动态更新业务相关的省份高亮（根据数据值所属Rang动态分配不同的高亮显示） Demo代码带注释，资源包括js/css/image/html Demo展示地址：...
jQuery插件Echarts实现的渐变色柱状图
10-20
本文主要介绍了jQuery插件Echarts实现渐变色柱状图的实例。具有很好的参考价值。下面跟着小编一起来看下吧
echarts给柱状图某个柱子设置颜色
weixin_51609337的博客
05-26 1万+
1.引用官网的例子，运行后是默认的颜色。 2.给柱状图整体设置颜色 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{
echarts图表渐变色 + 每个柱子不同颜色设置
baidu_36095053的博客
08-04 1万+
echarts柱状图，默认所有柱子都是同一个颜色，显示效果差强人意，本文介绍如果修改成为每个柱子添加不同的颜色，以及如何添加渐变色，丰富图表的显示鲜果。先看效果：每个柱子颜色不同每个柱子都有自己的渐变色。
echarts vue 实现3D柱状图
03-25
A：要在vue中实现3D柱状图，可以使用echarts-liquidfill插件。这个插件是一个基于Three.js封装的echarts插件，并且可以支持3D柱状图、水球图等。下面是实现3D柱状图的代码示例： 1.安装插件 ``` npm install echarts-liquidfill --save ``` 2.引入插件 在main.js中引入插件 ``` import 'echarts-liquidfill'; ``` 3.使用echarts绘制3D柱状图 在组件中使用echarts绘制3D柱状图，代码如下： ``` <template> <div id="bar-chart"></div> </template> <script> import echarts from 'echarts'; export default { mounted() { this.drawChart(); }, methods: { drawChart() { // 初始化echarts var myChart = echarts.init(document.getElementById('bar-chart')); // 配置项 var option = { tooltip: {}, visualMap: { max: 100, inRange: { color: ['#00aaff', '#11ff00'] } }, xAxis3D: { type: 'category', data: ['A', 'B', 'C', 'D', 'E', 'F'] }, yAxis3D: { type: 'category', data: ['2019', '2020', '2021'] }, zAxis3D: { type: 'value' }, grid3D: { boxWidth: 200, boxDepth: 80, axisLine: { lineStyle: { color: '#999' } }, axisPointer: { lineStyle: { color: '#fff' } }, light: { main: { intensity: 1.2 }, ambient: { intensity: 0.3 } } }, series: [{ type: 'bar3D', data: [ ['A', '2019', 80], ['B', '2019', 50], ['C', '2019', 60], ['D', '2019', 70], ['E', '2019', 40], ['F', '2019', 30], ['A', '2020', 30], ['B', '2020', 70], ['C', '2020', 60], ['D', '2020', 40], ['E', '2020', 50], ['F', '2020', 30], ['A', '2021', 20], ['B', '2021', 40], ['C', '2021', 50], ['D', '2021', 80], ['E', '2021', 90], ['F', '2021', 70] ], shading: 'lambert', label: { textStyle: { fontSize: 16, borderWidth: 1 } }, itemStyle: { opacity: 0.8 } }] }; // 绘制图表 myChart.setOption(option); } } } </script> <style scoped> #bar-chart { width: 600px; height: 500px; } </style> ``` 以上代码通过echarts提供的3D柱状图配置项及series类型(bar3D)，实现了一个简单的3D柱状图。最后，在图表容器中通过调用drawChart()方法来绘制图表即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

且陶陶º

感谢大人投喂~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值