Echart-柱状图配置

88 阅读1分钟
import * as echarts from "echarts";
const option = {
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      fontSize: 16, // 设置 X 轴字体大小
      color: "#000", // 设置 X 轴字体颜色
    },
  },
  tooltip: {
    trigger: "axis",
    formatter: function (params) {
      let tooltipText = "";
      params.forEach((param) => {
        tooltipText += `${param.name}: ${param.value}<br>`;
      });
      return tooltipText;
    },
  },
  yAxis: {
    type: "value",
    name: "摄入量/g",
    nameLocation: "end", //Y 轴名称的位置,"end" 表示在 Y 轴的末尾
    nameGap: 15, //Y 轴名称与轴线之间的间距,单位为像素
    nameTextStyle: {
      fontSize: 16, // 设置y轴名称的字体大小
    },
    axisLabel: {
      fontSize: 16, // 设置字体大小
    },
  },
  series: [
    {
      name: "数量",
      data: [],
      type: "bar",
      barWidth: "40",
      itemStyle: {
        color: "#40B7F1",
        borderRadius: [20, 20, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#10E4E5" },
          { offset: 1, color: "#4386FC" },
        ]),
      },
      label: {
        textStyle: {
          fontSize: 14, //柱状图上字体大小
          color: "#19BEF3", //柱状图上字体颜色
        },
        show: true,
        position: "top",
        formatter: function (params) {
          return params.value;
        },
      },
    },
  ],
};

export default option;