自定义样式的echats折线图（过程示例）

需求,直接上设计图：
在这里插入图片描述
进入echats官网：
https://www.echartshtml" title=js>js.com/zh/index.html
找到官方实例：

随机选择一个顺眼的折线图：

进入后，开始改造。左边修改代码，右边则能够看到表现。

首先我们去除图中的区域填充效果,方便观察效果：删除掉左侧代码中的series.areaStyle:

html" title=js>js">series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        /*areaStyle: {}删除掉这一行*/
    }]

效果：
在这里插入图片描述
然后我们修改x、y轴上文字颜色和轴线、刻度线、网格线的显示效果，首先科普一下什么是轴线、刻度线、网格线。
轴线：即x轴和y轴。如下图

刻度线，就是轴线上用于标识刻度的线如下图：

网格线即刻度线的延长线，如下图：
在这里插入图片描述

html" title=js>js">xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7'],
                "splitLine": {     //网格线：显示
                    "show": true
                },
                "axisLine": {       //轴线：隐藏
                    "show": false
                },
                "axisTick": {       //刻度线：隐藏
                    "show": false
                }
            },
            yAxis: {
                type: 'value',
                "splitLine": {     //网格线：隐藏
                    "show": false
                },
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#5386C6'//y轴文字颜色
                    }
                },
                "axisLine": {       //轴线：隐藏
                    "show": false
                },
                "axisTick": {       //刻度线：隐藏
                    "show": false,
                },
            },

修改后效果如下：
在这里插入图片描述
然后我们来修改拐点样式和折线图线条的样式：

html" title=js>js">series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                symbolSize: 5,//拐点的大小
                smooth: true,//折线平滑化
                lineStyle: {
                    normal: {
                        color: '#46CD8E'//折线颜色
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#46CD8E',//拐点正常情况的颜色
                        opacity: 0//正常情况下，不显示拐点
                    },
                    emphasis: {//选中情况下拐点的颜色
                        borderWidth: 3,
                        opacity: 1,
                        backgroundColor:'#fff'
                    }
                },
            }]

效果如下：
在这里插入图片描述
然后我们来把渐变色的填充效果加上：

html" title=js>js">areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(70, 205, 142, 0.5)'
                        },{
                            offset: 1,
                            color: 'rgba(225,225,225,0)'
                        }])

                    }
                }

在这里插入图片描述

最后来做弹出的提示气泡：

html" title=js>js">tooltip: {
                trigger: 'axis',//触发方式
                axisPointer:{
                    z:0//触发轴层级：默认时层级很高，会遮挡住拐点
                },
                formatter: function (params) {//提示框自定义
                    return formatterTip(params);
                },
                backgroundColor: 'rgba(255,255,255,0)',//默认有一个背景色，手动将背景色设置透明，只显示我们写入的样式
            },

html" title=js>js">function formatterTip(params) {
            //移除重复的数据
            for (var i = 0; i < params.length; i++) {
                for (var j = params.length - 1; j > i; j--) {
                    if (params[j].data == params[i].data) {
                        params.splice(j, 1);
                        break;
                    }
                }
            }
            var tip = '';
            for (var i = 0; i < params.length; i++) {//这里是自己定义样式， params[i].marker 表示是否显示左边的那个小圆圈
                if (params[i].value != 0) {
                    tip = tip+'<div class="msg">'+'<p class="txt" >'+' 当日访问量'+'</p ><p class="num">'+params[i].value+'</p></div >';//html代码片段
                }
            }
            return tip;
        }

html" title=css>css">.dsjfx .cont .card .fwl .msg{
    background: url(../images/Bg-line-hover.png) no-repeat;
    width: 88px;
    height: 48px;
}
.dsjfx .cont .card .fwl .msg .txt{
    padding-top: 5px;
    font-size: 13px;
    line-height: 13px;
    color: #333;
    text-align: center;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.dsjfx .cont .card .fwl .msg .num{
    padding-top: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: #46CD8E;
    text-align: center;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}