Pyecharts坑之一---“画图不显示“

在使用Pyecharts进行数据可视化时遇到图不显示的问题,可能由于数据类型不匹配导致。错误表现为数据类型为numpy.int32,而非所需类型。解决方法是确保数据全部转换为int类型,例如通过列表推导式转换,从而成功绘制柱状图。
摘要由CSDN通过智能技术生成

关于Pyecharts画图,图却不显示出来的问题,出问题可能有好几种原因。可能是版本问题、包没下全等等,在这边说的是一个很坑的问题,博主因为这个白白浪费了好几个小时和精力。
最近在做数据挖掘课设,用pandas处理数据,十分的方便,没错,图不显示就是因为它。下面为大家举个例子:
假设我们有一组数据,转为DataFrame或者Series后经过多种处理,最终从中提取出来,想要用pyecharts做一个图,于是就会出现文章标题这样的错误。

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

x = [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49]
y = [3, 8, 7, 18, 28, 48, 59
tui-image-editor 是一个基于 JavaScript 和 HTML5 Canvas 的开源图像编辑器,可以实现图像裁剪、旋转、缩放、滤镜、涂鸦等功能。 下面是一个使用 tui-image-editor 实现画图的示例代码: 1. 安装 tui-image-editor 可以使用 npm 或 yarn 安装 tui-image-editor: ```bash npm install tui-image-editor --save # 或者 yarn add tui-image-editor ``` 2. 在组件中引入 tui-image-editor 可以通过 CDN 或模块化方式引入 tui-image-editor: ```html <template> <div ref="editor"></div> </template> <script> import ImageEditor from 'tui-image-editor'; export default { name: 'DrawImage', mounted() { const editor = new ImageEditor(this.$refs.editor, { includeUI: { loadImage: { path: 'https://img-cdn-qiniu.dcloud.net.cn/images/paint.jpg', name: 'SampleImage', }, theme: { // 主题配置 }, menu: ['shape', 'filter'], initMenu: 'filter', uiSize: { // UI 大小配置 }, }, cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70, }, }); }, } </script> ``` 在上面的代码中,我们在组件的 template 中添加了一个 div 元素,并使用 ref 属性获取其引用。 在 mounted 钩子函数中,我们通过 new ImageEditor() 创建了一个新的 tui-image-editor 实例,并将其绑定到组件的 $refs.editor 属性上。 通过 includeUI 属性可以配置 tui-image-editor 的 UI 界面,包括加载图片、主题、菜单、UI 大小等。 3. 在组件中使用 tui-image-editor 的 API 可以通过 tui-image-editor 实例的 API 来实现各种画图功能。例如,我们可以在组件中添加一个按钮,点击按钮后在图像上绘制一条线段。 ```html <template> <div> <div ref="editor"></div> <button @click="drawLine">绘制线段</button> </div> </template> <script> import ImageEditor from 'tui-image-editor'; export default { name: 'DrawImage', mounted() { this.editor = new ImageEditor(this.$refs.editor, { includeUI: { loadImage: { path: 'https://img-cdn-qiniu.dcloud.net.cn/images/paint.jpg', name: 'SampleImage', }, theme: { // 主题配置 }, menu: ['shape', 'filter'], initMenu: 'filter', uiSize: { // UI 大小配置 }, }, cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70, }, }); }, methods: { drawLine() { const activeObj = this.editor._graphics.getActiveObject(); const points = [ { x: activeObj.left + 50, y: activeObj.top + 50 }, { x: activeObj.left + 100, y: activeObj.top + 100 }, ]; const line = new fabric.Line(points, { strokeWidth: 5, fill: 'red', stroke: 'red', originX: 'left', originY: 'top', }); this.editor._graphics.add(line); this.editor._graphics.renderAll(); this.editor._graphics.setActiveObject(line); }, }, } </script> ``` 在上面的代码中,我们使用了 tui-image-editor 实例的 _graphics 属性来获取当前图像的画布对象,并使用 fabric.js 中的 Line 类来创建一条线段。然后将线段添加到画布对象中,并调用 renderAll() 方法重新渲染画布。 最后,我们使用 setActiveObject() 方法将新创建的线段设为当前选中对象。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值