小程序图形：echarts-weixin 入门使用

本文主要是介绍小程序图形：echarts-weixin 入门使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

去官网下载整个项目：

https://github.com/ecomfe/echarts-for-weixin

 

拷贝ec-canvs文件夹到小程序里面

index.js里面的写法

import * as echarts from "../../components/ec-canvas/echarts"
const app = getApp();
function initChart(canvas, width, height, dpr) {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr });canvas.setChart(chart);var option = {backgroundColor: "#ffffff",series: [{label: {normal: {fontSize: 14}},type: 'pie',center: ['50%', '50%'],radius: ['20%', '40%'],data: [{value: 55,name: '北京'}, {value: 20,name: '武汉'}, {value: 10,name: '杭州'}, {value: 20,name: '广州'}, {value: 38,name: '上海'}]}]};chart.setOption(option);return chart;
}Page({/*** 页面的初始数据*/data: {ec: {onInit: initChart}}
})

index.json里面的写法

{"usingComponents": {"ec-canvas":"../../components/ec-canvas/ec-canvas"}
}

页面的写法

<view class="chart"><ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas></view>

样式大小控制

.chart{width: 100%;height: 300px;
}
ec-canvas {width: 100%;height: 100%;}

效果图

这篇关于小程序图形：echarts-weixin 入门使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---