問題產(chǎn)生背景
我們的項(xiàng)目是離線h5項(xiàng)目樱哼，原生在有圖表的頁面截圖時，部分機(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還沒出，而且因?yàn)轫?xiàng)目中用圖表的地方比較多盛末，升級5后弹惦，有很多用法需要改，風(fēng)險(xiǎn)也比較大悄但。
最后用了硬編碼的方式肤频，去解決了這個問題，這里簡單記錄一下算墨。
-
通過js查找svg中dom元素text標(biāo)簽宵荒，將text標(biāo)簽的
clip-path屬性設(shè)置為none:text.setAttribute('clip-path', 'none')這樣文字就能顯示出來。
解決重疊净嘀，先找到滾動按鈕的標(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元素里面的一些屬性所代表的意思可以自行查閱岩臣，這里不做過多解釋溜嗜。
