百度echarts的项目实际应用

简介: 最近用echrts做了一个电视大屏的项目,总结一下。实际项目中初始化定义图表的简单使用1.新建一个 test.html 并放置一个 div 来承载图表:2.

最近用echrts做了一个电视大屏的项目,总结一下。

实际项目中初始化定义图表的简单使用

1.新建一个 test.html 并放置一个 div 来承载图表:

img_0669193e70aa6b8e66a9683f21251411.png

2.引入 echarts.js :

img_985b7c6fa54a5f0dacfaa963ccbbb0ac.png

3.获取承载图标的div盒子

var eChart1 = document.getElementById('main');

4、初始化的:

initPieEChart(echarts.init(eChart1));

function initPieEChart(){

option = {}

}

context.setOption(option);

5.渲染需要的数据跟服务端返回的数据结构不一致,需要自己对数据做处理

6、根据官网提供的例子去文档中寻找相应的属性;

代码不过多贴出了。

相关文章
|
3月前
|
Kubernetes 应用服务中间件 nginx
百度搜索:蓝易云【使用Kubernetes部署Nginx应用教程】
现在,你已经成功在Kubernetes集群上部署了Nginx应用。通过访问Service的外部IP地址,你可以访问Nginx服务。
42 4
|
3月前
SAP UI5 应用如何实现类似百度首页一样的访问方式试读版
SAP UI5 应用如何实现类似百度首页一样的访问方式试读版
35 0
|
10天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
34 1
|
4月前
|
安全 应用服务中间件 nginx
百度搜索:蓝易云【使用Debian、Docker和Nginx部署Web应用教程】
这些是在Debian上使用Docker和Nginx部署Web应用的基本步骤。根据您的需求和具体环境,可能还需要进行其他配置和调整。请确保在进行任何与网络连接和安全相关的操作之前,详细了解您的网络环境和安全需求,并采取适当的安全措施。
45 0
|
5月前
uni-app项目中如何添加百度统计代码?
uni-app项目中如何添加百度统计代码?
|
25天前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading 'setOption')`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
|
28天前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
3月前
|
Ubuntu Linux
百度搜索:蓝易云【Linux平台下构建TigerVNC项目教程】
至此,你已经成功在Linux平台下构建并安装了TigerVNC项目。现在你可以启动VNC服务器并通过VNC客户端连接到远程桌面。请注意,上述步骤仅适用于一般情况,具体的构建步骤可能会因为不同的系统环境和版本而有所不同。在实际操作中,可能还需要根据实际情况进行一些调整。
35 1
|
3月前
|
前端开发 安全 Go
无法通过 iframe 将百度首页嵌入到自己的前端应用里
无法通过 iframe 将百度首页嵌入到自己的前端应用里
286 0
|
5月前
|
Java Docker 容器
百度搜索:蓝易云【Docker部署jar项目教程】
请注意,以上是一个基本的教程,具体的步骤可能因项目结构和需求而有所不同。您可能需要根据实际情况进行调整和配置。同时,确保您的系统已经正确安装并配置了Docker。
47 1