Echart - 双柱状图（bar）

最新推荐文章于 2025-05-22 18:44:38 发布

jianghaha2011

最新推荐文章于 2025-05-22 18:44:38 发布

阅读量6.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # echarts图标绘制

本文链接：https://blog.csdn.net/jianghaha2011/article/details/105789391

echarts图标绘制专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了ECharts图表配置的各项参数，包括背景颜色、工具提示、图例、网格布局、坐标轴设置以及系列数据的样式。通过具体配置示例，帮助读者理解如何自定义图表的外观和行为，实现数据的可视化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["本周事项数", "上周事项数"],
          align: "left",
          right: 30,
          top: 10,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 15,
          itemHeight: 11,
          itemGap: 35
        },
        grid: {
          left: "60",
          right: "10",
          bottom: "60",
          top: "40"
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#355b68"
              }
            },
            axisLabel: {
              color: "#fff",
              fontSize: 14,
              interval: 0,
              formatter: function(params) {
                let newParamsName = "";
                let paramsNameNumber = params.length;
                let provideNumber = 4;
                let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (let p = 0; p < rowNumber; p++) {
                    let tempStr = "";
                    let start = p * provideNumber;
                    let end = start + provideNumber;
                    if (p === rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      if (p > 2) {
                        tempStr = "...";
                        newParamsName += tempStr;
                        break;
                      } else {
                        tempStr = params.substring(start, end);
                        if (p < 2) {
                          tempStr += "\n";
                        }
                      }
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            },
            splitLine: {
              lineStyle: {
                color: "#00314a"
              }
            },
            axisTick: {
              show: false
            },

            data: _self.HighFreWeekly.listX
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "事项数(件)",
            nameTextStyle: {
              color: "#fff",
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: "#355b68"
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: "#355b68"
              }
            },
            axisLabel: {
              color: "#fff",
              fontSize: 14,
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "本周事项数",
            type: "bar",
            data: _self.HighFreWeekly.listY,
            barWidth: 20,
            barGap: "100%", // 柱图间距
            itemStyle: {
              color: new _self.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#f4e106" },
                { offset: 0.5, color: "#f9bd14" },
                { offset: 1, color: "#ff9f2e" }
              ])
            }
          },
          {
            name: "上周事项数",
            type: "bar",
            data: _self.HighFreWeekly.listZ,
            barWidth: 20,
            barGap: "100%",
            itemStyle: {
              color: new _self.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00fef6" },
                { offset: 0.5, color: "#00c5f9" },
                { offset: 1, color: "#188df0" }
              ])
            }
          }
        ]
      };