echarts自定义折线图

先看效果：

这里的难点可能出了常规的参数修改以外，就是折线回执区域的渐变色是怎么设置的，其实就是series下面的areaStyle设置。

areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 144, 255,0.7)'
                    }, {
                        offset: 1,
                        color: 'rgba(5, 26, 51,0)'
                    }])
            }

下面来看代码：

<div id="part2" style="width: 100%;height:240px;"></div>

<script src="js/jquery.min.js"></script>
<script src="echarts/dist/echarts.min.js"></script>

<script type="text/javascript">
//第二部分
    var dom2 = document.getElementById("part2");
    var myChart2 = echarts.init(dom2);
    var app2 = {};
    option2 = null;
    option2 = {
        tooltip: {
            trigger: 'axis',
            formatter: function( params ) {
                return formatterTip(params,2);
            }
        },
        textStyle: {
            color: '#466293'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            name: '(月)',
            data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
            axisLabel: {
                show: true,
                textStyle: {
                    fontSize: 16,
                    color: '#466293',
                    fontFamily: 'DINProRegular'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#00345c',
                } 
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#00345c',
                } 
            }
        },
        yAxis: {
            type: 'value',
            name: '(%)',
            //y轴文字属性设置
            axisLabel: {
                textStyle: {
                    fontSize: 16,
                    color: '#466293',
                    fontFamily: 'DINProRegular'
                },
                formatter: '{value}'
            },
            //y轴横向分割线颜色
            splitLine: {
                show: true,
                lineStyle: {
                   color: '#0c3668' 
                }
            },
            //y轴刻度线颜色
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#00345c',
                } 
            },
            //y轴边框颜色
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#00345c',
                } 
            }
        },
        series: [{
            name: '出租率',
            data: [86.76,84.43,86.16,85.6,84,80,76,90,88,85,76,77],
            type: 'line',
            itemStyle: {
                    color: 'rgb(0, 144, 255)'
                },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 144, 255,0.7)'
                    }, {
                        offset: 1,
                        color: 'rgba(5, 26, 51,0)'
                    }])
            }
        }]
    };
    ;
    if (option2 && typeof option2 === "object") {
        myChart2.setOption(option2, true);
    }

    //自定义折线图tooltip
    function formatterTip(params,a) {
        var tip = '';
        //自定义左边的那个小圆圈
        var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f6c100"></span>';
        for (var i = 0; i < params.length; i++) {//这里是自己定义样式， params[i].marker 表示是否显示左边的那个小圆圈
            if (params[i].value != 0) {
                if(a == 2){
                    tip += params[i].name + '月' + '<br/>' + dotHtml + params[i].seriesName + '：' + params[i].value + '%';
                }
            }
        }
        return tip;
    }
</script>

当然如果有更精细的修改，可以去查看官方文档。比如我想改变x轴上指示线的颜色，就在去手册搜xAxis关键词，然后找到指示器（看多了自然就可以根据单词翻译过来，就知道是哪个属性值了）

然后在代码里添加即可：

 效果如下：

指示线就变成了黄色。