echart实现特殊tooltip和日期格式化

需求：echart绘制一条line类型的圆滑曲线图

UI图：

image

需求分析：

对x轴和y轴样式定制

对纵向数据线（图中横线）定制颜色

将横轴日期做日期格式化，格式为MM.dd

光标悬浮时竖线样式不是默认的line类型，需要定制

光标悬浮时出现tooltip，需格式化横轴日期、数据颜色、文字颜色

开始执行任务（秃秃秃秃秃秃秃秃秃秃秃秃秃秃秃秃秃秃颓，一天都很秃然~~~颓）

三个难点：

1、将横轴日期做日期格式化，格式为MM.dd，横轴模拟数据:

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

方法：配置xAxis .axisLabel格式化日期采用回调函数如下：

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、光标悬浮时出现tooltip，需格式化横轴日期、数据颜色、文字颜色

配置tooltip. Formatter采用回调函数如下：

formatter: function(params) {
    // 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}
${param.seriesName}：${param.value}
`;
  }
  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}
${param.seriesName}：${param.value}
`;
                    }
                    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内容是日期，需要格式化     
                    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: "过车数量",
                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: "行人数量",
                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,
            }, ],
        }