摘要：常用的類型為，需要定義對呀的類目數(shù)據(jù)，這個例子中的類目數(shù)據(jù)為日期組成的數(shù)據(jù)。在使用之前覺得這個插件內(nèi)容很多，但是去看了一遍折線圖的后發(fā)現(xiàn)有很多都是類似的，例如軸與軸的設(shè)置。

前言：項目中經(jīng)常會使用到Echarts,有的需求差不多復(fù)用性高，由于之前沒有好好總結(jié)，時間一長就容易忘，所以這里總結(jié)一下Echarts折線圖使用，下面會列舉官網(wǎng)一些Api。

第一步：先初始化

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

第二部：定義配置項

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: {}
    }]
};

最后：渲染

myChart.setOption(option);

type：x軸坐標軸類型

"value" 數(shù)值軸，適用于連續(xù)數(shù)據(jù)。

"category" 類目軸，適用于離散的類目數(shù)據(jù)，為該類型時必須通過 data 設(shè)置類目數(shù)據(jù)。

"time" 時間軸，適用于連續(xù)的時序數(shù)據(jù)，與數(shù)值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據(jù)跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。

"log" 對數(shù)軸。適用于對數(shù)數(shù)據(jù)。

常用的類型為"category"，需要定義對呀的類目數(shù)據(jù)，這個例子中的類目數(shù)據(jù)為日期組成的數(shù)據(jù)。

boundaryGap：坐標軸兩邊留白

可配置true或false或者為一個數(shù)組，默認為true

非類目軸，包括時間，數(shù)值，對數(shù)軸，boundaryGap是一個兩個值的數(shù)組，分別表示數(shù)據(jù)最小值和最大值的延伸范圍，可以直接設(shè)置數(shù)值或者相對的百分比。

在該例子中：坐標軸兩邊留白10%

axisLine：坐標軸軸線相關(guān)設(shè)置

show：是否顯示，坐標軸線包括x軸那根黑色（#333）的線和刻度名稱

lineStyle：設(shè)置軸線樣式，包括軸線顏色、寬度、透明度、線的類型、陰影等

更多...：更多可參看官網(wǎng)api，可以設(shè)置箭頭方向、大小、刻度線是否在坐標0刻度上

在該例子中：通過設(shè)置軸線的透明度實現(xiàn)視覺上顏色為淺灰色

axisTick：坐標軸刻度相關(guān)設(shè)置

show：是否顯示

interval：顯示間隔，默認為"auto"

inside：刻度是否朝外，默認false

length：刻度的長度，數(shù)值

lineStyle：設(shè)置刻度線樣式，包括軸線顏色、寬度、透明度、線的類型、陰影等

在該例子中：設(shè)置刻度線為不顯示

splitLine：坐標軸在 grid 區(qū)域中的分隔線（在網(wǎng)格中豎立的線）

show：是否顯示

interval：顯示間隔，默認為"auto"

lineStyle：設(shè)置網(wǎng)格線樣式，包括軸線顏色、寬度、透明度、線的類型、陰影等

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,//設(shè)置透明度就可以控制顯示不顯示
        },
    },
    splitLine: {//網(wǎng)格線
        show: false,//網(wǎng)格線
        lineStyle:{
            color: "#eeeeee",
        },
    },
    axisTick: {//刻度線
        show: false,//去掉刻度線
    },
},

X軸與Y軸的文檔大致是一樣的，所以就列舉例子中的設(shè)置

Y軸的刻度線我設(shè)置透明度為0,

設(shè)置了坐標軸名稱

設(shè)置了網(wǎng)格線顏色

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: {//網(wǎng)格線
        // show: false,//網(wǎng)格線
        lineStyle:{
            color: "#eeeeee",
        },
    },
},

label：圖形上的文本標簽，可用于說明圖形的一些數(shù)據(jù)信息

show：是否顯示

position：標簽的位置。默認為top，可選值有14種

rich：在 rich 里面，可以自定義富文本樣式。

更多...：更多可參看官網(wǎng)api，例如顏色、字體、背景等相關(guān)設(shè)置

itemStyle：折線拐點標志的樣式

color：顏色值

描邊設(shè)置：borderColor（顏色）、borderWidth（寬度）、borderType（類型）

更多...：更多可參看官網(wǎng)api，例如陰影、透明度

areaStyle：區(qū)域填充樣式

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

在該例子中：設(shè)置區(qū)域填充樣式為線性漸變

數(shù)據(jù)畫折線

series: [{
    data: [15, 14, 10, 11, 14.58, 10, 11.5,],//數(shù)據(jù)
    type: "line",//圖表類型，折線圖還是柱狀圖還是餅圖
    label: {//圖形上的文本標簽
        normal:{
            formatter: "{@data}℃",
            show: true,//顯示數(shù)據(jù)
            color: "#00af58",
            position: "top",
            fontSize:"14",
        },
    },
    itemStyle: {//折線拐點標志的樣式。
        normal: {
            color: "#00af58",
        },
    },
    areaStyle: {//區(qū)域填充樣式
        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,
            },
        },
    },
},],

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

// 線性漸變，前四個參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當(dāng)于在圖形包圍盒中的百分比，如果 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
}
// 徑向漸變，前三個參數(shù)分別是圓心 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"
}

GitHub:https://github.com/myNameTao/...

因為不熟悉Echarts還是需要花時間慢慢看文檔，所以整理這個例子是便于遇到類似的需求就可以拿過直接用。在使用Echarts之前覺得這個插件Api內(nèi)容很多，但是去看了一遍折線圖的Api后發(fā)現(xiàn)有很多都是類似的，例如X軸與Y軸的設(shè)置。