在ECharts中画一个带边框的渐变柱状图

预览图

// 这里使用的是echarts.js@4.1.0
import echarts from "echarts";

/**
 * 生成一个ECharts柱状图
 * @param {Element} el 挂载元素
 * @param {Array} data 数据
 * @returns {echarts.ECharts}
 */
export function genEcharts1(el, data) {
  const echartsIns = echarts.init(el);

  const option = {
    xAxis: {
      type: "category",
      data: ["一级", "二级", "三级", "四级", "五级"],
      axisTick: {
        show: false, // 不显示横坐标刻度
      },
      axisLabel: {
        color: "#90B6E2", // 设置横坐标标题的颜色
      },
      axisLine: {
        lineStyle: {
          color: "#3868A0", // 设置横坐标线的颜色
        },
      },
    },
    yAxis: {
      show: false,
      type: "value",
    },
    series: [
      {
        // data: [120, 200, 150, 80, 70],
        data,
        type: "bar",
        barWidth: 15,
        label: {
          show: true, // 展示柱状图数值
          position: "top", // 设置柱状图数值位置
          color: "#BADAFF", // 设置柱状图数值颜色
        },
        itemStyle: {
          borderWidth: 1, // 柱状图边框宽度
          borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 柱状图边框颜色
            {
              offset: 0,
              color: "#8DC0FD",
            },
            {
              offset: 1,
              color: "#8DC0FD88",
            },
          ]),
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 柱状图柱子颜色
            {
              offset: 0,
              color: "#3D8AE7",
            },
            {
              offset: 1,
              color: "rgba(98,160,234,0.4)",
            },
          ]),
        },
      },
    ],
  };

  echartsIns.setOption(option);

  return echartsIns;
}

// 调用函数
const data = [120, 200, 150, 80, 70];
const el = document.getElementById("echarts1");
genEcharts1(el, data);