echarts 折线图设置阴影显示凸出

HTML:

<div style="height: 210px;">
     <div id="line" style="height: 100%;padding: 15px;"></div>
</div>

JS:

var line = document.getElementById("line");
    var myChartline = echarts.init(line);
    optionLine = {
        title: {
            text: '最高技术出力',
            color: "#333333",
            x: "center",
            y: "top",
        },
        textStyle: {
            color: "#999999"
        },
        grid: {
            left: "40",
            top: '50',
            right: '20',
            bottom: '30'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show:false
        },
        xAxis: {
            type: 'category',
            splitLine: {
                show: false,
                lineStyle: {
                    color: ['#fff'],
                    width: 1,
                    type: 'solid'
                }
            },
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLine: {
                lineStyle: {
                    color: '#DDDDDD'
                }
            }
        },
        yAxis: {
            axisTick: {
                show: false
            },
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#DDDDDD'],
                    width: 1,
                    type: 'solid'
                }
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#DDDDDD',
                    width: '1'
                }
            }
        },
        series: [
            {
                name: '最高气温',
                type: 'line',
                data: [11, 11, 15, 13, 12, 13, 10],
                symbolSize: 5,
                showSymbol: false,
                markPoint:{
                    label: {
                        show: true,
                        position: "top",
                        distance: 7,
                        offset: [1, 1],
                        color:'#fff',
                        lineHeight: 10,
                        padding: [8,10],
                        backgroundColor: { // 此处设置背景图
                            image: '${path}/static/home/images/biaozhu.png'
                        },
                        formatter: '{c}'
                    },
                    symbol: "circle",
                    symbolSize: 13,
                    symbolOffset: [0, 0],
                    color:'rgba(121, 199, 253, 1)',
                    data: [ {type: 'max', name: '最高气温'}, ],
                },
                itemStyle: {
                    normal: {
                        color: "rgba(121, 143, 253, 1)",
                        lineStyle: {
                            color: "rgba(121, 143, 253, 1)"
                        }
                    }
                },
                lineStyle: {
                    normal: {
                        width: 5,
                        color: { // 设置渐变线条
                            type: 'linear',
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(121, 199, 253, 1)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(121, 143, 253, 1)'
                            },{
                                offset: 1,
                                color: 'rgba(186, 121, 253, 1)'
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(238, 238, 238, 1)',
                        shadowBlur: 3,
                        shadowOffsetY: 20 // 此处设置凸出的偏移量
                    }
                }
            }
        ]
    };
    myChartline.setOption(optionLine);

就是这么简单

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值