echart图表应用-柱状图

var myChart = echarts.init(document.getElementById("main"));

const dataList = [
  {
    name: "梯田",

    value: [
      {
        max: 20,

        name: "-4.02",

        value: 9,
      },

      {
        max: 20,

        name: "-3.03",

        value: 9,
      },

      {
        max: 20,

        name: "-2.03",

        value: 15.8,
      },

      {
        max: 20,

        name: "-0.04",

        value: 20,
      },

      {
        max: 20,

        name: "0.96",

        value: 20,
      },
    ],
  },

  {
    name: "坡地",

    value: [
      {
        max: 20,

        name: "-4.02",

        value: 19,
      },

      {
        max: 20,

        name: "-3.03",

        value: 5,
      },

      {
        max: 20,

        name: "-2.03",

        value: 12,
      },

      {
        max: 20,

        name: "-0.04",

        value: 10,
      },

      {
        max: 20,

        name: "0.96",

        value: 10,
      },
    ],
  },
];

const fieldData = dataList[0].value;

const landData = dataList[1].value;

const maxValue = Math.max.apply(null, [1, 4, 8, 9, 10, 30]);

console.log(dataList[0].value[1].value, maxValue);

option = {
  color: ["#1A64F8"],
  //划过柱状图显示弹窗
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "none",
    },
    formatter: function (prams) {
      return prams[0].name + ":" + prams[0].data;
    },
  },
  legend: {
    data: ["梯田", "坡地"],

    icon: "rect",

    top: 10,

    right: "6%",

    itemGap: 20,

    itemWidth: 12,

    itemHeight: 8,
  },
  //图表整体位置
  grid: {
    left: "6%",

    right: "3%",

    top: "16%",

    bottom: "28%",
  },

  xAxis: [
    {
      type: "category",

      data: landData.map((item) => {
        return item.name;
      }), //坐标轴刻线设置

      axisTick: {
        alignWithLabel: true,
        show: false,
      },
      //坐标轴轴线设置
      axisLine: {
        lineStyle: {
          color: "#BBBBBB",
        },
      },
      //坐标轴刻度标签
      axisLabel: {
        color: "#606266",
        interval: 0,
        margin: 10,
        align: "center",
      },
    },
  ],

  yAxis: [
    {
      max: maxValue, // 设置最大值为数据中的最大值

      min: 0, // 设置最小值为数据中的最小值

      interval: 10,

      axisLine: {
        show: false,
      },

      axisTick: {
        show: false,
      },

      axisLabel: {
        color: "#606266",
      },

      splitLine: {
        show: true,

        lineStyle: {
          type: "dashed",
        },
      },
    },
  ],

  series: [
    // 梯田

    {
      name: "梯田",

      type: "bar",

      itemStyle: {
        normal: {
          borderRadius: [12, 12, 0, 0],//柱形图圆角

          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,

              color: "rgba(255, 45, 0, 0)",
            },

            {
              offset: 0,

              color: "rgba(203, 47, 12, 1)", 

              opacity: 1,//透明度，设置后感觉没什么用，直接在颜色加了透明度
            },
          ]),
        },
      },

      barWidth: "16", //头顶的字

      label: {
        show: false, //true显示，false不显示

        color: "#74A2FF", //字体颜色

        position: "outside", //字体位置
      },

      data: fieldData.map((item) => {
        return item.value;
      }),
    }, // 坡地

    {
      name: "坡地",

      type: "bar",

      backgroundStyle: {
        color: "rgba(216, 229, 247, 0.55)", // borderRadius: [8, 8, 0, 0],
      },

      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,

              color: "rgba(229, 209, 128, 0)",
            },

            {
              offset: 0,

              color: "rgba(247, 168, 7, 1)", 
            },
          ]), 
        },
      },

      barWidth: "16",

      label: {
        show: true,

        color: "#42C3B9",

        position: "outside",
      },

      data: landData.map((item) => {
        return item.value;
      }),
    },
  ],
};

myChart.setOption(option);