当前位置： 首页 > article >正文

Echarts_柱状图属性汇总

article 2024/10/28 7:51:33

目录

1、基础 柱状图属性

2、常用 柱状图属性

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

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

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

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

7、堆叠 柱状图属性

1、基础 柱状图属性

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、常用 柱状图属性

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 对应索引；

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" },
   ]),
  },
},

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 属性互换

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；

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 属性

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",
            },
          },
        ],
}


http://www.kler.cn/news/368420.html

相关文章：

  • 嵌入式刷题（day21）
  • [Python学习日记-53] Python 中的正则表达式模块 —— re
  • Qt setWindowFlags窗口标志
  • Vue 组件之间通信的多种方式汇总
  • word表格问题
  • Redis主从复制入门
  • 数据分析每周挑战——睡眠质量影响因素研究
  • 《YOLO 目标检测》—— YOLO v3 详细介绍
  • Mybatis-plus-扩展功能
  • 【题解】—— LeetCode一周小结43
  • 《BLEU: a Method for Automatic Evaluation of Machine Translation》翻译
  • 数据库如何保证主键唯一性
  • Python如何处理zip压缩文件（Python处理zip压缩文件接口源码）
  • ES6面试题：（第二天）
  • 如何使用git上传项目至github。记一次上传github经历
  • Spring IoC DI
  • 基于NERF技术重建学习笔记
  • 算法 - 高精度算法(加减乘除)
  • 计算结构体及其中元素的大小
  • LeetCode Hot 100：二叉树
  • Face Swap API 的整合与使用手册
  • 【jvm】堆的内部结构
  • 【笔记】记一次因Spring版本和Tomcat版本不对应，造成Spring MVC项目启动后页面访问报404的问题
  • 动态规划-子序列问题——1218.最长定差子序列
  • Linux 进程间通信_匿名管道
  • 【c++丨STL】string模拟实现（附源码）