echarts实现横向柱状图 y轴标签背景色

最新推荐文章于 2024-05-30 23:16:00 发布

阿嘉Jared

最新推荐文章于 2024-05-30 23:16:00 发布

阅读量1.8k

点赞数 1

分类专栏： webgl 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/Maryshaw/article/details/124918894

版权

webgl 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上效果：

在这里插入图片描述

上代码：

import * as echarts from 'echarts';
const option = {
  title: {},
  grid: {
    left: '3%',
    right: '134',
    bottom: '3%',
    top: '3%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    triggerOn: 'none',
    axisPointer: {
      type: 'shadow',
    },
  },
  xAxis: {
    minInterval: 1,
    splitLine: {
      show: false,
    },
  },
  yAxis: {
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 1)',
      // 此处配置背景色
      backgroundColor: 'red',
    },
    type: 'category',
    data: [],
  },
  dataZoom: [
    {
      show: true,
      yAxisIndex: 0,
      width: 8,
      height: '90%',
      showDataShadow: false,
      left: '95%',
      startValue: 0,
      endValue: 5,
    },
    {
      type: 'inside',
    },
  ],
  series: [
    {
      name: '',
      type: 'bar',
      data: [],
      showBackground: true,
      label: {
        show: true,
        position: [193, 5],
        formatter(params) {
          const {value} = params;
          const text = value && Number(value).toFixed(2);
          return `{num|${text}}{unit|万人}`;
        },
        rich: {
          num: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 14,
          },
          unit: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 12,
          },
        },
      },
      barMaxWidth: 10,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
          {offset: 0, color: 'rgba(0, 220, 254, 0)'},
          {offset: 1, color: 'rgba(0, 220, 254, 1)'},
        ]),
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
            {offset: 0, color: 'rgba(0, 220, 254, 0)'},
            {offset: 1, color: 'rgba(0, 220, 254, 1)'},
          ]),
        },
      },
    },
  ],
};

export default option;