echarts柱形图

最新推荐文章于 2025-05-19 11:17:04 发布

原创最新推荐文章于 2025-05-19 11:17:04 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

该代码示例展示了如何使用Echarts库创建一个柱形图，包括设置x轴和y轴的数据，定义柱状颜色的线性渐变，以及调整图表的样式和布局。数据包括四个类别(A,B,C,D)，每个类别有对应的数据数组。

echarts柱形图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div
      class="echart3"
      id="echarts3"
      style="width: 100%; height: 250px;background: rgb(0, 34, 69);"
    ></div>

    <script>
      const data = {
        data4: ["name1", "name2"],
        data3: ["1000", "2000"],
        data2: ["600", "800"],
        data1: ["500", "1200"],
        data0: ["700", "200"],
      };

      const myChart = echarts.init(document.getElementById("echarts3"));
      const option = {
        xAxis: {
          type: "category",
          data: data.data4,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#335B7E",
              type: "dashed",
            },
          },
        },
        grid: {
          top: "33%",
          left: "10%",
          right: "10%",
          bottom: "10%",
          containLabel: false,
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["A", "B", "C", "D"],
          textStyle: {
            color: "#fff",
          },
        },
        yAxis: [
          {
            type: "value",
            name: "单位：个",
            nameTextStyle: {
              color: "#ffff",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#335B7E",
                type: "dashed",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#335B7E",
                type: "solid",
              },
            },
            axisLabel: {
              formatter: "{value}",
              // y轴文字的配置
              textStyle: {
                color: "rgba(219,225,255,1)",
                margin: 15,
              },
              // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            },
          },
        ],

        series: [
          {
            type: "bar",
            name: "A",
            barWidth: 12,
            data: data.data0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
                  {
                    offset: 0,
                    color: "#37A2DA",
                  },
                  {
                    offset: 1,
                    color: "#264f79",
                  },
                ]),
              },
            },
          },
          {
            type: "bar",
            barWidth: 12,
            name: "B",
            data: data.data1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
                  {
                    offset: 0,
                    color: "#E2C054",
                  },
                  {
                    offset: 1,
                    color: "#264f79",
                  },
                ]),
              },
            },
          },
          {
            type: "bar",
            barWidth: 12,
            name: "C",
            data: data.data2,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
                  {
                    offset: 0,
                    color: "#B6A2DE",
                  },
                  {
                    offset: 1,
                    color: "#264f79",
                  },
                ]),
              },
            },
          },
          {
            type: "bar",
            barWidth: 12,
            name: "D",
            data: data.data3,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
                  {
                    offset: 0,
                    color: "#00FFFF",
                  },
                  {
                    offset: 1,
                    color: "#264f79",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function() {
        myChart.resize();
      };
    </script>
  </body>
</html>