timg.jpg
先看效果圖
image.png
下載 GitHub 上的 ecomfe/echarts-for-weixin 項(xiàng)目
1.首先在app.json中新建一個(gè)頁(yè)面("pages/echarts/echarts")
image.png
2.將下載好的echarts-for-weixin-master進(jìn)行解壓后找到ec-canvas該文件夾，將該文件夾粘貼到項(xiàng)目中
image.png
3.在echarts.json中進(jìn)行配置
{
"usingComponents": {
"ec-canvas":"../../ec-canvas/ec-canvas"
},
"navigationBarTitleText": "統(tǒng)計(jì)圖"
}
4.echarts.wxml
<view class="content-echarts">
<ec-canvas id="mychart-line" canvas-id="mychart-line" ec="{{ec}}"></ec-canvas>
</view>
5.echarts.js
// pages/echarts/echarts.js
import * as echarts from '../../ec-canvas/echarts'
function initChart(canvas,width,height){
const chart = echarts.init(canvas,null,{
width:width,
height:height
})
canvas.setChart(chart)
var option = {
color: ['#FFCC00'],
title: {
text: '本周銷量統(tǒng)計(jì)圖'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六",'周日']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 13, 20,38]
}]
};
chart.setOption(option)
return chart
}
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
ec:{onInit:initChart}
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
return {
title: '在微信中使用echarts',
path: 'pages/echarts/echarts',
success: function (res) { },
fail: function () { }
}
}
})
6.echarts.wxss
/* pages/echarts/echarts.wxss */
.content-echarts{
position: absolute;
top: 25%;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
ec-canvas{
width:100%;
height: 600rpx;
background: #fff;
}
