提问 发文

平台第三方组件ECharts使用指南

易知微创新技术团队

| 2024-08-30 15:02 84 0 0

ECharts是应用最为广泛的开源图表库之一,EasyV为提高产品开放度并拓展官方图表组件的能力对ECharts图表库进行了集成。本文以ECharts组件中基础折线图为例进行说明。


一、组件说明

ECharts组件位于【组件】-->【第三方】组件栏:

图片

选择初始化创建的图表类型:

图片


二、配置项解析

选择【基础折线图】,进行自定义配置。

图片

2.1 初始化

代码输入框里本身是一个JavaScript代码环境,输入框里输入的代码也是最终作为一个函数来调用,函数必须返回一个ECharts实例。一般是调用echarts.init()方法来创建实例,此处可写入初始化相关的操作。这个函数在【配置项】的函数之前执行。

图片

2.1.1 主题

ECharts 提供了一个强大的主题功能,允许您自定义图表的整体外观和风格。使用主题功能,您可以轻松地为您的图表设置统一的配色方案、字体样式等,从而达到视觉一致性。

主要的使用步骤如下:

step 1.创建主题对象

您可以通过echarts.registerTheme() 方法注册一个新的主题。这个方法接受一个对象作为参数,该对象包含了所有您想要定制的图表元素的样式。
图片

注册新主题

step 2.应用主题

在创建ECharts 实例时,您可以通过 theme 参数来应用自定义主题。
图片

theme参数自定义主题的效果

step 3.使用内置主题

除了自定义主题,ECharts 还提供了一些内置的主题,如 'light'、'dark' 等。您可以直接使用这些内置主题,无需额外注册。
图片

内置主题效果

step 4.主题配置项

主题配置对象包含了图表中各个组件的样式设置,如 color、textStyle、title、legend 等。您可以根据需要对这些配置项进行定制。
图片

自定义样式设计效果

图片

2.2 配置项

2.2.1 【入门版】—直接拷贝ECharts 组件中的 option 配置信息

进入ECharts官网,选择所需的组件。

图片

拷贝ECharts组件中的option配置信息到工作台中。
图片

拷贝的option信息

图片

在工作台中的效果

2.2.2 【进阶版】—使用ECharts 实例本身,且异步请求资源动作

图片

异步请求且使用Echarts实例

图片

2.3 资源

ECharts图表有时候依赖外部的图像、json文件等资源。一般来说可以在「初始化」、「配置项」中的代码输入框里通过调用接口的形式获取资源,引用的资源接口必须与EasyV平台网络环境相通且支持跨域。ECharts组件也提供了在EasyV平台上传资源在代码中引用的方式。
图片

在EasyV平台上传资源

ID:输入资源的唯一标识,该标识可在上文中提到的RES资源对象上引用(如RES.img)的形式获取到资源的url。

文件:可以上传任意格式的文件资源,大小限制为150M


收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

轻松设计高效搭建,减少3倍设计改稿与开发运维工作量

开始免费试用 预约演示

扫一扫关注公众号 扫一扫联系客服

©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号

互联网信息服务业务 合字B2-20220090

400-8505-905 复制
免费试用
微信社区
易知微-数据可视化
微信扫一扫入群