uniapp 中如何使用echart_uniapp 中Echarts的使用(微信小程序)

1、注意事项

1) 下载包 npm install echarts mpvue-echarts --save 下载成功后在node_modules里面会多出 echarts、mpvue-echats 、zrender 三个目录

2) 将mpvue-echats目录下的src目录放进components文件夹中

3) 由于小程序包大小限制，可以定制化echcarts( https://echarts.apache.org/zh/builder.html )并根据自身框架引入

2、组件(由于小程序canvas层级过高导致的各种bug，我这里是做做了转base64处理)

@touchmove="touchMove" @touchend="touchEnd" @error="error">

import WxCanvas from './wx-canvas';

import * as echarts from '@/static/libs/echarts/echarts.min'; /*chart.min.js为在线定制*/

export default {

props: {

// echarts: {

// required: true,

// type: Object,

// default() {

// return echarts;

// }

// },

canvasId: {

type: String,

default: 'ec-canvas'

},

lazyLoad: {

type: Boolean,

default: false

},

disableTouch: {

type: Boolean,

default: true

},

throttleTouch: {

type: Boolean,

default: true

}

},

data(){

return {

imgBase64: ''

}

},

onReady() {

if (!echarts) {

console.warn('组件需绑定 echarts 变量，例：

'canvas-id="mychart-bar" :echarts="echarts">

');

return;

}

if (!this.lazyLoad) this.init();

},

methods: {

init() {

let self = this;

const version = wx.version.version.split('.').map(n => parseIn