Echarts-體驗

Echarts-體驗

使用步驟：

1. 引入echarts 插件文件到html頁面中
2. 準備一個具備大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

3. 初始化echarts實例對象

var myChart = echarts.init(document.getElementById('main'));

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

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

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

myChart.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]
        }
    ]
};

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-y6ZJ8V47-1587898436135)(https://s1.ax1x.com/2020/04/26/J6LjPJ.png)]