ECharts4是用JavaScript实现的制图必备神器,由百度EFE数据可视化团队推出。它可以在PC和移动设备上流畅运行,并兼容当前大多数浏览器(IE8/9/10/11、Chrome、Firefox等。).底层依靠轻量级矢量图形库ZRender来提供直观、交互式和高度定制的数据可视化图表。要彻底掌握,只需要掌握一点前端开发的知识,比如html,css,javascript。
使用说明
1.介绍ECharts很简单。就像常用的JavaScript库一样使用script标签2,画一个简单的图表。1)在绘制之前,我们需要为软件准备一个具有高度和宽度的DOM容器2),然后我们可以通过echarts.init方法初始化一个实例,并通过setOption方法生成一个简单的直方图3)。
软件特性
1.丰富的可视化类型提供了传统的折线图、直方图、散点图、饼图、k线图、统计用的箱线图、地图、热度图和地理数据可视化用的折线图、关系图、关系图和旭日图、多维数据可视化用的平行坐标、BI用的漏斗图。除了内置功能丰富的图表,该软件还提供自定义系列,通过传入renderItem函数,可以从数据映射到任何你想要的图形。更好的是,这些可以与现有的交互组件结合使用,而不用担心其他事情。您可以在下载界面下载包含所有图表的构建文件。如果只需要一两个图表,并且包含所有图表的构建文件太大,您也可以通过在在线构建中选择所需的图表类型来自定义构建。2.将内置的数据集属性(4.0)直接用于多种数据格式,无需转换,支持二维表、键值等数据源的直接传输。只需设置encode属性,即可完成从数据到图形的映射,更符合视觉直观,省略了大部分场景下数据转换的步骤,多个组件无需克隆即可共享一个数据。为了配合大数据的显示,软件还支持TypedArray格式数据的输入。TypedArray在存储大型数据时可以占用更少的内存,其GC友好的特性也可以大大提高可视化应用程序的性能。3.前端显示千万级数据通过增量渲染技术(4.0)和各种细致的优化,软件可以显示千万级数据,在这个数据级别上,仍然可以进行缩放、平移等流畅的交互。几千万的地理坐标数据,即使是二进制存储,也要占用几百MB。因此,软件还提供了对流式加载(4.0)的支持。你可以使用WebSocket或者分块加载数据,想渲染多少渲染多少!无需等待所有数据加载完毕后再进行绘制。4.移动终端的优化:移动终端的交互做了细节上的优化,比如移动终端的小屏幕适合在坐标系中用手指缩放平移。PC还可以使用鼠标缩放(使用鼠标滚轮)、平移等。细粒度的模块化和打包机制可以让软件在移动端的体积很小,可选的SVG渲染模块可以让移动端的内存占用不再捉襟见肘。5.多渲染方案,跨平台使用支持以Canvas、SVG(4.0)和VML的形式渲染图表。VML可以兼容较低版本的IE,SVG让移动端不再担心内存,Canvas可以轻松应对大数据和特效的显示。不同的渲染方式提供了更多的选择,使得软件在各种场景下的表现更加出色。除了PC和移动浏览器,该软件还可以与node-canvas合作,实现高效的服务器端渲染(SSR)。
从4.0开始,我们还和微信小程序的团队合作,提供软件对小程序的适配!社区中热心的贡献者也为我们提供了其他语言的丰富扩展,比如Python中的pyecharts,recharts,Julia R语言,Julia中的ECharts.jl等等。我们希望平台和语言不会成为大家使用这个软件实现可视化的限制!6.深度交互数据探索交互是从数据中发现信息的重要手段。“总览先行,缩放过滤按需看细节”是数据可视化交互的基本要求。我们一直在交互的道路上前行,我们提供了图例、可视化映射、数据区缩放、工具提示、数据刷选择等开箱即用的交互组件。可以对数据进行多维数据筛选、视图缩放、显示细节等交互操作。7.多维数据的支持和丰富的可视化编码方式开始加强对多维数据的支持。除了平行坐标等常见的多维数据可视化工具,对于传统散点图来说,传入的数据也可以是多维的。通过可视化映射组件visualMap提供的丰富的可视化编码,不同维度的数据可以映射到不同的视觉通道,如颜色、大小、透明度和亮度。8.动态数据由数据驱动,数据的变化驱动图表的变化。因此,动态数据的实现变得极其简单。只需获取数据并填写数据,软件会找出两组数据的差异,然后通过适当的动画显示数据的变化。使用时间轴组件,数据的信息可以在更高的时间维度中表达。9.华丽的特效为线数据、点数据等地理数据的可视化提供了抢眼的特效。10.通过GL实现更加强大华丽的3D可视化。想在VR和大屏场景下实现3D可视化?我们提供了基于WebGL的ECharts GL,可以像普通组件一样方便地使用它来绘制地球、建筑物和人口分布的三维直方图。在此基础上,我们还提供了不同级别的屏幕配置项,几行配置就能得到一个艺术化的画面!11、无障碍(4.0)当我们谈到“可视化”时,往往会很自然地联想到“看见”,但这是片面的。W3C制定了WAI-ARIA(可访问的富互联网应用程序套件),致力于使更多的残疾人可以访问web内容和应用程序。符合该规范,支持根据图表配置项自动生成描述,使盲人在阅读设备的帮助下理解图表内容,图表可供更多人访问
常见问题
1。轴1。轴标签显示空间不够怎么办?您可以使用interval来控制显示多少标签,将其设置为0将显示所有标签。或者,可以设置axisLabel.rotate将标签旋转一定角度。2.坐标轴设置在右边好像没什么影响?OnZero需要设置为false。3.如何强制显示坐标轴的第一个/最后一个标签?从3.5.2版本开始,支持axisLabel.showMinLabel和axisLabel.showMaxLabel,分别用于控制是否强制显示第一个标签和最后一个标签。如果设置为true,将强制显示。如果不方便更新版本,可以参考这个例子达到同样的效果。第二,传说legend1。图例面积太大挡住图表怎么办?您可以设置网格控制图表区域的位置。例如,如果将grid.top设置得较大,可以向下移动绘图区域。在未来的版本中,我们计划让布局更加智能,并自动处理这些遮挡问题。第三,提示框tooltip1。如何实现上下图表提示框的联动?3.5版本开始支持该功能,效果如本例所示。四、折线图1、坐标轴的刻度好像和数据不符?请检查堆栈是否已设置。如果不想做堆积折线图,就要把它去掉。五.直方图1。当数据值很小时,Y轴刻度会消失?3.5.2版修复了这个问题。
6.地图1。省份名称重叠。如何修改地名的位置?可以在地图文件(JS或JSON)中修改对应省份的cp坐标,也可以通过echarts.getMap('中国')修改加载的地图数据。/2.如何获取地图的缩放事件?首先,您需要将系列的roam设置为true,然后您可以监听“georoam”事件。