首先可以阅读以下ECharts的官方文档 ECharts官方文档
1.将ec-canvas文件夹放到新建的小程序根目录下
在此 链接github 下可以下载到小程序的实例项目,解压到本地可找到此文件。
2.在需要用到的文件夹下的json文件配置引用路径
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
3.在需要用到的文件夹下的js文件下引用echarts
import * as echarts from '../../ec-canvas/echarts';
4.写wxml代码
<view class="container">
<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
</view>
5.给ec-canvas组件添加样式
ec-canvas {
width: 100%;
height: 50%;
}
6.在app.wxss里添加公共的.container样式
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
7.按照文档中的说明,补全js文件,根据自己的需求去嫖取option。
如果觉得文章对你有用!欢迎关注️、评论、点赞