Echarts資料視覺化,easyshu圖表整合。

szmtjs10發表於2020-12-30

 

介紹:

ECharts,一個使用 JavaScript 實現的開源視覺化庫,可以流暢的執行在 PC 和移動裝置上,相容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的向量圖形庫 ZRender,提供直觀,互動豐富,可高度個性化定製的資料視覺化圖表。
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖,用於統計的盒形圖,用於地理資料視覺化的地圖、熱力圖、線圖,用於關係資料視覺化的關係圖、旭日圖,多維資料視覺化的平行座標,還有用於 BI 的漏斗圖,儀表盤,並且支援圖與圖之間的混搭。

官網地址:http://echarts.baidu.com/

 

Echarts使用操作步驟:

1.首先在官網 選擇合適的下載版本

       http://echarts.baidu.com/download.html

2.引入Echarts

 <script  src="js/echarts.js"></script>

3.繪製一個簡單的圖表

      準備一個DOM容器 

 <div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>

4.建立一個簡單的圖表

 

 

 

 

 

這樣一個簡單的雷達圖就引入進來了,下面看下效果圖

 

 

 

 

 

 

 

 

Echarts實現地圖資料視覺化

  1. 專案背景

應對現在資料視覺化的趨勢,越來越多企業需要在很多場景(營銷資料,生產資料,使用者資料)下使用,視覺化圖表來展示體現資料,讓資料更加直觀,資料特點更加突出。

  1. 使用技術

 div + css 佈局

 flex 佈局

 原生js + jquery 使用

 rem適配

 echarts基礎

  1. 核心圖表程式碼

(1) 引入到html頁面中

// 柱狀圖1模組

(function() {

// 例項化物件

let myChart = echarts.init(document.querySelector(".bar .chart"));

// 指定配置和資料

let option = {

color: ["#3398DB"],

tooltip: {

trigger: "axis",

axisPointer: {

// 座標軸指示器,座標軸觸發有效

type: "shadow" // 預設為直線,可選為:'line' | 'shadow'

}

},

grid: {

left: "3%",

right: "4%",

bottom: "3%",

containLabel: true

},

xAxis: [

{

type: "category",

data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],

axisTick: {

alignWithLabel: true

}

}

],

yAxis: [

{

type: "value"

}

],

series: [

{

name: "直接訪問",

type: "bar",

barWidth: "60%",

data: [10, 52, 200, 334, 390, 330, 220]

}

]

};

 

// 把配置給例項物件

myChart.setOption(option);

})();

(2) 根據需求定製

需求一:修改圖表大小top為10px bottom為 4% grid決定我們的柱狀圖的大小,修改圖表柱形顏色  #2f89cf

 

 

color: ["#2f89cf"],

   grid: {

     left: "0%",

     top: "10px",

     right: "0%",

     bottom: "4%",

     containLabel: true

   }

需求二:x,y軸相關設定

X軸:

  // 設定x軸標籤文字樣式

  // x軸的文字顏色和大小

        axisLabel: {

          color: "rgba(255,255,255,.6)",

          fontSize: "12"

        },

   //  x軸樣式不顯示

   axisLine: {

       show: false

       // 如果想要設定單獨的線條樣式

       // lineStyle: {

       //    color: "rgba(255,255,255,.1)",

       //    width: 1,

       //    type: "solid"

      }

   }

Y軸:

 // y 軸文字標籤樣式

   axisLabel: {

         color: "rgba(255,255,255,.6)",

          fontSize: "12"

   },

    // y軸線條樣式

    axisLine: {

         lineStyle: {

            color: "rgba(255,255,255,.1)",

            // width: 1,

            // type: "solid"

         }

   5232},

    // y 軸分隔線樣式

   splitLine: {

       lineStyle: {

          color: "rgba(255,255,255,.1)"

        }

         }

需求三:修改柱形為圓角以及柱子寬度  series 裡面設定

series: [

         {

           name: "直接訪問",

           type: "bar",

           // 修改柱子寬度

           barWidth: "35%",

           data: [10, 52, 200, 334, 390, 330, 220],

           itemStyle: {

             // 修改柱子圓角

             barBorderRadius: 5

           }

         }

       ]

     };

需求四:更換對應資料,讓圖表跟隨螢幕自適應

// x軸中更換data資料

    data: [ "旅遊行業","教育培訓", "遊戲行業", "醫療行業", "電商行業", "社交行業", "金融行業" ],

   // series 更換資料

data: [200, 300, 300, 900, 1500, 1200, 600]

//螢幕自適應

  window.addEventListener("resize", function() {

    myChart.resize();

  });

  1. 專案實現效果:
  2.  

     

 

 

 

反思與總結

經過這次echart專案實驗,我們組成員大概瞭解並掌握了echarts例項化的引用的全部流程,我們現在正處於大資料的時代,有資料的地方,就會少不了資料的視覺化。資料視覺化可以讓資料呈現的更加直觀、及時,而又簡單。資料視覺化的應用貫穿於多個行業,如商業智慧、金融、新聞媒體、銷售、財務、運營、公共服務等。在學習並嘗試使用echarts的過程中,我們也逐漸接觸到視覺化,接觸到大資料的門檻,這是一次對我們來說很好的體驗,以後也希望可以獲得更多全新的前端開發的知識和體驗。

小組成員:安朝陽 雷振 秦昆德 童翔 黃菁

 

相關文章