數據可視化----Echarts的基本使用和基本配置詳情

該教程來自 黑馬程序員的 pink老師的 數據可視化教程
ECharts數據可視化項目-大屏數據可視化展示-echarts 圖表製作-pink老師直播課更新完畢

一、數據可視化相關庫介紹

• D3.js 目前 Web 端評價最高的 Javascript 可視化工具庫(入手難)
• ECharts.js 百度出品的一個開源 Javascript 數據可視化庫
• Highcharts.js 國外的前端數據可視化庫，非商用免費，被許多國外大公司所使用
• AntV 螞蟻金服全新一代數據可視化解決方案 等等
• Highcharts 和 Echarts 就像是 Office 和 WPS 的關係

ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。

二、Echarts介紹

• 是一個JS插件
• 性能好可流暢運行PC與移動設備
• 兼容主流瀏覽器
• 提供很多常用圖表，且可定製。
  • 折線圖、柱狀圖、散點圖、餅圖、K線圖

官網地址：https://www.echartsjs.com/zh/index.html

三、Echarts簡單體驗

官方教程：5分鐘上手Echarts

• 下載echarts ：https://github.com/apache/incubator-echarts/tree/4.5.0

使用步驟：

1. 準備一個基本大小的DOM容器

<div class="box"></div>

.box {
  width: 400px;
  height: 300px;
}

2. 下載並引入echarts實例對象

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

3. 初始化echarts實例對象

let box = document.querySelector('.box');
let myCharts = echarts.init(box);

4. 指定配置項和數據(option)

// 指定圖表的配置項和數據
var option = {
  title: {
    text: 'ECharts 入門示例'
  },
  tooltip: {},
  legend: {
    data: ['銷量']
  },
  xAxis: {
    data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
  },
  yAxis: {},
  series: [{
    name: '銷量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

5. 將配置項設置給echarts實例對象

// 使用剛指定的配置項和數據顯示圖表。
myCharts.setOption(option);

效果如下：

四、Echarts的基礎配置

只知道以下配置每個模塊的主要作用幹什麼的就可以了

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

• series

  • 系列列表。每個系列通過 type 決定自己的圖表類型
  • 大白話：圖標數據，指定什麼類型的圖標，可以多個圖表重疊。

• xAxis：直角座標系 grid 中的 x 軸

  • boundaryGap: 座標軸兩邊留白策略 true，這時候刻度只是作爲分隔線，標籤和數據點都會在兩個刻度之間的帶(band)中間。

• yAxis：直角座標系 grid 中的 y 軸

• grid：直角座標系內繪圖網格。

• title：標題組件

• tooltip：提示框組件

• legend：圖例組件

• color：調色盤顏色列表

  數據堆疊，同個類目軸上系列配置相同的stack值後 後一個系列的值會在前一個系列的值上相加。

option = {
    // color設置我們線條的顏色 注意後面是個數組
    color: ['pink', 'red', 'green', 'skyblue'],
    // 設置圖表的標題
    title: {
        text: '折線圖堆疊123'
    },
    // 圖表的提示框組件 
    tooltip: {
        // 觸發方式
        trigger: 'axis'
    },
    // 圖例組件
    legend: {
       // series裏面有了 name值則 legend裏面的data可以刪掉
    },
    // 網格配置  grid可以控制線形圖 柱狀圖 圖表大小
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否顯示刻度標籤 如果是true 就顯示 否則反之
        containLabel: true
    },
    // 工具箱組件  可以另存爲圖片等功能
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    // 設置x軸的相關配置
    xAxis: {
        type: 'category',
        // 是否讓我們的線條和座標軸有縫隙
        boundaryGap: false,
        data: ['星期一', '週二', '週三', '週四', '週五', '週六', '週日']
    },
     // 設置y軸的相關配置
    yAxis: {
        type: 'value'
    },
    // 系列圖表配置 它決定着顯示那種類型的圖表
    series: [
        {
            name: '郵件營銷',
            type: 'line',
           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '聯盟廣告',
            type: 'line',

            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '視頻廣告',
            type: 'line',
          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接訪問',
            type: 'line',
          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};