百度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、根据官网提供的例子去文档中寻找相应的属性;

代码不过多贴出了。

相关文章
|
7月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
171 1
|
7月前
|
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`异步绘制数据。
153 3
|
2月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
42 1
|
4月前
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图
|
4月前
|
JavaScript 数据可视化 搜索推荐
在Vue项目中使用Echarts图表库
这篇文章介绍了如何在Vue项目中集成ECharts图表库,并通过具体的代码示例展示了如何创建并配置一个饼图来展示数据。
51 0
在Vue项目中使用Echarts图表库
|
6月前
|
JavaScript 开发工具 git
大事件项目17----Vue项目引入Echarts
大事件项目17----Vue项目引入Echarts
大事件项目17----Vue项目引入Echarts
|
6月前
|
搜索推荐 数据可视化 前端开发
ECharts 词云图案例【用户画像】:创意蒙版应用
使用ECharts创建词云图,结合蒙版技术提升可视化创意。通过设置`maskImage`属性,将自定义图像作为词云的外形,如用户画像。案例中详细介绍了HTML结构、ECharts配置及蒙版图像加载过程,鼓励探索SVG路径和CSS样式以实现更多个性化效果。代码和依赖可下载,激发更多数据可视化灵感。
254 0
 ECharts 词云图案例【用户画像】:创意蒙版应用
|
5月前
|
JavaScript
【vue】 在vue2项目中使用echarts
【vue】 在vue2项目中使用echarts
87 0
|
6月前
|
JavaScript 容器
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
413 0

热门文章

最新文章