echarts大屏展示数据

1.准备工具

1)echarts

去官网下载镜像

https://www.echartsjs.com/zh/download.html

在终端进行 pip 安装

pip install pyecharts-1.7.1-py3-none-any.whl

安装完成之后,我们测试一下,

from pyecharts import Bar

报错了,但是并不是因为我们的安装有问题,而是版本不同的问题造成的

from pyecharts.charts import Bar

这样倒入包就没有问题了

用小段代码测试一下

from pyecharts.charts import Bar
from pyecharts import options as opts

# V1 版本开始支持链式调用
bar = (
    Bar()
    .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
    .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
    .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
    .set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
)
bar.render()

# 不习惯链式调用的开发者依旧可以单独调用方法
bar = Bar()
bar.add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
bar.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
bar.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
bar.set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
bar.render()

如果是在pycharm中运行,代码编译没有任何问题,但是也没有出现我么想要的结果

我们打开juptyer,一个交互式的环境,(ps:建议安装anaconda)

可以看到有结果了,在我们本地也确实生成了render.html,我们打开看一下

去本地找网页打开不方便,这时交互式的环境优势就体现出来了,bar.render_notebook(),在我们当前编辑器可以看到结果

我们的echarts就安装完了。

错误解决参考于 https://blog.csdn.net/shaooping/article/details/90316540

示例可参考于 https://github.com/pyecharts/pyecharts/blob/master/README.md

2)vs code

可直接从anaconda中点击安装

安装完成之后打开

打开之后,可以把我们的项目或者文件夹拖拽上去,然后我们就可以新建或者删除文件夹等等。

安装一些我们需要的小插件,可以搜索关键字查询去安装

2.工具准备完成之后,我们可以去学习如何大屏展示数据了

最终的结果:

代码参考于pink老师

css和js需要自己深入去学习了

原文地址:https://www.cnblogs.com/elly01/p/12705619.html

时间: 2024-09-28 22:51:01

echarts大屏展示数据的相关文章

《大屏可视化数据》该怎么设计?

前言:数据可视化是什么?可视化数据有哪些主要特征?为什么要使用大屏展示可视化数据?数据可视化是综合运用计算机图形学.图像.人机交互等,将采集.清洗.转换.处理过的符合标准和规范的数据映射为可识别的图形.图像.动画甚至视频,并允许用户与数据可视化进行交互和分析.使用数据可视化可以丰富内容,引人注意,调动人的情绪.引发人的共鸣,传递文化和价值.可视化数据的最主要目三个特征:新颖而有趣.充实而高效.美感且悦.以大屏作为可视化数据的主要载体,其原因在于面积大.可展示信息多.便于关键信息的共享讨论及决策,

大屏展示OneOaaS Monitor社区版发布

原文:http://url.cn/45XM0x2 ,请关注OneOaaS公众号获取更多信息     OneOaaS Monitor社区版正式发布,只需要2分钟,即可实现大屏展示 主要功能:故障展示大屏,可以替换Zabbix的Dashboard,在大屏上面展示故障 界面如下 功能概要 数据采集速率 当前故障数量 当前有故障的设备数量 当前故障按不同级别分布图 故障列表,可按最低故障级别过滤 故障数量趋势图,可按时间过滤 所有模块都支持定时刷新,可选择刷新周期 新版本消息提示 后续版本会逐步发布gr

Power BI 案例篇之大屏展示

Power BI 很多小伙伴日冲都会用到他做报告,其中 Power BI 还可以做大屏展示. 今天小编就为大家分享一个使用 Power BI 制作的大屏展示. 在Power BI 大屏设计中对背景的设计和配色比较有要求,主要是如果配色和布局搭配不好的话,就不会有大屏的感觉. 大屏其实我们抓住一个重点就行,科技感. 接下来让我们一起看看下面几个大屏的效果吧.大家发现了吗,上面这个大屏的背景元素都是以圆滑的轮廓为主,那我们再看看同样的换成方形的轮廓效果如何呢.大家可以回复我您觉得圆形的轮廓效果好还是

ECharts大屏可视化【词云,堆积柱状图,折线图,南丁格尔玫瑰图】

一.简介 参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html 二.代码实现 1 <!DOCTYPE html> 2 <html> 3 <head> 4    <meta charset="UTF-8"> 5    <title>ECharts入门</title> 6 </head> 7 <body> 8    <!--

vue3 将px转为vw(大屏展示可用)

1.装依赖 "cssnano": "^4.1.10", "cssnano-preset-advanced": "^4.0.7", "postcss-aspect-ratio-mini": "^1.0.1", "postcss-cssnext": "^3.1.0", "postcss-import": "^12.0.1&

大数据可视化大屏设计经验,教给你!

 前言    大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习这方面的设计. 今天要跟大家分享我一年多设计大数据可视化大屏的经验和观点,下面从UI设计.交互设计.动效设计三个方面来分享.  UI设计   设计大屏一样要谨记要以展示数据为核心,在任何炫酷屌炸天表现都要建立在不影响数据的有效展示上!   下图是天猫可视化大屏设计,图中屌炸天的3D地球围绕粒

如何构建可视化的营销数据大屏?

数据可视化大屏是数据展现最直观最全面的方式之一,对于企业重要数据指标的展示和实时数据的监测,是目前极佳的方案. 对于大屏数据展示,某知名汽车制造厂商的信息化团队有着深刻的建设经验. 该公司目前拥有两个工厂,年产量逾50万台.与此同时,公司的信息化建设也随着公司的发展在不断扩大,逐渐开始建设各类信息系统,目前公司系统总量有七八十个. 制造行业的业务流程可以说是最长的,从最早的研发.生产.制造.营销.售后.财务.采购以及综合管理,对于管理层而言流程十分复杂.众多领导对于信息数据的要求是希望只登录一个

真屏实据丨数据大屏设计实战—揭秘企业级数据大屏设计过程

本文来自网易云社区 作者: 魏辛逸 图片: "网易有数"可视化平台 大屏是我们用来分享.沟通.传播信息的有效途径之一.它将会进化成一种新的媒体形式,在品牌推广.政务接待.商业沟通.数据监控等各个场景发挥重要作用.本文主要整理了一些大屏设计过程中的方法和原则,希望能够为大家提供一些借鉴思路. 大屏是什么? 大屏设计是最近比较流行的概念,一般按照功能来分有几种: 1. 可交互的触摸屏,大多运用在互动教学课程或者报告演示现场,用户可结合交互操作来阐述具体内容.设计师需要对交互形式和传达内容作

大屏设计系列之六:有&quot;屏&quot;有据,阿里双11大屏是怎样炼成的

如果您想订阅本博客内容,每天自动发到您的邮箱中,请点这里 [IT168 专稿]本文根据[2016 第七届中国数据库技术大会](微信搜索DTCC2014,关注中国数据库技术大会公众号)现场演讲嘉宾染熙老师分享内容整理而成.录音整理及文字编辑[email protected]田晓旭@老鱼. 染熙,阿里云前端可视化工程师,负责DataV组件的架构.DataV可视化工具产品,以及数据产品的研发和2015年双十一的前端开发.专注于pc端web数据可视化的架构,探索数据可视化自动测试.新型的数据可视化等领域