vue中echarts折线图中设置背景渐变&选中样式

设置改折线图的背景颜色 选中样式为柱状阴影 选中点有外发光

//html

<div class="middle-center-charts" ref="middleCenterCharts"></div>

//js
            var myChart = echarts.init(this.$refs.middleCenterCharts); //获取元素进行echarts初始化
            // 指定图表的配置项和数据
                var option = {
                    color: ["#26E78D", "#FFD83C"],
                    textStyle: {
                        color: "#71A3CD"
                    },
                    legend: {
                        data: ["到访人数", "预约人数"],
                        icon: "circle",
                        itemWidth: 6,
                        itemHeight: 6,
                        right: 20,
                        textStyle: {
                            color: "#fff",
                            fontSize: 12
                        }
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor:'rgba(21,75,121,0.9)',
                         extraCssText:'box-shadow: 0  6px 10px rgba(0,8,23,.65)',
                        padding:[5,20],
                        axisPointer: {
                            type: "line",
                            lineStyle: {
                                width: '40',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(91,179,252,0)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(91,179,252,0.2)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        formatter:
                            '<div class="toolTip">到访人数：<span class="num-size" style="color:#2CFF9D">{c0}</span>人<br />预约人数：<span class="num-size" style="color:#FFD83C">{c1}</span>人</div>'  
                        
                    },
                    grid: {
                        //坐标系设置
                        containLabel: true,
                        left: 0,
                        right: 10,
                        bottom: 0,
                        top: 34,
                        show:true,
                        backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(1,48,87,0)" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(1,48,87,0.8)" // 100% 处的颜色
                            }
                        ]), //背景渐变色
                        borderColor: "rgba(0,0,0,0)"
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: true,
                        nameTextStyle:{
                            align:'center'
                        },
                        axisLine: {
                            //坐标线
                            lineStyle: {
                                color: "rgba(255,255,255,0.5)"
                            }
                        },
                         axisLabel: {
                                interval: 0,
                                fontFamily:'DIN'
                            },
                        axisTick: {
                            //刻度
                            show: false
                        },
                        data: data.map(item => {
                            var d = item.week;
                               var dy =  d.replace(/-/g,"/");
                                return dy;
                        })
                    },
                    yAxis: {
                        type: "value",
                        axisLine: {
                            //坐标轴
                            lineStyle: {
                                color: "rgba(255,255,255,0.5)"
                            }
                        },
                         axisLabel: {
                                fontFamily:'DIN'
                            },
                        splitLine: {
                            //分割线
                            lineStyle: {
                                color: "rgba(128,128,128,0.3)",
                                type: "dashed"
                            }
                        },
                        minInterval: 10
                    },
                    series: [
                        {
                            name: "到访人数",
                            type: "line",
                            symbol:'circle',
                            symbolSize:'8',
                            lineStyle: {
                                type: "dotted",
                                width: 1
                            },
                            hoverAnimation:false,
                            itemStyle: {
                                emphasis:{ // 鼠标经过时：
                                    shadowColor: 'rgba(44,255,157,1)',
                                    shadowBlur: 10
                                }
                            },
                            data: res.data.map(item => {
                                return parseInt(item.visited);
                            })
                        },
                        {
                            name: "预约人数",
                            type: "line",
                            symbol:'circle',
                            symbolSize:'8',
                            hoverAnimation:false,
                            lineStyle: {
                                type: "dotted",
                                width: 1
                            },
                            itemStyle: {
                                emphasis:{ // 鼠标经过时：
                                    shadowColor: 'rgba(255,216,60,1)',
                                    shadowBlur: 10
                                }
                            },
                            data: data.map(item => {
                                return item.visiting;
                            })
                        }
                    ]
                };
                myChart.clear();
                myChart.resize();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);