Canvas渲染在ECharts技术以及SVG 底图里的合理运用【ECharts】-echarts缩放设置最小比例

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具有重要的优势：它具有较低的内存消耗（这对于移动终端尤为重要）、略高的渲染性能，并且在用户使用浏览器内置的缩放功能时不会模糊。

我们可以根据硬件和软件环境、数据量和功能需求综合考虑选择哪种渲染器。 importzrender/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作为边界矩形。

否则，如果设置了 <svgwidth=“…”height=“…”>，[0，0，width，height]将用作边界矩形。（如果仅设置了宽度或高度，则仅使用[0，width]或[0，height]。）。

否则，如果设置了

<svgviewBox=“…”>

则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],]}};