echart v4 配置项总结

code_v
39 阅读6分钟

1. 折线图

// 折线图
let chartLineData = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line", // 线型指示器
      lineStyle: {
        color: "#6A32C9",
        width: 2,
        type: "dashed" // 鼠标划过去为虚线
      }
    }
  },
  grid: {
    top: 30, // 增加 top 值，例如 80px
    left: "3%",
    right: 25,
    bottom: "1%",
    containLabel: true // 保证标签不会被裁剪
  },
  xAxis: {
    type: "category",
    name: "月",
    nameLocation: "end", // 名称位置：end 表示在末端（右侧）

    // 调整名称的样式和位置
    nameTextStyle: {
      color: "#666",
      fontSize: 12,
      fontWeight: "normal",
      // 可以添加背景色
      backgroundColor: "transparent"
    },

    nameGap: 10, // 名称与轴线或最后一个标签的距离

    boundaryGap: false, // 取消两端留白
    // X轴轴线颜色
    axisLine: {
      show: true, // 是否显示轴线
      lineStyle: {
        color: "#999", // 轴线颜色
        width: 1, // 轴线宽度
        type: "solid" // 线型：solid（实线）、dashed（虚线）、dotted（点线）
      }
      // onZero: true // X轴是否在Y轴的0刻度上
    },
    // X轴刻度线颜色
    axisTick: {
      show: true, // 是否显示刻度
      alignWithLabel: true, // 刻度与标签对齐
      lineStyle: {
        color: "#999", // 刻度线颜色
        width: 1
      }
    },
    // X轴刻度标签颜色
    axisLabel: {
      show: true,
      color: "#666", // 标签文字颜色
      fontSize: 12,
      rotate: 0, // 旋转角度
      margin: 10, // 标签与轴线的距离
      formatter: function(value) {
        // value 是原始值，如 '2025-05'
        // 提取月份部分
        const month = value.split("-")[1];
        // 去掉前导0，比如 '05' -> '5'
        const monthNum = parseInt(month, 10);
        return monthNum;

        // 或者更简洁的写法：
        // return parseInt(value.split('-')[1]) + '月';
      }
    },
    data: []
  },
  yAxis: {
    type: "value",
    name: "人日",
    nameLocation: "end", // 名称位置：end 表示在末端（右侧）

    // 调整名称的样式和位置
    nameTextStyle: {
      color: "#666",
      fontSize: 12,
      fontWeight: "normal",
      // 以下两个属性配合，将文字移到轴外并翻转
      verticalAlign: "bottom",
      align: "right",
      // 可以添加背景色
      backgroundColor: "transparent"
    },

    nameGap: 15, // 名称与轴线或最后一个标签的距离
    // Y轴轴线颜色
    axisLine: {
      show: true,
      lineStyle: {
        color: "#999",
        width: 1
      }
    },
    // Y轴刻度标签颜色
    axisLabel: {
      show: true,
      color: "#666",
      fontSize: 12,
      formatter: "{value}"
    },
    // Y轴分割线（网格线）颜色 - 这里才是主要的网格线
    splitLine: {
      show: true,
      lineStyle: {
        color: "#f0f0f0", // 主要的网格线颜色
        width: 1,
        type: "solid" // 实线网格
      }
    }
  },
  series: []
};

2. 饼状图

// 饼状图
let chartPieData = {
  // color:["#4992ff", "#7cffb2", "#fddd60", "#ff6e76", "#58d9f9", "#05c091", "#ff8a45", "#8d48e3", "#dd79ff"],
  color: [
    "#4E9CF8",
    "#61C9FA",
    "#333CA3",
    "#EABF5A",
    "#DF7C42",
    "#C95A48",
    "#5D86E5",
    "#7CB9C2"
  ],
  tooltip: {
    trigger: "item"
  },
  legend: {
    // type: "scroll", // 如果项很多，使用滚动图例
    bottom: 10, // 距离底部 10px
    left: "center" // 水平居中
    // orient: "horizontal", // 水平排列
    // textStyle: {
    //   fontSize: 12
    // }
  },
  grid: {
    top: 0, // 饼图区域紧贴顶部
    bottom: 100, // 为图例预留底部区域高度（根据内容调整）
    left: "10%",
    right: "10%",
    containLabel: true // 保证标签不会被裁剪
  },
  series: [
    {
      name: "",
      type: "pie",
      // 将饼图放在 grid 区域的顶部
      center: ["50%", "38%"], // 水平居中，垂直位置在上部
      // 调整饼图大小确保不超出区域
      radius: ["76%", "52%"], // 可以调整内/外半径
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center"
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 12,
          fontWeight: "bold"
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
};

3. 柱状图

// 柱状图
let chartBarData = {
  color: ["#99E0FC", "#50B0F9", "#3A6DF6"],
  tooltip: {
    trigger: "item"
  },
  legend: {
    // selectedMode: false,
    bottom: 10, // 距离底部 10px
    left: "center" // 水平居中
  },
  grid: {
    top: 5, // 增加 top 值，例如 80px
    left: "3%",
    right: "3%",
    bottom: 40,
    containLabel: true // 保证标签不会被裁剪
  },
  yAxis: {
    type: "value",
    // Y轴轴线颜色
    axisLine: {
      show: true,
      lineStyle: {
        color: "#999",
        width: 1
      }
    },
    // Y轴刻度标签颜色
    axisLabel: {
      show: true,
      color: "#666",
      fontSize: 12,
      formatter: "{value}"
    },
    // Y轴分割线（网格线）颜色 - 这里才是主要的网格线
    splitLine: {
      show: true,
      lineStyle: {
        color: "#f0f0f0", // 主要的网格线颜色
        width: 1,
        type: "solid" // 实线网格
      }
    }
  },
  xAxis: {
    type: "category",
    data: [],
    // boundaryGap: false, // 取消两端留白
    // X轴轴线颜色
    axisLine: {
      show: true, // 是否显示轴线
      lineStyle: {
        color: "#999", // 轴线颜色
        width: 1, // 轴线宽度
        type: "solid" // 线型：solid（实线）、dashed（虚线）、dotted（点线）
      }
      // onZero: true // X轴是否在Y轴的0刻度上
    },
    // X轴刻度线颜色
    axisTick: {
      show: true, // 是否显示刻度
      alignWithLabel: true, // 刻度与标签对齐
      lineStyle: {
        color: "#999", // 刻度线颜色
        width: 1
      }
    },
    // X轴刻度标签颜色
    axisLabel: {
      show: true,
      color: "#666", // 标签文字颜色
      fontSize: 12,
      rotate: 0, // 旋转角度
      margin: 10, // 标签与轴线的距离
      formatter: function(value) {
        // value 是原始值，如 '2025-05'
        // 提取月份部分
        const month = value.split("-")[1];
        // 去掉前导0，比如 '05' -> '5'
        const monthNum = parseInt(month, 10);
        return monthNum + "月";

        // 或者更简洁的写法：
        // return parseInt(value.split('-')[1]) + '月';
      }
    }
  },
  series: []
};

4. 折线图series中的某一项

// 折线图series中的某一项
let serie = {
  data: [],
  type: "line",
  smooth: true,
  name: "",
  showSymbol: false, // 默认关闭圆圈显示
  // itemStyle: {
  //   color: "#4A75E4", // 点的颜色
  //   borderWidth: 2,
  // },
  // 悬停时才显示
  emphasis: {
    showSymbol: true, // 悬停时显示圆圈
    symbolSize: 12, // 圆圈大小

    // 圆圈样式
    itemStyle: {
      // color: "#ff4d4f", // 圆圈填充色
      borderColor: "#4A75E4", // 圆圈边框色
      borderWidth: 3 // 边框宽度
      // shadowColor: "rgba(255, 77, 79, 0.3)",
      // shadowBlur: 8
    }
  },
  lineStyle: {
    color: {
      type: "linear",
      x: 0, // 渐变起始点x坐标（0-1）
      y: 0, // 渐变起始点y坐标
      x2: 1, // 渐变结束点x坐标
      y2: 0, // 渐变结束点y坐标
      colorStops: [
        { offset: 0, color: "#6BE0FB" }, // 起始颜色
        { offset: 0.5, color: "#4D7DF6" }, // 中间颜色
        { offset: 1, color: "#6944F2" } // 结束颜色
      ]
    }
  },
  areaStyle: {
    color: {
      type: "linear",
      x: 0, // 渐变开始的x坐标（0-1）
      y: 0, // 渐变开始的y坐标（0-1）
      x2: 0, // 渐变结束的x坐标
      y2: 1, // 渐变结束的y坐标（从上到下渐变）
      colorStops: [
        { offset: 0, color: "rgba(229, 238, 254, 0.7)" }, // 起始颜色
        { offset: 0.5, color: "rgba(229, 238, 254, 0.5)" }, // 中间颜色
        { offset: 1, color: "rgba(229, 238, 254, 0)" } // 结束颜色
      ],
      global: false // 缺省为 false
    }
  }
};

5. tooltip 设置 formatter

// tooltip 设置 formatter
options.tooltip.formatter = function(params) {
        let result = params[0].name + "<br/>"; // X轴值

        params.forEach(function(item) {
          // 将数值转为百分比
          const percentValue = item.value + "%";

          // 可选：添加颜色标记
          const colorDot = `<span style="
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: ${item.color};
                margin-right: 6px;
                vertical-align: middle;
            "></span>`;

          result += colorDot + item.seriesName + ": " + percentValue + "<br/>";
        });

        return result;
      }

6. x轴间隔显示

// x轴间隔显示
options.xAxis.axisLabel = {
    // 方式1：设置固定间隔（如每隔2个显示一个：1月、4月、7月、10月）
    interval: 4
  };

7. 格式化Y轴

// 格式化Y轴
options.yAxis.axisLabel = {
        // 简洁版：只处理k单位
        formatter: function(value) {
          if (value >= 1000) {
            const kValue = value / 1000;
            // 如果正好是整数，如1000、2000，显示为1k、2k，而不是1.0k、2.0k
            return kValue % 1 === 0 ? kValue + "k" : kValue.toFixed(1) + "k";
          }
          return value;
        },
        color: "#666",
        fontSize: 12
      };

8. legend 设置样式为圆圈，以及文字样式

//  legend 设置样式为圆圈，以及文字样式
let legend = {
        orient: "vertical", // 垂直方向
        left: "72%", // 距离右侧10px
        top: "middle", // 垂直居中
        textStyle: {
          color: "#333", // 文字颜色
          fontSize: 11, // 字体大小
          fontWeight: "normal", // 字体粗细：'normal', 'bold', 'bolder', 'lighter' 或 100-900
          // 对齐和布局
          align: "left", // 水平对齐：'left', 'center', 'right'
          verticalAlign: "middle", // 垂直对齐：'top', 'middle', 'bottom'
          // 行高和间距
          lineHeight: 12 // 行高
        },
        icon: "circle", // legend 样式为圆圈
        itemWidth: 6, // 方块宽度（像素）
        itemHeight: 6, // 方块高度（像素）
        itemGap: 10 // 方块与文字间距
      };
avatar
文章
阅读
粉丝