uniapp的微信小程序使用echarts构建图形--个人记录

这几天想在uniapp上用echarts来构建图形,但是找了好久才找到适合自己的方法,因此来记录一下.

第一:用Hbuilder来构建一个项目.

第二:下载好要使用的插件.

插件地址:https://github.com/yah0130/echarts-wx-uniapp

将其中的目录uni-ec-canvas全部复制在已经创建好的项目上,和pages同级的目录components下,没有则创建一个(不是必须,但不知道的小白最好按照我的来)

第三:在要使用echarts的页面上script标签内导入所需要的东西

以下是要使用的:

import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'

import * as echarts from '@/components/uni-ec-canvas/echarts'

第四:注册组件

我用的是vue2,如

   components:{

        uniEcCanvas

    },

第五:使用组件,设置组件样式

在<template>标签内使用它,最好不要变:

<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni- ec-canvas" :ec="ec"></uni-ec-canvas>

设置样式,其中三个最后加上,可以加样式,:

.uni-ec-canvas {

width: 100%;

height: 600rpx;

display: block;

}

第六:script设置

在导入的2行代码下写 let chart = null

在data中:

data(){

ec: {lazyLoad: true},

option:{}

}

option中的内容设置和echarts设置的一样

第七:在methods中设置

加入函数:

initChart(canvas, width, height, canvasDpr) {

chart = echarts.init(canvas, null, {

width: width,

height: height,

devicePixelRatio: canvasDpr

}),

canvas.setChart(chart);

chart.setOption(this.option);

return chart;

},

第八:在onload中设置

onLoad() {

this.$refs.canvas.init(this.initChart)

},

最后

如果option已经设置好,那么就会显示出自己想要的图形了,关于option得设置可以参考echarts官方文档去学习,官方文档地址:

https://echarts.apache.org/zh/index.html

如果有帮助,请帮忙在我的个人博客中点个赞哈,最近才做好的,有点简陋,以后有时间争取做一个好的博客,个人博客地址:

myblog