{ grid: { left: '5px', right: '10px', top: '10px', bottom: '40px', containLabel: true }, tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)', padding: 0, formatter(params) { return ` <div style="height: 80px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); border-radius: 5px;"> <p style="color: ${CONFIG.COLOR[params.color]}; background: ${params.color}; height: 38px; padding: 0 16px; line-height:38px; border-radius: 5px 5px 0 0;">${params.seriesName}</p> <p style="height: 42px; line-height: 42px; text-align: center; color: #303133; border-radius: 0 0 5px 5px; padding: 0 16px; background: #fff;"> <span>${params.name}:</span> <span style="font-weight: 600;" > $ {Util.comma ( the params .Value)} </ span> </ P> </ div> ` } }, Legend: { type: ' Scroll ' , // legend forced not to wrap (scroll) Data: Option .legend, bottom: . 5 , icon: ' RoundRect ' , // modify the legend style itemWidth: 10 , // Review Legend width itemHeight: 12 is modified high legend // }, XAXIS: { // boundaryGap: to false, Data: Option. XAXIS, AxisLabel: { textStyle: { color: '#797878' } }, axisLine: { lineStyle: { color: "#ececec" } } }, yAxis: { splitLine: { lineStyle: { color: '#ececec' } }, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { textStyle: { color: '#797878' } }, type: 'value' }, series: option.series }