echarts实现立体柱状图

最新推荐文章于 2025-02-24 14:41:01 发布

ywh-愿来

最新推荐文章于 2025-02-24 14:41:01 发布

阅读量7.3k

点赞数 7

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/yh_hh/article/details/120290882

版权

这篇博客展示了如何使用ECharts库创建一个复杂的图表，包括设置图表背景、坐标轴样式、渐变颜色和数据标签等。代码中详细定义了各个系列的数据和样式，涉及柱状图、钻石图和阴影效果，以实现独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：在这里插入图片描述
代码：写的比较着急，有些地方没有改，记录一下

    initChart2(dom) {
      const myChart = echarts.init(dom)
      var xData2 = ['容城谷庄']
      var data1 = [50]

      myChart.setOption({
        backgroundColor: 'rgba(0,0,0,0)',
        grid: {
          left: 0,
          bottom: 15,
          top: 15,
          right: 80
        },
        xAxis: {
          data: xData2,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            // textStyle: {
            //     color: '#fff',
            //     fontSize: 20,
            // },
            // 不显示Y轴数值
            formatter: function() {
              return ''
            }
          }
        },
        series: [
          // 数据低下的圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [41, 15],
            symbolOffset: [0, 8],
            z: 12,
            symbol: 'diamond',
            itemStyle: {
              opacity: 1,
              color: function(params) {
                return new echarts.graphic.LinearGradient(
                  1,
                  // 深色#2BA9ED 浅色 #34EDF2
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#E1DC53' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#E1DC53' // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
              // color: 'transparent'
            },
            data: [1]
          },
          // 数据的柱状图
          {
            name: '',
            type: 'bar',
            barWidth: 41,
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: function(params) {
                return new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#E1DC53' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#E8AE62' // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },

            data: data1
          },
          // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
          {
            type: 'bar',
            symbol: 'diamond',
            barWidth: 43,
            itemStyle: {
              color: 'transparent'
            },
            data: data1
          },
          // 数据顶部的样式
          {
            name: '',
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolSize: [41, 15],
            symbolOffset: [0, -8],
            z: 12,
            itemStyle: {
              normal: {
                opacity: 1,
                color: function(params) {
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    [
                      {
                        offset: 0,
                        color: '#E1DC53' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#E8AE62' // 100% 处的颜色
                      }
                    ],
                    false
                  )
                },
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: '#FFFFFF',
                    fontSize: 20,
                    top: 50
                  },
                  formatter: function(param) {
                    return param.data + '%'
                  }
                }
              }
            },
            symbolPosition: 'end',
            data: data1
          },

          // 阴影的顶部
          {
            name: '', // 头部
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolSize: [41, 15],
            symbolOffset: [0, -8],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
              color: '#064164',
              opacity: 0.3,
              borderWidth: 1,
              borderColor: '#526558'
            },
            data: [100]
          },
          // 后面的背景
          {
            name: '2019',
            type: 'bar',
            barWidth: 41,
            barGap: '-100%',
            z: 0,
            itemStyle: {
              color: '#304047'
            },

            data: [100]
          }
        ]
      })
    },
    getChart() {
      this.popShow = !this.popShow
    },
    async changeEcharts() {
      await this.getChart()
      setTimeout(() => {
        document.querySelectorAll('.chart1_chart').forEach(dom => {
          this.initChart1(dom)
        })
      }, 0)
      setTimeout(() => {
        document.querySelectorAll('.chart2_chart').forEach(dom => {
          this.initChart2(dom)
        })
      }, 0)
    }