[JavaScript知识库]echarts 柱状图

官网链接

1. echarts 柱状图上面显示文字 label

	series: [
        {
          name: 'a',
          tooltip: {
            show: false,
          },
          data: this.data,
          type: 'bar',
          barWidth: 16, // 柱条的宽度，不设时自适应。
          barGap: 200, // 不同系列的柱间距离
          itemStyle: {
            normal: {
              color: (param) => {
              	// 渐变色 0, 0, 0, 1代表右下左上 1是说明从那个方向
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: param.data.startColor },
                    { offset: 1, color: param.data.endColor }
                  ])
                },
                // 主要是这个地方
                label: {
                    formatter: "{c}"+'个', //自定义展示 如果想直接显示原数值 这一行可以省略  
                    show: true,
                    position: "top",
                    textStyle: {
                      fontWeight: "bolder",
                      fontSize: "12",
                      color: "#fff"
                    }
                  },
              }
            } ,
          },
          ]

关于 formatter

字符串模板 模板变量有：

{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为 ‘xxx’ 的维度的值，如 {@product} 表示名为 ‘product’ 的维度的值。
{@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

换行展示\n
formatter: “{a}\n{c}”,

https://echarts.apache.org/zh/option.html#series-bar.label.formatter
2. 立体柱状图
发现了三个博主的文章比较👍
https://blog.csdn.net/weixin_45626040/article/details/107607049

https://blog.csdn.net/yh_hh/article/details/120290882

https://www.csdn.net/tags/NtzaYgzsOTAwNTYtYmxvZwO0O0OO0O0O.html

参考了他们的文章之后 自己的代码如下

private get option(){
    return {
      xAxis: {
        type: 'category',
        data: this.data.map(i => i.label),
        // x坐标轴为虚线
        axisLine: {
          lineStyle: {
            color: 'rgba(11, 73, 125, 0.33)',
            opacity: 0.8
          }
        },
        // 不展示下面｜
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          color: '#B0E1FF',
          fontSize: 12 // 字体大小
        }
      },
      yAxis: {
        type: 'value',
        // 不展示刻度线
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          color: '#B0E1FF',
          fontSize: 12 // 字体大小
        }
      },
      // 栅格
      grid: {
        left: '0',
        right: '0',
        bottom: '0%',
        top: '16px',
        containLabel: true
      },
      series: [
        // 数据低下的圆片
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [16, 8], // 宽，高
          symbolOffset: [0, 4], // 左 上
          z: 3,
          symbol: 'diamond',
          itemStyle: {
            color: params => params.data.startColor
          },
          data: this.data
        },
        // 数据的柱状图
        {
          name: '',
          type: 'bar',
          barWidth: 16,  // 柱条的宽度，不设时自适应。
          barGap: '-100%', // 不同系列的柱间距离
          itemStyle: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: params.data.startColor },
                { offset: 1, color: params.data.endColor }
              ]);
            },
          },
          data: this.data
        },
        // 数据顶部的样式
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'diamond',
          symbolSize: [16, 8],
          symbolOffset: [0, -4],
          z: 3,
          itemStyle: {
            normal: {
              color: params => params.data.endColor,
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: {
                  fontSize: '12',
                  color: '#B0E1FF',
                }
              }
            }
          },
          symbolPosition: 'end',
          data: this.data
        },
      ]
    }
  }

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖