ECharts的特点有哪些_前端培训

ECharts 包含了以下特性:

1、丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

2、多种数据格式无需转换直接使用: 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,此外还支持输入 TypedArray 格式的数据。

3、千万数据的前端展现: 通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量。

4、移动端优化: 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。

5、多渲染方案,跨平台使用: 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。

6、深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

7、多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等,传入的数据也可以是多个维度的。

8、动态数据: 数据的改变驱动图表展现的改变。

9、绚丽的特效: 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。

10、通过 GL 实现更多更强大绚丽的三维可视化: 在 VR,大屏场景里实现三维的可视化效果。

11、无障碍访问(4.0+): 支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问! 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts3 是一款非常强大的 JavaScript 可视化库,可以用于绘制各种类型的图表。其中,Graph 图表是 ECharts3 中的一种类型,可以用于绘制拓扑图。 Java 与 ECharts3 的集成可以通过 java-echarts3 库来实现,该库提供了 Java 与 ECharts3 的交互接口。下面是一个简单的示例代码,演示了如何使用 java-echarts3 绘制一个简单的拓扑图: ```java import com.timeyang.jkes.core.support.ECharts3; import com.timeyang.jkes.core.support.ECharts3.Graph; import com.timeyang.jkes.core.support.ECharts3.Graph.CategoryData; import com.timeyang.jkes.core.support.ECharts3.Graph.GraphData; import com.timeyang.jkes.core.support.ECharts3.Graph.Link; import com.timeyang.jkes.core.support.ECharts3.Graph.Node; import com.timeyang.jkes.core.support.ECharts3.Graph.Option; import java.util.ArrayList; import java.util.List; public class TopologyChart { public static void main(String[] args) { // 创建一个 ECharts3 实例 ECharts3 echarts = new ECharts3(); // 创建一个 Graph 实例 Graph graph = new Graph(); // 设置 Graph 的标题和布局方式 graph.setTitle("Topology Chart"); graph.setLayout("force"); // 创建节点数据 List<Node> nodes = new ArrayList<>(); nodes.add(new Node("node1", "Node 1", "circle", 50)); nodes.add(new Node("node2", "Node 2", "circle", 50)); nodes.add(new Node("node3", "Node 3", "circle", 50)); nodes.add(new Node("node4", "Node 4", "circle", 50)); nodes.add(new Node("node5", "Node 5", "circle", 50)); // 创建分类数据 List<CategoryData> categories = new ArrayList<>(); categories.add(new CategoryData("Category 1")); categories.add(new CategoryData("Category 2")); // 创建边数据 List<Link> links = new ArrayList<>(); links.add(new Link("node1", "node2", 1)); links.add(new Link("node2", "node3", 1)); links.add(new Link("node3", "node4", 1)); links.add(new Link("node4", "node5", 1)); links.add(new Link("node5", "node1", 1)); // 创建 Graph 数据 GraphData data = new GraphData(nodes, categories, links); // 创建 Graph 配置项 Option option = new Option(); option.setSeries(data); // 将 Graph 配置项设置给 ECharts3 实例 echarts.setOption(option); // 输出 ECharts3 实例的 HTML 代码 System.out.println(echarts.toHtml()); } } ``` 运行上述代码,将输出一个包含拓扑图的 HTML 页面。你可以使用任何 Web 浏览器打开该页面,查看绘制的拓扑图。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值