uniapp 微信小程序使用ec-canvas图表

微信小程序中使用到了ec-canvas图表,从DCloud插件市场中下载echarts-for-wx;

在uniapp项目中找到js-sdk文件夹,把其中的uni-ec-canvas放到要用的包的components中。

在文件中导入:

饼图:

<template>
    <view>
        <uni-ec-canvas
	          force-use-old-canvas="true" 
	          id="mychartDom" 
	          canvas-id="mychart-bar" 
	          :ec="ec" 
			  ref="canvas"
	          canvasHeight="170"
			  class="canvas_size"
	          ></uni-ec-canvas> 
    </view>
</template>

import uniEcCanvas from '../components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '../components/uni-ec-canvas/echarts.js'
let chartA = null;
export default {
	components: {
		uniEcCanvas
	},
    methods: {
		initChart(canvas, width, height, canvasDpr) {
			chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
			})
			canvas.setChart(chart)
			var data=[{value:this.abnormal, name:'正常',"itemStyle":{"normal":{"color":"#00CCB8"
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值