ECharts叠加柱状图，配置标注示例

最新推荐文章于 2025-02-05 17:19:27 发布

游九尘

最新推荐文章于 2025-02-05 17:19:27 发布

阅读量844

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/u012162516/article/details/143367813

版权

echarts 专栏收录该内容

4 篇文章

订阅专栏

在这里插入图片描述

option = {
      legend: {
        top: 'bottom',  // 标注位置
        x: "center",
        textStyle: {    // 标注样式
          color: "#000",
          fontSize: 12
        },
        icon: 'circle', // 设置图例图标为圆形  
        itemWidth: 10,  // 显示顶部标注左侧图片的宽度
        itemHeight: 10, // 显示顶部标注左侧图片的高度
        itemGap: 30     // 标注间距 
      },
      grid: {
        top: '8%',  // 距离边框距离
        left: '3%',
        right: '3%',
        bottom: '12%',
        containLabel: true
      },
      color: [
        '#5498FD', '#FD5454', '#6F54FD', '#FDA354'
      ],
      tooltip: {  // 提示框
        trigger: "axis",
        axisPointer: {     // 坐标轴指示器的样式
          type: "shadow"   // 显示阴影
        },
        // textStyle: {
        //   color: "rgba(255, 255, 255, 1)"  // 文字颜色
        // },
        // backgroundColor: "rgba(0,0,0,0.8)",  // 背景颜色
        borderColor: "rgba(219, 230, 255, 0.8)", // 提示框边框的颜色
      },
      xAxis: {
        data: [
          "数据1", "数据2", "数据3", "数据4"
        ],
        //name: '日',  // 单位
        axisLabel: {
          color: "#000",  // x轴文字颜色
          fontSize: 10,
        },
        axisLine: {
          lineStyle: {
            color: '#3E6CB1'  // x轴颜色
          }
        },
        axisTick: {
          show: false  // x轴刻度
        }
      },
      yAxis: {
        // name: '%',  // 单位
        nameTextStyle: {
          color: "red",  // 单位的字体颜色
          fontSize: 12,
        },
        axisLabel: {
          color: "#000",  // y轴字体颜色
          fontSize: 12,
        },
        splitLine: {  // 显示所有横线
          show: true,
          lineStyle: {
            color: [
              "#3E6CB1"
            ],
            "width": 1,
            // "type": 'dashed'  // 线的类型：虚线、实线
          },
        }
      },
      series: [
        {
          name: "类型1",
          type: "bar",
          stack: "total",
          label: {
            show: false,
            color: "#000",
            formatter: function (e) {
              // return e.value ? e.value : "";
              // return e.value ? e.seriesName : "";
            },
          },
          itemStyle: {
            borderRadius: [0, 0, 0, 0],
          },
          barWidth: 30,  // 柱状图宽度
          emphasis: {
            focus: "series",
          },
          data: [1, 3, 2, 2, 1, 3, 2, 2, 3, 3],
        },
        {
          name: "类型2",
          type: "bar",
          stack: "total",
          label: {
            show: false,
            color: "#FFFFFF",
            formatter: "{a}",
          },
          emphasis: {
            focus: "series",
          },
          data: [2, 3, 2, 2, 2, 3, 2, 2, 1, 1],
        },
        {
          name: "类型3",
          type: "bar",
          stack: "total",
          label: {
            show: false,
            color: "#FFFFFF",
            formatter: "{a}",
          },
          emphasis: {
            focus: "series",
          },
          data: [1, 3, 2, 2, 1, 3, 2, 2, 3, 3],
        },
        {
          name: "类型4",
          type: "bar",
          stack: "total",
          label: {
            show: false,
            color: "#FFFFFF",
            formatter: "{a}",
          },
          itemStyle: {
            borderRadius: [0, 0, 0, 0],
          },
          emphasis: {
            focus: "series",
          },
          data: [1, 3, 2, 2, 1, 3, 2, 2, 3, 3],
        },
      ],
    }