Canvas渲染在ECharts技术以及SVG 底图里的合理运用【ECharts】

Canvas渲染在ECharts技术以及SVG 底图里的合理运用【ECharts】 黎燃 2023-03-22 11:54:59 1493

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]。)。

否则,如果设置了

<svg viewBox=“…”>

则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],
        ]
    }
};
声明:本文内容由易百纳平台入驻作者撰写,文章观点仅代表作者本人,不代表易百纳立场。如有内容侵权或者其他问题,请联系本站进行删除。
黎燃
红包 点赞 收藏 评论 打赏
评论
0个
内容存在敏感词
手气红包
    易百纳技术社区暂无数据
相关专栏
置顶时间设置
结束时间
删除原因
  • 广告/SPAM
  • 恶意灌水
  • 违规内容
  • 文不对题
  • 重复发帖
打赏作者
易百纳技术社区
黎燃
您的支持将鼓励我继续创作!
打赏金额:
¥1易百纳技术社区
¥5易百纳技术社区
¥10易百纳技术社区
¥50易百纳技术社区
¥100易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区微信支付
易百纳技术社区
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

举报反馈

举报类型

  • 内容涉黄/赌/毒
  • 内容侵权/抄袭
  • 政治相关
  • 涉嫌广告
  • 侮辱谩骂
  • 其他

详细说明

审核成功

发布时间设置
发布时间:
是否关联周任务-专栏模块

审核失败

失败原因
备注
拼手气红包 红包规则
祝福语
恭喜发财,大吉大利!
红包金额
红包最小金额不能低于5元
红包数量
红包数量范围10~50个
余额支付
当前余额:
可前往问答、专栏板块获取收益 去获取
取 消 确 定

小包子的红包

恭喜发财,大吉大利

已领取20/40,共1.6元 红包规则

    易百纳技术社区