Echarts_柱状图属性汇总

fangxinyzj.com 2025-05-29 15:38:25

1、基础柱状图属性

2、常用柱状图属性

3、双Y轴+双柱柱状图属性

4、渐变+圆角柱状图属性

5、横向+渐变+圆角柱状图属性

6、嵌套+圆角柱状图属性

7、堆叠柱状图属性

1、基础柱状图属性

Echarts_柱状图属性汇总

var myChart = echarts.init(document.getElementById('charts'));
var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};
// 使用指定配置项和数据显示图表
myChart.setOption(option);

2、常用柱状图属性

Echarts_柱状图属性汇总

var option = {
        title: {
          text: "主标题",
          textStyle: {
            color: "#333",
          },
          subtext: "副标题",
          subtextStyle: {
            color: "#333",
          },
          left: "center", //标题位置
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["数量"],
          top: "10%",
          right: "10%",
        },
        //图例位置
        grid: {
          top: "26%",
          bottom: "7%",
          left: "10%",
          right: "8%",
        },
        xAxis: {
          type: "category",
          name: "(类目)",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
          name: "(金额)",
          axisTick: { show: true }, //是否显示坐标轴刻度
          axisLine: {
            show: true, //是否显示坐标轴轴线
            lineStyle: {
              color: "#333", //轴线颜色
            },
          },
        },
        //各类柱颜色
        color: ["#5470c6", "#ff93ac", "#26d0ff", "#ffda7b", "#b06ab3"],
        series: [
          {
            type: "bar", //图例类型
            name: "数量", //与legend一致，才可显示
            data: [120, 200, 150, 80, 70, 110, 130],
            label: {
              show: true,
              position: "top", //柱状图上方显示数值
            },
          },
        ],
};

3、双Y轴+双柱柱状图属性

关键代码：数据 yAxis 改为数组；series 中添加 yAxisIndex 对应索引；

Echarts_柱状图属性汇总

const colors = ["#5470c6", "#ff93ac", "#26d0ff", "#ffda7b", "#b06ab3"];
let option = {
      tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["Evaporation", "Precipitation"],
        },
        grid: {
          top: "26%",
          bottom: "7%",
          left: "10%",
          right: "12%",
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: [
          {
            type: "value",
            name: "Evaporation",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "Precipitation",
            position: "right",
            alignTicks: true,
            offset: 0, // 偏移量
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ml",
            },
          },
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
          },
          {
            name: "Precipitation",
            type: "bar",
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
          },
        ],
}

4、渐变+圆角柱状图属性

?关键代码：itemStyle 中圆角：barBorderRadius；渐变：color；

itemStyle: {
  emphasis: {
   barBorderRadius: 16, //圆角
  },
  normal: {
   barBorderRadius: 16, //圆角
   //渐变
   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
   { offset: 0, color: "pink" },
   { offset: 1, color: "#53b5f2" },
   ]),
  },
},

Echarts_柱状图属性汇总

let option = {
       title: {
          text: "主标题",
          textStyle: {
            color: "#333",
          },
          subtext: "副标题",
          subtextStyle: {
            color: "#333",
          },
          left: "center", //标题位置
        },
        legend: {
          data: ["数量", "金额"],
          top: "10%",
          right: "10%",
        },
        grid: {
          top: "26%",
          bottom: "7%",
          left: "10%",
          right: "12%",
        },
        xAxis: {
          type: "category",
          name: "(类目)",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
          name: "(金额)",
          axisTick: { show: true }, //是否显示坐标轴刻度
          axisLine: {
            show: true, //是否显示坐标轴轴线
            lineStyle: {
              color: "#333", //轴线颜色
            },
          },
        },
        series: [
          {
            type: "bar", //图例类型
            name: "数量", //与legend一致，才可显示
            data: [120, 200, 150, 80, 70, 110, 130],
            label: {
              show: true,
              position: "top", //柱状图上方显示数值
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 16, //圆角
              },
              normal: {
                barBorderRadius: 16, //圆角
                //渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "pink" },
                  { offset: 1, color: "#53b5f2" },
                ]),
              },
            },
          },
          {
            type: "bar", //图例类型
            name: "金额", //与legend一致，才可显示
            data: [90, 100, 130, 180, 70, 140, 60],
            label: {
              show: true,
              position: "top", //柱状图上方显示数值
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 16,
              },
              normal: {
                barBorderRadius: 16,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#54a1f7" },
                  { offset: 1, color: "#dc7dfc" },
                ]),
              },
            },
          },
        ],
}

5、横向+渐变+圆角柱状图属性

关键代码：xAxis 与 yAxis 中 type 属性互换

Echarts_柱状图属性汇总

let option = {
       title: {
          text: "主标题",
          textStyle: {
            color: "#333",
          },
          subtext: "副标题",
          subtextStyle: {
            color: "#333",
          },
          left: "center", //标题位置
        },
        legend: {
          data: ["数量", "金额"],
          top: "10%",
          right: "10%",
        },
        grid: {
          top: "26%",
          bottom: "7%",
          left: "10%",
          right: "12%",
        },
        xAxis: {
          type: "value",
          axisTick: { show: true }, //是否显示坐标轴刻度
          axisLine: {
            show: true, //是否显示坐标轴轴线
          },
        },
        yAxis: {
          type: "category",
          data: ["周一", "周二", "周三"],
        },
        series: [
          {
            type: "bar", //图例类型
            name: "数量", //与legend一致，才可显示
            data: [120, 200, 150],
            label: {
              show: true,
              position: "right", //数值显示位置
              formatter: "{c}个",
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 16, //圆角
              },
              normal: {
                barBorderRadius: 16, //圆角
                //渐变
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "pink" },
                  { offset: 1, color: "#53b5f2" },
                ]),
              },
            },
          },
          {
            type: "bar", //图例类型
            name: "金额", //与legend一致，才可显示
            data: [90, 100, 130],
            label: {
              show: true,
              position: "right",
              formatter: "{c}个",
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 16,
              },
              normal: {
                barBorderRadius: 16,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#54a1f7" },
                  { offset: 1, color: "#dc7dfc" },
                ]),
              },
            },
          },
        ],

}

6、嵌套+圆角柱状图属性

?关键代码：series 中柱子重叠位置：symbolOffset；层级：z；

Echarts_柱状图属性汇总

let option = {
       tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五"],
        },
        yAxis: {
          type: "value",
          axisTick: { show: true },
          axisLine: {
            show: true, // 是否显示坐标轴轴线
          },
        },
        color: [
          "#ff93ac",
          "#26d0ff",
          "#ffda7b",
          "#b06ab3",
          "#6ec71e",
          "#ff8547",
        ],
        series: [
          {
            //里层的柱子
            name: "销售部A组",
            type: "pictorialBar", //象形柱状图
            barWidth: 10, //柱子的宽度
            data: [72, 79, 70, 67, 59], //柱子的数据
            symbol: "circle", //柱子的形状
            symbolRepeat: true, //是否重复
            symbolOffset: [-15, 0], //柱子的位置
            symbolBoundingData: 1, //图形的个数
            z: 12, //柱子的层级
          },
          {
            //外层的柱子
            name: "销售部B组",
            type: "pictorialBar",
            barWidth: 30,
            // symbolSize: [40, 18], //调整截面形状
            symbolOffset: [-25, 0],
            symbol: "circle",
            symbolRepeat: true,
            symbolBoundingData: 1,
            itemStyle: {
              color: "",
            },
            data: [82, 89, 90, 97, 79],
          },
          {
            //里面的柱子
            name: "营销部A组",
            type: "pictorialBar",
            data: [73, 80, 71, 75, 64],
            barWidth: 10,
            symbol: "circle",
            symbolRepeat: true,
            symbolOffset: [25, 0],
            symbolBoundingData: 1,
            z: 12,
          },
          {
            //外面的柱子
            name: "营销部B组",
            type: "pictorialBar",
            barWidth: 30,
            //symbolSize: [40, 18], //调整截面形状
            symbolOffset: [15, 0],
            symbol: "circle",
            symbolRepeat: true,
            symbolBoundingData: 1,
            itemStyle: {
              color: "",
            },
            data: [82, 89, 89, 97, 79],
          },
        ],
}

7、堆叠柱状图属性

关键代码：数据堆叠，必须在 series 中添加相同的 stack 属性

Echarts_柱状图属性汇总

let option = {
       tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["材料费", "加工费"],
          icon: "react", // 设置legend的图标样式
          bottom: "4%", // 设置legend的位置
          itemGap: 20, // 设置legend之间的间距
        },
        xAxis: [
          {
            type: "category",
            data: ["1月", "2月", "3月", "4月", "5月"],
            axisPointer: {
              type: "shadow", //设置指示器类型
            },
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                width: 2,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0, //最小值
            max: 350, //最大值
            interval: 50, //间隔值
            axisLine: {
              show: false, //是否显示轴线
            },
            axisTick: {
              show: false, //是否显示刻度
            },
          },
        ],
        series: [
          {
            name: "材料费",
            type: "bar",
            stack: "总量", // 数据堆叠，必须添加相同的stack属性
            data: [280, 220, 150, 300, 228],
            itemStyle: {
              color: "#239242",
            },
          },
          {
            name: "加工费",
            type: "bar",
            stack: "总量",
            data: [50, 20, 100, 30, 80],
            itemStyle: {
              color: "#8bb4fb",
            },
          },
        ],
}