ECharts中自定义tooitip,设置区域缩放

Strive-x

已于 2024-09-26 16:46:03 修改

阅读量91

点赞数 2

文章标签： javascript 前端 vue.js

于 2024-09-19 16:45:04 首次发布

本文链接：https://blog.csdn.net/2301_76742166/article/details/142364365

版权

            tooltip: {
              trigger: "item",
              className:'tooltip-style-box',
              formatter: (params) => {
                if(params.componentType === "series"){
                  return `
                   <div style="padding: 10px; background-color:#54665A;color: #fff;font-size: 12px;border-radius: 8px;border-color: #54665A">
                    <span>${params.data[0]}</span><br/>
                    <span>${params.seriesName} </span>
                    <span style="padding-left:10px;font-weight: bold">${params.data[1]}</span>
                   </div>`
                }else if(params.componentType === "markLine"){
                  return `
                   <div style="padding: 10px; background-color:#54665A;color: #fff;font-size: 12px;border-radius: 8px;border-color: #54665A">
                    <span>${params.data.label.name}</span>
                    <span style="padding-left:10px;font-weight: bold">${params.value} </span>
                   </div>`
                }
              },
            dataZoom: [
              {
                type: 'inside',
                start: 0,
                end: 100
              }
            ]