Echarts4.0 使用系列——折線圖，這裏可能有你須要的

時間 2019-11-05

標籤 echarts4.0 echarts 使用系列折線這裏可能有須要简体版

原文原文鏈接

前言：項目中常常會使用到Echarts,有的需求差很少複用性高，因爲以前沒有好好總結，時間一長就容易忘，因此這裏總結一下Echarts折線圖使用，下面會列舉官網一些Api。html

1、效果圖

2、配置基礎折線圖

第一步：先初始化git

let myChart = echarts.init(document.getElementById("echarts-line"));

第二部：定義配置項github

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['01.23', '01.24', '01.25', '01.26', '01.27', '01.28', '01.29']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [15, 14, 10, 11, 14.58, 10, 11.5],
        type: 'line',
        areaStyle: {}
    }]
};

最後：渲染api

myChart.setOption(option);

3、一步一步修改Option

xAxis：X軸

type：x軸座標軸類型數組

'value' 數值軸，適用於連續數據。
'category' 類目軸，適用於離散的類目數據，爲該類型時必須經過 data 設置類目數據。
'time' 時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不一樣，例如會根據跨度的範圍來決定使用月，星期，日仍是小時範圍的刻度。
'log' 對數軸。適用於對數數據。

經常使用的類型爲'category'，須要定義對呀的類目數據，這個例子中的類目數據爲日期組成的數據。echarts

boundaryGap：座標軸兩邊留白ide

可配置true或false或者爲一個數組，默認爲true
非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸範圍，能夠直接設置數值或者相對的百分比。

在該例子中：座標軸兩邊留白10%字體

axisLine：座標軸軸線相關設置spa

show：是否顯示，座標軸線包括x軸那根黑色（#333）的線和刻度名稱
lineStyle：設置軸線樣式，包括軸線顏色、寬度、透明度、線的類型、陰影等
更多...：更多可參看官網api，能夠設置箭頭方向、大小、刻度線是否在座標0刻度上

在該例子中：經過設置軸線的透明度實現視覺上顏色爲淺灰色插件

axisTick：座標軸刻度相關設置

show：是否顯示
interval：顯示間隔，默認爲'auto'
inside：刻度是否朝外，默認false
length：刻度的長度，數值
lineStyle：設置刻度線樣式，包括軸線顏色、寬度、透明度、線的類型、陰影等

在該例子中：設置刻度線爲不顯示

splitLine：座標軸在 grid 區域中的分隔線（在網格中豎立的線）

show：是否顯示
interval：顯示間隔，默認爲'auto'
lineStyle：設置網格線樣式，包括軸線顏色、寬度、透明度、線的類型、陰影等

X軸的代碼

xAxis: {
    type: 'category',
    data: ['01.23', '01.24', '01.25', '01.26', '01.27', '01.28', '01.29'],
    boundaryGap: ['10%', '10%',],//座標軸兩邊留白
    axisLine: {//座標軸
        lineStyle:{
            opacity: 0.01,//設置透明度就能夠控制顯示不顯示
        },
    },
    splitLine: {//網格線
        show: false,//網格線
        lineStyle:{
            color: '#eeeeee',
        },
    },
    axisTick: {//刻度線
        show: false,//去掉刻度線
    },
},

yAxis：Y軸

X軸與Y軸的文檔大體是同樣的，因此就列舉例子中的設置

Y軸的刻度線我設置透明度爲0,
設置了座標軸名稱
設置了網格線顏色

Y軸的代碼

yAxis: {
    min:0,//最小刻度
    max:25,//最大刻度
    type: 'value',
    name:'℃         ',//是基於Y軸線對齊，用空格站位讓座標軸名稱與刻度名稱對齊
    nameTextStyle: {
        color:'#444e65',
        align:'left',//文字水平對齊方式
        verticalAlign:'middle',//文字垂直對齊方式
    },
    axisTick: {//刻度線
        show: false,//去掉刻度線
    },
    axisLine: {//座標軸線
        lineStyle:{
            opacity: 0,//透明度爲0 
        },
    },
    splitLine: {//網格線
        // show: false,//網格線
        lineStyle:{
            color: '#eeeeee',
        },
    },
},

series：系列列表

label：圖形上的文本標籤，可用於說明圖形的一些數據信息

show：是否顯示
position：標籤的位置。默認爲top，可選值有14種
rich：在 rich 裏面，能夠自定義富文本樣式。
更多...：更多可參看官網api，例如顏色、字體、背景等相關設置

itemStyle：折線拐點標誌的樣式

color：顏色值
描邊設置：borderColor（顏色）、borderWidth（寬度）、borderType（類型）
更多...：更多可參看官網api，例如陰影、透明度

areaStyle：區域填充樣式

- color：顏色值
- 描邊設置：borderColor（顏色）、borderWidth（寬度）、borderType（類型）

在該例子中：設置區域填充樣式爲線性漸變

數據畫折線

series: [{
    data: [15, 14, 10, 11, 14.58, 10, 11.5,],//數據
    type: 'line',//圖表類型，折線圖仍是柱狀圖仍是餅圖
    label: {//圖形上的文本標籤
        normal:{
            formatter: '{@data}℃',
            show: true,//顯示數據
            color: '#00af58',
            position: 'top',
            fontSize:'14',
        },
    },
    itemStyle: {//折線拐點標誌的樣式。
        normal: {
            color: '#00af58',
        },
    },
    areaStyle: {//區域填充樣式
        normal:{
            color: {
                type:'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(0, 175, 88, 0.4)',
                    },
                    {
                        offset: 1,
                        color: 'rgba(0, 175, 88, 0.01)',
                    },
                ],
                globaCoord: false,
            },
        },
    },
},],

4、其餘

echarts顏色設置

Echarts顏色可使用 RGB 表示，好比 'rgb(128, 128, 128)'，若是想要加上 alpha 通道表示不透明度，可使用 RGBA，好比 'rgba(128, 128, 128, 0.5)'，也可使用十六進制格式，好比 '#ccc'。除了純色以外顏色也支持漸變色和紋理填充

// 線性漸變，前四個參數分別是 x0, y0, x2, y2, 範圍從 0 - 1，至關於在圖形包圍盒中的百分比，若是 globalCoord 爲 `true`，則該四個值是絕對的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 處的顏色
    }, {
        offset: 1, color: 'blue' // 100% 處的顏色
    }],
    globalCoord: false // 缺省爲 false
}
// 徑向漸變，前三個參數分別是圓心 x, y 和半徑，取值同線性漸變
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 處的顏色
    }, {
        offset: 1, color: 'blue' // 100% 處的顏色
    }],
    globalCoord: false // 缺省爲 false
}
// 紋理填充
color: {
    image: imageDom, // 支持爲 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串
    repeat: 'repeat' // 是否平鋪, 能夠是 'repeat-x', 'repeat-y', 'no-repeat'
}