makeapie ecahrts社区可视化方案-优快云博客

本文链接：https://blog.youkuaiyun.com/weiweiweb888/article/details/129994400

这段代码展示了如何使用Echarts库初始化图表，处理数据，设置颜色渐变，并创建一个带有机场名称的柱状地图。同时，它还包含了动态提示、轴标签、响应式设计等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  echarts_3() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("echart3"));
      var xdata = this.PlanNumByAirport.map((item) => {
        return item.departureairport;
      });

      xdata = this.renderAirport(xdata);

      var colorList = [
        ["#40D0FD", "#40D0FD", "#00FFF6 "],
        ["#C83526", "#C83526", "#F25849"],
        ["#B2ACFD", "#B2ACFD", "#CF7BFB"],
        ["#FFC13F", "#FFE824", "#FFD7AC"],
        ["#C83526", "#F25849", "#C83526"],
        ["#40D0FD", "#40D0FD", "#00FFF6 "],
        ["#C83526", "#C83526", "#F25849"],
        ["#B2ACFD", "#B2ACFD", "#CF7BFB"],
        ["#FFC13F", "#FFE824", "#FFD7AC"],
        ["#C83526", "#F25849", "#C83526"],
        ["#40D0FD", "#40D0FD", "#00FFF6 "],
      ];

      var data = this.PlanNumByAirport.map((item) => {
        return item.counts;
      });
      var maxArr = [100, 100, 100, 100, 100];
      var option = {
        tooltip: {
          trigger: "axis",
          borderRadius: 5,
          borderColor: "#fff",
          borderWidth: 1,
          formatter: function (params) {
            // 滑动每一条数据对应的数据 params
            return (
              params[0].axisValue + "<br>" + "计划数量 :" + params[0].value
            );
          },
        },
        grid: {
          left: 20,
          right: "2%",
          bottom: 20,
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          data: xdata,
          triggerEvent: true,
          axisTick: {
            // 刻度线
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 40,
            interval: 0,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          nameLocation: "middle",
          triggerEvent: true,
          nameTextStyle: {
            padding: 30,
            fontSize: 14,
            color: "#fff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e5e5e5",
              opacity: 0.2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            // y轴线
            show: true,
            textStyle: {
              color: "#4d6b87",
              fontSize: 12,
            },
          },
        },
        series: [
          {
            name: "hill",
            barMinHeight: 10,
            type: "pictorialBar",
            barCategoryGap: "60%",
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              normal: {
                // 渐变色
                color: function (params) {
                  var index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorList[index][0],
                    },
                    {
                      offset: 0.5,
                      color: colorList[index][1],
                    },
                    {
                      offset: 1,
                      color: colorList[index][2],
                    },
                  ]);
                },
              },
            },
            label: {
              // 数据上方显示数值
              show: false,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            data: data,
            z: 10,
          },
          {
            // 阴影部分
            name: "hill",
            type: "bar",
            barWidth: "20%",
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              normal: {
                color: "rgba(11,47,68,.8)",
              },
            },
            data: maxArr,
            z: 9,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

示例：