問題產(chǎn)生背景

我們的項目是離線h5項目，原生在有圖表的頁面截圖時，部分機(jī)型截不了canvas渲染的圖表；溝通后，前端使用svg進(jìn)行渲染，同時svg渲染相對性能更高，尤其對配置不太高的機(jī)型來說，但是當(dāng)legend有滾動時，會導(dǎo)致兩個問題，一個是文字丟失，另外還有翻頁小按鈕和圖例的重影問題。

使用版本

{
  "vue-echarts": "^3.1.3",
  "echarts": "^4.1.0",
}

原因

兩個問題產(chǎn)生的根本原因：

通過查看svg的dom元素，發(fā)現(xiàn)text標(biāo)簽屬性設(shè)置了clip-path，就會導(dǎo)致文字顯示不出來；重影是分頁標(biāo)簽元素沒有純色背景覆蓋，導(dǎo)致有滑動效果時，就會重疊。

解決

上github，去echarts的isuues上去找了相關(guān)問題，發(fā)現(xiàn)這個問題很多人都會出現(xiàn)，然后看見開發(fā)人員都說在5版本的時候會解決。當(dāng)時出現(xiàn)這個問題比較早，那時候5還沒出，而且因為項目中用圖表的地方比較多，升級5后，有很多用法需要改，風(fēng)險也比較大。

最后用了硬編碼的方式，去解決了這個問題，這里簡單記錄一下。

1. 通過js查找svg中dom元素text標(biāo)簽，將text標(biāo)簽的clip-path屬性設(shè)置為none:

    text.setAttribute('clip-path', 'none')
   

   這樣文字就能顯示出來。

2. 解決重疊，先找到滾動按鈕的標(biāo)簽，然后創(chuàng)建純色的svg里面的path標(biāo)簽塊，并將其放在合適的位置，這樣就可以遮擋下面滾動的legend，就不會出現(xiàn)重疊。下面生成svg或html元素的方法：

/**
 * 根據(jù)dom字符串生成對應(yīng)的dom元素
 * @param {string} str dom字符串
 * @param {string} type 與元素相關(guān)聯(lián)的命名空間類型，html或svg
 */
function domStringTransformElement(str, type = 'html') {
  let config = null;
  if (type === 'html') {
    config = {
      namespace: 'http://www.w3.org/1999/xhtml',
      elName: 'div'
    }
  } else if (type === 'svg') {
    config = {
      namespace: 'http://www.w3.org/2000/svg',
      elName: 'svg'
    }
  }
  // 先生成dom容器
  const container = document.createElementNS(config.namespace, config.elName);
  container.innerHTML = str
  return container.children;
}

// 定義path標(biāo)簽的dom字符串
const pathStr = '<path d="M 0 0 L 100 0 L 100 25 L 0 25 Z" fill="#fff" fill-opacity="1" stroke="none" clip-path="none"></path>';
const pathDom = domStringTransformElement(pathStr, 'svg');

svg元素里面的一些屬性所代表的意思可以自行查閱，這里不做過多解釋。

Echarts代碼庫該問題的鏈接

#7989、#9312、#9565