ECharts Canvas渲染在SVG合理運用

Canvas渲染

使用 Canvas 渲染器（預設）等價於：使用 SVG 渲染器

var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
var chart = echarts.init(containerDom);
var chart = echarts.init(containerDom, null, {renderer: 'svg'});

在大多數瀏覽器側相簿中，將選擇SVG或畫布進行渲染。對於繪製圖表，這兩種技術通常是可替換的，並且具有類似的效果。然而，在某些情況下，它們的效能和能力是不同的。因此，他們的選擇成為一個長期存在的話題，不容易有一個標準答案。 Apache EChartsTM從一開始就使用Canvas繪製圖表（除了使用VML for IE8-）。ECharts v4.0釋出了SVG渲染器，它提供了一個新的選擇。通過在初始化圖表範例時將渲染器引數設定為“canvas”或“svg”，可以方便地指定渲染器。 首先向 echarts 註冊 SVG 字串或解析過的 SVG DOM，參照註冊過的底圖。

$.get('map/organ.svg', function (svg) {
    echarts.registerMap('organ_diagram', {svg: svg});
    var chart = echarts.init(document.getElementById('main'))。
    chart.setOption({
        geo: [{
            map: 'organ_diagram',
            ...
        }]
    });
});

一般來說，Canvas更適合繪製具有大量圖形元素的圖表（通常由大量資料導致）（例如熱圖表、地理座標系或平行座標系上的大型折線圖或散點圖），也適合實現一些視覺效果。然而，在許多場景中，SVG具有重要的優勢：它具有較低的記憶體消耗（這對於行動終端尤為重要）、略高的渲染效能，並且在使用者使用瀏覽器內建的縮放功能時不會模糊。 我們可以根據硬體和軟體環境、資料量和功能需求綜合考慮選擇哪種渲染器。

import 'zrender/lib/svg/svg';

在良好的硬體和軟體環境以及少量資料（如PC上的業務報告）的情況下，可以使用兩個渲染器，而不會產生太多混淆。 在環境較差且效能問題需要優化的場景中，可以通過實驗確定使用哪個渲染器。例如，我有以下經歷： 當需要建立許多ECharts範例並且瀏覽器容易崩潰（可能是因為Canvas的數量超過了手機的容量）時，可以使用SVG渲染器進行改進。粗略地說，如果圖表在低端Android機器上執行，或者我們使用一些特定的圖表，例如水球圖表，SVG渲染器可能會更好。 當資料量較大且有許多互動時，可以選擇畫布渲染器。 我們強烈歡迎開發人員就他們的經驗和場景向我們提供反饋，以幫助我們更好地優化。 注意：除了某些特殊渲染可能依賴於畫布：例如眩光尾跡效果、混合效果的熱圖等，SVG支援的大多數功能。

SVG 底圖

如果我們想控制SVG中的某些元素或允許某些元素互動，我們首先需要在SVG中標記這些元素：向這些元素新增名稱屬性（在下文中，我們將新增了名稱屬性的元素稱為“命名元素”）。許多功能（如select、emphasis、focus plus、label、labelLayout和工具提示）取決於元素的命名。 對於以下範例，我們只將name屬性name=“named_rect”新增到左側SVG路徑：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" fill-rule="evenodd" xml:space="preserve">
    <path name="named_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" />
    <path d="M 150,0 L 150,100 250,100 250,0 Z" fill="#567" />
</svg>

option = {
    geo: {
        map: 'some_svg',
        regions: [{
            name: 'element_name_1',
            itemStyle: { ... }
        }, {
            name: 'element_name_2',
            itemStyle: { ... }
        }]
    }
};

雖然SVG元素樣式（如顏色、字型、線寬等）可以直接在SVG檔案中定義，但ECharts還支援在選項中為命名元素客製化樣式，這可以提供很多方便。 您可以在geo中設定樣式。itemStyle或系列對映。itemStyle（還包括emphasis.itemStyle，select.itemStyle、blur.itemStyle和regions[i].itemStyle以及regions[i]。emphasis.itemStyle，regions[i].select.iitemStyle和regions[i]。select.item Style和region[i]。blur.iitemStyle）。您也可以在此處刪除某些命名元素的預設樣式（例如，在設定emphasis.itemStyle.color:null後，當滑鼠懸停時填充顏色不會改變）。

myChart.on('geoselectchanged', function (params) {
    var selectedNames = params.allSelected[0].name;
    console.log('selected', selectedNames);
});

此外，在使用序列圖時，還可以使用visualMap元件為命名元素指定樣式。參見烹飪牛的例子。 注意：只有這些命名元素才能在itemStyle中設定樣式：矩形、圓形、直線、橢圓、多邊形、多段線和路徑。

option = {
    geo: {
        map: 'some_svg',
        emphasis: {
            label: {
                show: false
            }
        }
    }
};

雖然可以在SVG中直接定義/來顯示文字標籤，但ECharts也支援使用geo。標籤或序列圖。label可在基礎地圖上設定標籤。 預設情況下，在滑鼠懸停時啟用標籤功能。 'name1' 是一個 SVG 元素的名字。

// 
myChart.on('click', { geoIndex: 0, name: 'name1' }, function (params) {
    console.log(params);
});

如果使用geo BoundingCoords作為邊界矩形。 否則，如果設定了<svg width=“…”height=“…”>，[0，0，width，height]將用作邊界矩形。（如果僅設定了寬度或高度，則僅使用[0，width]或[0，height]。）。 否則，如果設定了，則viewBox將用作邊界矩形。 否則，從整個SVG的所有元素的並集獲得最終的邊界矩形。 如果地理中心或地理縮放，則從上述1~4中獲得的邊界矩形將相應地進行變換。 確認邊界矩形後，它將被放置在相應的地理檢視埠中： 如果使用layoutCenter和layoutSize，則邊界矩形將放置在地理檢視埠的中心並儘可能填充（保持縱橫比）。 如果使用頂部、右側、底部和左側，則邊界矩形將被拉伸，並且地理檢視埠將被完全填充。

option = {
    geo: {
        map: 'some_svg'
    },
    series: {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        geoIndex: 0,
        data: [
            // SVG local coords.
            [488.2358421078053, 459.70913833075736],
            [770.3415644319939, 757.9672194986475],
            [1180.0329284196291, 743.6141808346214],
        ]
    }
};

以上就是ECharts Canvas渲染在SVG合理運用的詳細內容，更多關於ECharts Canvas渲染底圖SVG的資料請關注it145.com其它相關文章！