uniapp 中如何使用echart_如何解决在uni-app使用mpvue-echarts报this.echarts.setCanvasCreator is not a function的错误...

本文介绍了在uni-app中使用mpvue-echarts时如何处理`this.echarts.setCanvasCreator is not a function`的错误。通过安装依赖并修改mpvue-echarts源码,实现echarts在uni-app中的正常工作。同时提供了一个简单的柱状图示例,展示如何在uni-app中创建和更新图表。
摘要由CSDN通过智能技术生成

注意::此方法用在微信小程序

安装依赖

npm install echarts mpvue-echarts

找到mpvue-echarts模块里的echarts文件,找到相应代码覆盖即可,替换如下

复制代码`

v-if="canvasId"

class="ec-canvas"

:id="canvasId"

:canvasId="canvasId"

@touchstart="touchStart"

@touchmove="touchMove"

@touchend="touchEnd"

@error="error"

>

export default {

props: {

canvasId: {

type: String,

default: "ec-canvas"

},

lazyLoad: {

type: Boolean,

default: false

},

disableTouch: {

type: Boolean,

default: false

},

throttleTouch: {

type: Boolean,

default: false

}

},

// #ifdef H5

mounted() {

if (!this.lazyLoad

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uni-app使用Echarts,可以使用ECharts插件,以下是使用ECharts插件的步骤: 1. 在uni-app的HBuilderX创建一个新项目并打开pages目录。 2. 在pages目录创建一个新页面,例如“echarts”。 3. 在“echarts”页面的目录,右键单击并选择“新建->插件页面”。 4. 在“插件页面”对话框,输入“echarts”并选择“ECharts”插件。 5. 安装插件并完成后,重新启动HBuilderX。 6. 在“echarts”页面的目录,打开“echarts.vue”文件。 7. 添加Echarts图表组件,例如: ``` <template> <view class="echarts"> <ec-canvas canvas-id="mychart" :canvas-type="canvasType" :disable-scroll="true" :opts="opts" @echarts_init="echartsInit"></ec-canvas> </view> </template> <script> import * as echarts from '@/uni_modules/echarts/js/echarts.js' export default { data() { return { canvasType: '2d', opts: { lazyLoad: true } } }, onReady() { // 初始化图表 this.initChart() }, methods: { initChart() { this.$nextTick(() => { this.ecComponent = this.$refs['mychart'].getEcComponent() this.ecComponent.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }) this.setOption(chart) return chart }) }) }, setOption(chart) { const option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } chart.setOption(option) }, echartsInit(ec) { echarts.registerMap('china', window.__uniapp__.chinaJson) this.ec = ec this.initChart() } } } </script> <style> .echarts { width: 100%; height: 100%; } </style> ``` 8. 保存并运行“echarts”页面,应该可以看到一个简单的Echarts图表。 这是一个简单的ECharts图表,在实际使用,可以根据需要自定义ECharts图表组件和图表选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值