timg.jpg
先看效果图
image.png
下载 GitHub 上的 ecomfe/echarts-for-weixin 项目
1.首先在app.json中新建一个页面("pages/echarts/echarts")
image.png
2.将下载好的echarts-for-weixin-master进行解压后找到ec-canvas该文件夹，将该文件夹粘贴到项目中
image.png
3.在echarts.json中进行配置
{
"usingComponents": {
"ec-canvas":"../../ec-canvas/ec-canvas"
},
"navigationBarTitleText": "统计图"
}
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: '本周销量统计图'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六",'周日']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 13, 20,38]
}]
};
chart.setOption(option)
return chart
}
Page({
/**
* 页面的初始数据
*/
data: {
ec:{onInit:initChart}
},
/**
* 用户点击右上角分享
*/
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;
}
