3D柱形图顶部添加波纹

Radish_05

已于 2024-02-07 15:54:39 修改

阅读量225

点赞数 1

分类专栏： echarts 文章标签： echarts

于 2024-02-07 15:53:52 首次发布

本文链接：https://blog.csdn.net/Radish_05/article/details/136070398

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

3D柱形图顶部添加波纹

效果图：
在这里插入图片描述

完整代码如下：

<template>
  <div ref="chartRef" id="mycharts"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      chartData: {
        x: ["苹果", "香蕉", "草莓", "猕猴桃", "橘子", "葡萄"],
        y: [24, 56, 21, 52, 48, 53],
      }
    };
  },
  mounted() {
      this.initChart()
  },
  methods: {
    initChart() {
      let myChart = echarts.init(this.$refs["chartRef"]);
      let dom = 360;
      let barWidth = dom / 20;
      let sideData = [];
      let datalength = [];

      if (this.chartData.y && this.chartData.y.length) {
        this.chartData.y.forEach(item => {
          let num = item == 0 ? 0 : item + 1.6;

          sideData.push(num);
          datalength.push(0);
        });
      }

      let option = {
        grid: {
          top: 30,
          bottom: 40,
          left: 50,
          right: 50,
        },
        xAxis: {
          data: this.chartData.x,
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#5DBBFE",
            interval: 0,
            fontSize: 16,
           }
        },
        yAxis: [
          {
            axisLabel: {
              color: "#5DBBFE",
              fontSize: 16,
            },
            splitLine: {
              lineStyle: {
                color: "#1B4867",
                type: "dotted",
              },
            },
          }
        ],
        series: [
          {
            type: 'bar',
            stack: '圆',
            barWidth: barWidth,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "transparent"
              }, {
                offset: 0.2,
                color: "rgba(12, 127, 244, .2)"
              }, {
                offset: 1,
                color: "rgba(12, 127, 246, 1)"
              }], false),
            },
            data: this.chartData.y,
            barGap: 1
          },
          {
            type: 'bar',
            barWidth: barWidth / 3,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "transparent"
              }, {
                offset: 0.2,
                color: "rgba(12, 127, 244, .2)"
              }, {
                offset: 1,
                color: "rgba(12, 127, 246, 1)"
              }], false),
            },
            barGap: 0,
            data: sideData
          },
          {
            type: 'pictorialBar',
            itemStyle: {
              borderWidth: 1,
              borderColor: '#96caff',
              color: '#96caff'
            },
            symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
            symbolSize: ['24', '12'],
            symbolOffset: ['0', '-9'],
            symbolRotate: -5,
            symbolPosition: 'end',
            data: this.chartData.y,
            label: {
              show: true,
              position: "top",
              fontSize: 16,
              color: '#fff'
            },
            z: 3
          },
          {
            name: '内圆',
            type: 'scatter',
            stack: '圆',
            data: datalength,
            label: false,
            symbolSize: 15,
            itemStyle: {
              borderColor: '#2ea7e0',
              borderWidth: 2,
              color: "transparent",
              opacity: 0.7
            },
            z: 4
          }, {
            name: '内圆框',
            type: 'scatter',
            stack: '圆',
            data: datalength,
            label: false,
            symbolSize: 35,
            itemStyle: {
              borderColor: '#2ea7e0',
              borderWidth: 2,
              color: "transparent",
              opacity: 0.4
            },
            z: 5
          },
          {
            name: '内圆框',
            type: 'scatter',
            stack: '圆',
            data: datalength,
            label: false,
            symbolSize: 60,
            itemStyle: {
              borderColor: '#2ea7e0',
              borderWidth: 2,
              color: "transparent",
              opacity: 0.2
            },
            z: 5
          }
        ],
      };

      myChart.setOption(option);
    }
  },
}
</script>