需求：echart繪制一條line類型的圓滑曲線圖

UI圖：

image

需求分析：

對x軸和y軸樣式定制

對縱向數(shù)據(jù)線（圖中橫線）定制顏色

將橫軸日期做日期格式化，格式為MM.dd

光標懸浮時豎線樣式不是默認的line類型，需要定制

光標懸浮時出現(xiàn)tooltip，需格式化橫軸日期、數(shù)據(jù)顏色、文字顏色

開始執(zhí)行任務（禿禿禿禿禿禿禿禿禿禿禿禿禿禿禿禿禿禿頹，一天都很禿然~~~頹）

三個難點：

1、將橫軸日期做日期格式化，格式為MM.dd，橫軸模擬數(shù)據(jù):

["2020/11/01", "2020/11/02", "2020/11/03", "2020/11/04", "2020/11/05", "2020/11/06", "2020/11/07"]

方法：配置xAxis .axisLabel格式化日期采用回調(diào)函數(shù)如下：

formatter: function(value) {
  return echarts.format.formatTime("MM.dd", new Date(value));
}

2、光標懸浮時豎線樣式不是默認的line類型，需要定制

思路：配置series:

{
  showSymbol:false,
  //光標懸浮在曲線上的樣式
  symbol: "image://http://106.13.149.18/zimg/8b800d06cee1ab8fee3288757bdf83bd?q=1&f=png",
  symbolSize:[12,136],
  //光標懸浮時是否加粗
  hoverAnimation:false
}

3、光標懸浮時出現(xiàn)tooltip，需格式化橫軸日期、數(shù)據(jù)顏色、文字顏色

配置tooltip. Formatter采用回調(diào)函數(shù)如下：

formatter: function(params) {
    // params數(shù)組可以了解一下，一條線和多條線都是數(shù)組
    var html = "";
    for (var i in params) {
    var param = params[i];
    // echarts日期格式化api
    var date = echarts.format.formatTime("yyyy-MM-dd",new Date(param.name));
    html += `${date}<br />${param.seriesName}：<span style="color: #FFFFFF">${param.value}</span><br />`;
  }
  return html;
}

為增強效果贈送一條線，上效果圖：

留圖留種上代碼，測試地址https://echarts.apache.org/examples/zh/editor.html?c=line-smooth

image

option = {
            backgroundColor: "#052647",
            tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(33,47,71,0.8)",
                padding: [10, 16],
                textStyle: {
                    color: "#A7C8ED",
                    lineHeight: 28,
                },
                formatter: function(params) {
                    var html = "";
                    for (var i in params) {
                        var param = params[i];
                        // echarts日期格式化api           
                        var date = echarts.format.formatTime("yyyy-MM-dd", new Date(param.name));
                        html += `${date}<br />${param.seriesName}：<span style="color: #FFFFFF">${param.value}</span><br />`;
                    }
                    return html;
                },
                axisPointer: {
                    type: "none",
                },
                extraCssText: "width: 170px",
            },
            // 圖表部分邊距 
            grid: {
                top: "60",
                left: "35",
                right: "34",
                bottom: "35",
                containLabel: true,
            },
            xAxis: {
                type: "category",
                data: ["2020/11/01", "2020/11/02", "2020/11/03", "2020/11/04", "2020/11/05", "2020/11/06", "2020/11/07", ],
                // x軸軸線    
                axisLine: {
                    lineStyle: {
                        color: "rgba(54, 112, 187, 1)",
                        width: 2,
                    },
                },
                // x軸刻度點邊界    
                boundaryGap: true,
                // x軸刻度隱藏    
                axisTick: {
                    show: false,
                },
                // x軸label顯示    
                axisLabel: {
                    fontSize: 14,
                    color: "#A7C8ED",
                    // label內(nèi)容是日期，需要格式化     
                    formatter: function(value) {
                        return echarts.format.formatTime("MM.dd", new Date(value));
                    },
                },
            },
            yAxis: {
                type: "value",
                // y軸軸線隱藏    
                axisLine: {
                    show: false,
                },
                // y軸刻度隱藏    
                axisTick: {
                    show: false,
                },
                // 縱向橫線    
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(54, 112, 187, 1)",
                    },
                },
                // y軸label    
                axisLabel: {
                    fontSize: 14,
                    color: "#A7C8ED",
                },
            },
            series: [{
                name: "過車數(shù)量",
                data: [820, 932, 901, 934, 1090, 1130, 1120],
                type: "line",
                smooth: true,
                itemStyle: {
                    color: "#F7D591",
                },
                    // 光標懸浮在曲線上的樣式      
                showSymbol: false,
                symbol: "image://http://圖片路徑",
                symbolSize: [12, 136],
                // 光標懸浮時是否加粗      
                hoverAnimation: false,
            }, {
                name: "行人數(shù)量",
                data: [320, 332, 401, 434, 390, 430, 420],
                type: "line",
                smooth: true,
                itemStyle: {
                    color: "#42D5F8",
                },
                // 光標懸浮在曲線上的樣式      
                showSymbol: false,
                symbol: "image://http://圖片路徑",
                symbolSize: [12, 136],
                // 光標懸浮時是否加粗      
                hoverAnimation: false,
            }, ],
        }