一、下载ec-canvas插件
下载ec-canvas插件,官网地址:https://github.com/ecomfe/echarts-for-weixin
,下载完成后将ec-canvas目录拷贝到自己项目下。
二、在page下新建一个echarts目录,并在echarts.json中引入。
{
"usingComponents": {
// 注意路径
"ec-canvas": "../../components/ec-canvas/ec-canvas"
}
}
三、echarts.wxml
<view class="container">
<view class="chart">
<ec-canvas id="chartPie" canvas-id="chartPie" ec="{{ ecChartPie }}"></ec-canvas>
</view>
</view>
四、echarts.js
// pages/echarts/exharts.js
import * as echarts from '../../components/ec-canvas/echarts'
var chartPie = null
Page({
/**
* 页面的初始数据
*/
data: {
ecChartPie: {
onInit: function (canvas, width, height, dpr) {
chartPie = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chartPie)
return chartPie
}
},
},
onReady: function () {
let that = this
that.getData()
},
getData() {
let that = this
// 请求数据
api.getOrderDetail(orderId).then(res => {
if (res.code == 200) {
// 第一个图表
that.initChartPie(res.chartData)
}
})
},
initChartPie(chartData) {
// 根据项目需要配置
chartPie.setOption({
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: chartData
}
]
})
}
})