使用Echart實現(xiàn)繪制立體的柱狀圖

更新時間：2022年03月17日 14:30:35 作者：Ciao_Traveler

EChart開源來自百度商業(yè)前端數(shù)據可視化團隊，基于html5?Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據可視化圖表。本文將利用EChart繪制立體的柱狀圖，感興趣的可以學習一下

效果圖：

實現(xiàn)代碼：

var xData3 = ["6", "7", "8", "9","10","11"];
    var data3 = [1209, 1715, 2408, 1308, 1308, 1145];
    var data5 = [4000, 4000, 4000, 4000, 4000,4000];
    var option = {
      tooltip: {
        trigger: "axis",
        show: false,
      },
      grid: {
        left: 50,
        bottom: 25,
        top: 30,
        right: 40,
      },
      xAxis: {
        data: xData3,
        name: "(月)",
        // 坐標軸刻度相關設置
        axisTick: {
          show: false,
        },
        // 坐標軸線的相關設置
        axisLine: {
          show: true,
          lineStyle: {
            color: "#414965",
          },
        },
        // 坐標軸刻度標簽的相關設置
        axisLabel: {
          // 可以設置成 0 強制顯示所有標簽
          interval: 0,
          textStyle: {
            color: "#7089ba",
            fontSize: 12,
          },
          margin: 15, //刻度標簽與軸線之間的距離。
        },
      },
      yAxis: {
        name: "單位: 萬m3",
        nameTextStyle: {
          color: "#fff",
        },
        // 坐標軸在grid區(qū)域中的分隔線
        splitLine: {
          show: true,
          lineStyle: {
            color: "#414965",
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#7089ba",
            fontSize: 12,
          },
        },
      },
      series: [
        {
          //三個最低下的圓片
          // 系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據和配置項時用于指定對應的系列
          name: "",
          type: "pictorialBar",
          symbolSize: [20, 15],
          symbolOffset: [0, 10],
          z: 12,
          // 圖形樣式
          itemStyle: {
            opacity: 1,
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2d6ac5",//0%處的顏色
                },
                {
                  offset: 1,
                  color: "#2d6ac5",//100%處的顏色
                },
              ]),
              barBorderRadius: 0,
              borderWidth: 0,
            },
          },
          // 顯示最底下的圓片
          data: [1, 1, 1, 1, 1,1],
        },

        //下半截柱狀圖
        {
          name: "2020",
          type: "bar",
          barWidth: 20,
          barGap: "100%",
          itemStyle: {
            //lenged文本
            opacity: 0.1,
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#51b1f9",
                },
                {
                  offset: 1,
                  color: "#2f6ef6",
                },
              ]),
              barBorderRadius: 0,
              borderWidth: 0,
            },
          },
          label: {
            show: true,
            position: "top",
            distance: 10,
            color: "#fff",
          },

          data: data3,
        },
        {
          name: "", //頭部
          type: "pictorialBar",
          symbolSize: [20, 15],
          symbolOffset: [0, -10],
          z: 12,
          symbolPosition: "end",
          itemStyle: {
            color: "#22589f",
            opacity: 1,
          },
          data: data5,
        },

        {
          name: "",
          type: "pictorialBar",
          // 圖形的大小
          symbolSize: [20, 15],
          // 圖形相對于原本位置的偏移
          symbolOffset: [0, -10],
          z: 12,
          itemStyle: {
            opacity: 1,
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#48a4f8",
                },
                {
                  offset: 1,
                  color: "#7df4f9",
                },
              ]),
              barBorderRadius: 0,
              borderWidth: 0,
            },
          },
          // 圖形的定位位置
          symbolPosition: "end",
          data: data3,
        },

        {
          name: "2019",
          type: "bar",
          barWidth: 20,
          // 如果想要兩個系列的柱子重疊，可以設置 barGap 為 '-100%'。這在用柱子做背景的時候有用。
          barGap: "-100%",
          z: 0,
          itemStyle: {
            color: "#102a6f",
            opacity: 0.7,
          },
          data: data5,
        },
      ],
    };

    //this.Chart_init = echarts.init(this.Chart_dom.current);
    //this.Chart_init.setOption(option);

上面的代碼就是實現(xiàn)效果圖的配置。

到此這篇關于使用Echart實現(xiàn)繪制立體的柱狀圖的文章就介紹到這了,更多相關Echart立體柱狀圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: