echarts 实现 3d 柱状图

已于 2022-10-12 09:52:50 修改
阅读量5.3k 收藏 24
点赞数 4
文章标签： echarts javascript vue.js
于 2022-07-28 20:39:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38992765/article/details/126043321
版权

echarts 实现 3d 柱状图

柱状图

实现要求

  1. 能够调整大小
  2. 实现3d效果，可以改变颜色

前置环境

vue: ^3.1.2
echarts: ^5.3.3
lodash: ^4.17.21

效果

在这里插入图片描述
调整大小和颜色

在这里插入图片描述

代码

baseCharts.vue

<template>
  <div
    id="baseBarCharts"
    ref="echartsRef"
  ></div>
</template>
<script>
import { onMounted, ref } from "vue"
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
  name: "barCharts",
  setup () {
    let baseEcharts = null
    let echartsRef = ref(null)
    let linearArr = [
      "#0079e4 ",
      "#000af5 ",
      "#36c9ff ",
      "#003efa",
      "#0099e4",
      "#4a9df7",
      "rgba(0, 31, 117, 0.3)",
      "rgba(0, 153, 228, 0.3)",
    ]
    function threeDimensionalLine (offsetX = 20, sliderWidth = 8, offsetTick = 14) {
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂，shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint
          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 xAxisPoint = shape.xAxisPoint
          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()
        },
      })

      const CubeBottom = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [xAxisPoint[0] - offsetTick, xAxisPoint[1]]
          const c2 = [xAxisPoint[0] - offsetTick, xAxisPoint[1] + 6] // 右点
          const c3 = [xAxisPoint[0] - offsetTick + offsetX + sliderWidth, xAxisPoint[1] + 6]
          const c4 = [xAxisPoint[0] - offsetTick + offsetX + sliderWidth, xAxisPoint[1] - 6]
          const c5 = [xAxisPoint[0] - 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])
            .lineTo(c5[0], c5[1])
            .lineTo(c1[0], c1[1])
            .closePath()
        },
      })
      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft)
      echarts.graphic.registerShape("CubeRight", CubeRight)
      echarts.graphic.registerShape("CubeTop", CubeTop)
      echarts.graphic.registerShape("CubeBottom", CubeBottom)
    }
    let defalutOptions = ref({
      textStyle: {
        fontFamily: "PingFang",
      },
      grid: {
        top: "12%",
        left: "1%",
        right: "2%",
        bottom: "10%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          alignWithLabel: true,
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#3a79c2",
          },
        },
      },
      tooltip: {
        show: true,
        position: "bottom",
        backgroundColor: "#fff",
        textStyle: {
          color: "#000",
          //   fontStyle: "PingFang",
          fontSize: 12,
          //   fontWeight: "normal",
          lineHeight: 24,
        },
      },
      series: [
        {
          type: "custom",
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
              type: "group",
              children: [
                {
                  type: "CubeLeft",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: linearArr[0],
                      },
                      {
                        offset: 1,
                        color: linearArr[1],
                      },
                    ]),
                  },
                },
                {
                  type: "CubeRight",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: linearArr[2],
                      },
                      {
                        offset: 1,
                        color: linearArr[3],
                      },
                    ]),
                  },
                },
                {
                  type: "CubeTop",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: linearArr[4],
                      },
                      {
                        offset: 1,
                        color: linearArr[5],
                      },
                    ]),
                  },
                },
                {
                  type: "CubeBottom",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: linearArr[6],
                      },
                      {
                        offset: 1,
                        color: linearArr[7],
                      },
                    ]),
                  },
                },
              ],
            }
          },
          data: [],
        },

        {
          type: "bar",
          label: {
            normal: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "#fff",
            },
          },
          itemStyle: {
            color: "transparent",
          },
          data: [],
        },
      ],
    })
    onMounted(() => {
      baseEcharts = echarts.init(echartsRef.value)
      window.addEventListener(
        "resize",
        _.debounce(() => {
          baseEcharts.resize()
        }, 150)
      )
    })
    function setOptions (options, linerArrOptions, barWidth = {}) {
      linearArr = linerArrOptions
      if (barWidth.offsetX && barWidth.sliderWidth) {
        threeDimensionalLine(
          barWidth.offsetX,
          barWidth.sliderWidth,
          (barWidth.offsetX + barWidth.sliderWidth) / 2
        )
      } else {
        threeDimensionalLine()
      }
      baseEcharts.setOption(options, true)
    }
    return {
      echartsRef,
      setOptions,
      defalutOptions,
    }
  },
}
</script>
<style lang="scss" scoped>
#baseBarCharts {
  width: 100%;
  height: 100%;
}
</style>

使用

<template>
  <div style="width:600px;height:500px;background-color: #000;">
    <base-charts ref="baseChartsRef"></base-charts>
  </div>
  <br />
  <div style="width:600px;height:500px;background-color: #000;">
    <base-charts ref="baseChartsRefPlus"></base-charts>
  </div>
</template>

<script>
import baseCharts from "@/components/baseCharts.vue";
import { onMounted, ref } from 'vue';
export default {
  name: "basecharts",
  components: {
    baseCharts,
  },
  setup () {
    const baseChartsRef = ref(null)
    const baseChartsRefPlus = ref(null)
    onMounted(() => {
      let { defalutOptions, setOptions } = baseChartsRef.value
      defalutOptions.xAxis.data = ['深圳', '广州', '汕头']
      defalutOptions.series[0].data = [100, 200, 300]
      defalutOptions.series[1].data = [100, 200, 300]
      setOptions(defalutOptions, [
        "#4582ff", // 正面颜色渐变
        "#582ee8", // 正面颜色渐变
        "#638afa", // 侧面颜色渐变
        "#6757f1", // 侧面颜色渐变
        "#4c70fc", // 顶部颜色渐变
        "#4582ff", // 顶部颜色渐变
        "rgba(90,75,246,0.3)", // 底部颜色渐变
        "rgba(0,31,117,0.3)" // 底部颜色渐变
      ]);
      // 大小可调整
      baseChartsRefPlus.value.defalutOptions.xAxis.data = ['深圳', '广州', '汕头']
      baseChartsRefPlus.value.defalutOptions.series[0].data = [100, 200, 300]
      baseChartsRefPlus.value.defalutOptions.series[0].data = [100, 200, 300]
      baseChartsRefPlus.value.setOptions(baseChartsRefPlus.value.defalutOptions, [
        "#0079e4", // 正面颜色渐变
        "#000af5", // 正面颜色渐变
        "#36c9ff", // 侧面颜色渐变
        "#003efa", // 侧面颜色渐变
        "#0099e4", // 顶部颜色渐变
        "#4a9df7", // 顶部颜色渐变
        "rgba(0,31,117,0.3)", // 底部颜色渐变
        "rgba(0,153,228,0.3)" // 底部颜色渐变
      ], { offsetX: 36, sliderWidth: 16 }) // 正面宽度 ， 侧面宽度

    })
    return {
      baseChartsRef,
      baseChartsRefPlus
    };
  },
};
</script>

<style scoped>
.schart-box {
  display: inline-block;
  margin: 20px;
}
.schart {
  width: 600px;
  height: 400px;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
</style>

10.12 更新

横行柱状图

效果

在这里插入图片描述

代码

<template>
  <div id="charts" ref="echartsRef"></div>
</template>
<script>
import { onMounted, ref } from "vue"

export default {
  name: "baseLine",
  props: {
    isneedPercent: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    let baseEcharts = null
    let echartsRef = ref(null)
    let linearArr = [
      "#f7763f",
      "#fa2a31",
      "#ff9d61",
      "#fa2a31",
      "#ff9d61",
      "rgba(247,105,109,0.9)",
      "#fa2a31",
      "#ff9d61",
    ]
    let defalutOptions = ref({
      textStyle: {
        fontFamily: "PingFang",
        fontSize: 16,
      },
      tooltip: {
        trigger: "item",
        valueFormatter: value => (props.isneedPercent ? value + "%" : value),
      },
      grid: {
        top: "2%",
        left: "20%",
        bottom: "10%",
      },
      xAxis: {
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          formatter: props.isneedPercent ? "{value}%" : "{value}",
        },
      },
      yAxis: {
        data: [],
        splitLine: {
          show: false,
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 12,
            padding: [0, 5, 0, 0],
          },
        },
      },
      series: [
        // 最左边顶部
        {
          name: "",
          type: "pictorialBar",
          symbolSize: [5, 20],
          symbolOffset: [-2, 0],
          z: 12,
          itemStyle: {
            opacity: 1,
            color: linearArr[0],
          },
          data: [1, 1, 1, 1, 1],
          tooltip: {
            show: false,
          },
        },
        {
          name: "2020",
          type: "bar",
          barWidth: 20,
          barGap: "-100%",
          itemStyle: {
            //lenged文本
            opacity: 1,
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: linearArr[1], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: linearArr[2], // 100% 处的颜色
                },
              ],
              false
            ),
          },
          label: {
            formatter: props.isneedPercent ? "{c} %" : "{c}",
          },
          data: [],
        },
        {
          type: "bar",
          barWidth: 20,
          barGap: "-100%",
          itemStyle: {
            color: "transparent",
          },
          label: {
            formatter: props.isneedPercent ? "{c} %" : "{c}",
          },
          data: [],
        },
        {
          name: "", //头部
          type: "pictorialBar",
          symbolSize: [5, 20],
          symbolOffset: [2, 0],
          z: 12,
          symbolPosition: "end",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: linearArr[3], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: linearArr[4], // 100% 处的颜色
                },
              ],
              false
            ),
            opacity: 0.2,
          },
          label: {
            formatter: props.isneedPercent ? "{c} %" : "{c}",
          },
          data: [100, 100, 100, 100, 100, 100],
          tooltip: {
            show: false,
          },
        },
        {
          name: "",
          type: "pictorialBar",
          symbolSize: [5, 20],
          symbolOffset: [2, 0],
          z: 12,
          itemStyle: {
            opacity: 1,
            color: linearArr[5],
          },
          symbolPosition: "end",
          data: [],
          tooltip: {
            show: false,
          },
          label: {
            show: true,
            position: "right",
            fontSize: 12,
            color: "#fff",
            formatter: props.isneedPercent ? "{c} %" : "{c}",
          },
        },
        {
          name: "all",
          type: "bar",
          barWidth: 20,
          barGap: "-100%",
          z: 0,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: linearArr[6], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: linearArr[7], // 100% 处的颜色
                },
              ],
              false
            ),
            opacity: 0.2,
          },
          label: {
            formatter: props.isneedPercent ? "{c} %" : "{c}",
          },
          data: [100, 100, 100, 100, 100, 100],
          tooltip: {
            show: false,
          },
        },
      ],
    })

    onMounted(() => {
      baseEcharts = echarts.init(echartsRef.value)
      window.addEventListener(
        "resize",
        _.debounce(() => {
          baseEcharts.resize()
        }, 150)
      )
      // baseEcharts.setOption(defalutOptions.value)
    })
    function setOptions(options, colors) {
      options.series[0].itemStyle.color = colors[0]
      options.series[1].itemStyle.color.colorStops = [
        { offset: 0, color: colors[1] },
        { offset: 1, color: colors[2] },
      ]
      options.series[3].itemStyle.color.colorStops = [
        { offset: 0, color: colors[3] },
        { offset: 1, color: colors[4] },
      ]
      options.series[4].itemStyle.color = colors[5]
      options.series[5].itemStyle.color.colorStops = [
        { offset: 0, color: colors[6] },
        { offset: 1, color: colors[7] },
      ]
      baseEcharts.setOption(options, true)
    }
    return {
      echartsRef,
      setOptions,
      defalutOptions,
    }
  },
}
</script>
<style lang="scss" scoped>
#charts {
  width: 100%;
  height: 100%;
}
</style>

使用

<template>
  <div>
    <pipeBar ref="pipeBarRef" style="width: 500px; height: 400px"></pipeBar>
  </div>
</template>
<script>
import { onMounted, ref } from "vue"
import pipeBar from "@/components/echarts/pipeBar"

export default {
  setup() {
    let pipeBarRef = ref(null)
    onMounted(() => {
      let { setOptions, defalutOptions } = pipeBarRef.value
      defalutOptions.series[1].data =
        defalutOptions.series[2].data =
        defalutOptions.series[4].data =
          [20, 60, 10]
      defalutOptions.series[3].data = defalutOptions.series[5].data = [100, 100, 100]
      defalutOptions.yAxis.data = ["本科及以上", "大专", "大专及一下"]
      setOptions(defalutOptions, [
        "#f7763f", // 颜色值
        "#fa2a31",// 颜色值
        "#ff9d61",// 颜色值
        "#fa2a31",// 颜色值
        "#ff9d61",// 颜色值
        "rgba(247,105,109,0.9)",// 颜色值
        "#fa2a31",// 颜色值
        "#ff9d61",// 颜色值
      ])
    })
    return {
      pipeBarRef,
    }
  },
  components: {
    pipeBar,
  },
}
</script>
<style lang="scss"></style>
一个抱抱一首歌
关注
  • 4
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue+echarts——实现3D地图+3D柱状图 效果—
fksdskjfzxklzk的博客
04-27 419
我这边是存储到当前文件夹中了。
echarts 3D柱状图
weixin_43955340的博客
04-10 898
$.get(ROOT_PATH + 'data/asset/data/life-expectancy-table.json', function (data) { var option = { //color: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '...
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
echarts的3D柱状图
zhuxiaolong1234的博客
02-27 533
【代码】echarts的3D柱状图。
echarts绘制三维柱状图
pengbr的博客
06-02 1219
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库，主要用于数据的可视化展示。ECharts 支持丰富的图表类型，如折线图、柱状图、饼图、地图、K线图等，可以满足不同类型数据的展示需求。 文档地址：echarts 本次所绘制三维柱状图主要使用的是示例源代码，在此基础上做了些修改。 引入CDN 使用echarts需要导入echarts和echarts-gl。 免费的CDN服务可访问网址：Staticfile CDN <!-- 引入 ECharts 文件 --> &
vue3 echarts实现3D立体柱状图效果，多柱状图
nlhhln的博客
07-25 3584
使用插件vchart+echarts5.x按需引入实现立体柱状图
echarts的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 1万+
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
echarts实现3D效果柱状图
dqfkkll的博客
09-14 1万+
echarts3D效果柱状图的实现 这个太难了，我花了两天终于调成我想要的效果啦~，开心，要是官网上有例子就好了，太难调了。不过功夫不负有心人，话不多说，看代码吧 效果图： html代码 <div id="jczy_bar" :canvas="3D" style="height: 240px;width:600px;margin: 0 auto;"></div> JS代码 // 调用 var serveTBar = echarts.init(document.getElement
echarts实现3d柱状图的两种方式
weixin_69773376的博客
12-06 1万+
echarts实现3d柱状图效果
echarts 3D 柱状图
aibujin的博客
05-20 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
echarts制作3d柱形图
泪的结晶的博客
11-24 5000
1.引入echarts 2.main.js引入 import * as echarts from 'echarts' import 'echarts-gl'; Vue.prototype.$echarts = echarts 3.页面制作 <template> <div id="output_3DBarCharts"></div> </template> <script> import { get3DOptions .
Echarts实现3d图表
热门推荐
前进中的蜗牛
05-12 2万+
经过在Echarts实例demo中测试发现，3d柱状图、3d散点图与3d线图的数据格式都是一样的，只要修改数据类型就能实现不同的3d图表展示。 **所需文件：**echarts.js和echarts-gl.js echarts.js一定要使用4.1以上版本，不然会报错。 echarts-gl.js控制3d的效果显示。 实现3d散点图的代码: &amp;lt;script type=&quot;text/...
使用echarts 实现3D地球
08-13
**使用ECharts实现3D地球**\n\nECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持自定义交互和动画效果。在ECharts中，3D地球的实现是通过其强大的3D渲染...
Echarts实现的地图关联柱状图
08-19
Echarts实现的地图关联柱状图
极致呈现系列之：ECharts3D柱状图的维度穿梭
九仞山的专栏
06-30 1173
ECharts3D柱状图的使用
echarts实现3D柱状图(视觉层面)
最新发布
askuld的博客
06-28 677
完整实例，copy就可直接使用。
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts实现3D柱状图
07-27
要实现echarts的3D柱状图，可以参考以下步骤： 1. 首先，你可以查看echarts官方网站，了解echarts自定义图形的详细用法。\[1\] 2. 参考你提供的案例，可以创建左右两个面，也就是两个柱子。为了形成一点对比，可以稍微调整左右两个面的颜色。同时，可以使用"type: 'pictorialBar'"来实现底部和顶部的效果。\[2\] 3. 在代码中，可以设置柱状图的柱宽（barWidth）为一个固定值，例如30。如果改动这个值导致柱子形状变形，可以调整series中每一个对象的symbolOffset的值。\[3\] 4. 对于双柱状图，可以在series数组中定义多个元素，前几个元素表示"本期"柱状图，后几个元素表示"同期"柱状图。每个柱子都由上中下三部分组成，因此需要定义多个series元素来表示柱子的主体部分、底部和顶部。为了达到整体性的效果，每个柱状图的三部分颜色需要统一。\[3\] 通过以上步骤，你可以实现echarts的3D柱状图。希望对你有帮助！ #### 引用[.reference_title] - *1* [echarts实现3d柱状图的两种方式](https://blog.csdn.net/weixin_69773376/article/details/128199545)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts 3d柱状图](https://blog.csdn.net/xuyanl/article/details/128011860)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [echarts实现3D效果柱状图](https://blog.csdn.net/dqfkkll/article/details/120287486)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值