Canvas渲染

使用 Canvas 渲染器（默認(rèn)）等價于：使用 SVG 渲染器

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

在大多數(shù)瀏覽器側(cè)圖庫中，將選擇SVG或畫布進(jìn)行渲染。對于繪制圖表，這兩種技術(shù)通常是可替換的，并且具有類似的效果。然而，在某些情況下，它們的性能和能力是不同的。因此，他們的選擇成為一個長期存在的話題，不容易有一個標(biāo)準(zhǔn)答案。 Apache EChartsTM從一開始就使用Canvas繪制圖表（除了使用VML for IE8-）。ECharts v4.0發(fā)布了SVG渲染器，它提供了一個新的選擇。通過在初始化圖表實例時將渲染器參數(shù)設(shè)置為“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更適合繪制具有大量圖形元素的圖表（通常由大量數(shù)據(jù)導(dǎo)致）（例如熱圖表、地理坐標(biāo)系或平行坐標(biāo)系上的大型折線圖或散點圖），也適合實現(xiàn)一些視覺效果。然而，在許多場景中，SVG具有重要的優(yōu)勢：它具有較低的內(nèi)存消耗（這對于移動終端尤為重要）、略高的渲染性能，并且在用戶使用瀏覽器內(nèi)置的縮放功能時不會模糊。 我們可以根據(jù)硬件和軟件環(huán)境、數(shù)據(jù)量和功能需求綜合考慮選擇哪種渲染器。

import 'zrender/lib/svg/svg';

在良好的硬件和軟件環(huán)境以及少量數(shù)據(jù)（如PC上的業(yè)務(wù)報告）的情況下，可以使用兩個渲染器，而不會產(chǎn)生太多混淆。 在環(huán)境較差且性能問題需要優(yōu)化的場景中，可以通過實驗確定使用哪個渲染器。例如，我有以下經(jīng)歷： 當(dāng)需要創(chuàng)建許多ECharts實例并且瀏覽器容易崩潰（可能是因為Canvas的數(shù)量超過了手機(jī)的容量）時，可以使用SVG渲染器進(jìn)行改進(jìn)。粗略地說，如果圖表在低端Android機(jī)器上運行，或者我們使用一些特定的圖表，例如水球圖表，SVG渲染器可能會更好。 當(dāng)數(shù)據(jù)量較大且有許多交互時，可以選擇畫布渲染器。 我們強烈歡迎開發(fā)人員就他們的經(jīng)驗和場景向我們提供反饋，以幫助我們更好地優(yōu)化。 注意：除了某些特殊渲染可能依賴于畫布：例如眩光尾跡效果、混合效果的熱圖等，SVG支持的大多數(shù)功能。

SVG 底圖

如果我們想控制SVG中的某些元素或允許某些元素交互，我們首先需要在SVG中標(biāo)記這些元素：向這些元素添加名稱屬性（在下文中，我們將添加了名稱屬性的元素稱為“命名元素”）。許多功能（如select、emphasis、focus plus、label、labelLayout和工具提示）取決于元素的命名。 對于以下示例，我們只將name屬性name=“named_rect”添加到左側(cè)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中設(shè)置樣式。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）。您也可以在此處刪除某些命名元素的默認(rèn)樣式（例如，在設(shè)置emphasis.itemStyle.color:null后，當(dāng)鼠標(biāo)懸停時填充顏色不會改變）。

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

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

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

雖然可以在SVG中直接定義/來顯示文本標(biāo)簽，但ECharts也支持使用geo。標(biāo)簽或序列圖。label可在基礎(chǔ)地圖上設(shè)置標(biāo)簽。 默認(rèn)情況下，在鼠標(biāo)懸停時啟用標(biāo)簽功能。 'name1' 是一個 SVG 元素的名字。

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

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

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合理運用的詳細(xì)內(nèi)容，更多關(guān)于ECharts Canvas渲染底圖SVG的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論