首先能够阅读如下ECharts的官方文档 ECharts官方文档
1.将ec-canvas文件夹放到新建的小程序根目录下
在此 连接github 下能够下载到小程序的实例项目,解压到本地可找到此文件。
css
2.在须要用到的文件夹下的json文件配置引用路径html
"usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" }
3.在须要用到的文件夹下的js文件下引用echartsgit
import * as echarts from '../../ec-canvas/echarts';
4.写wxml代码github
<view class="container"> <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas> </view>
5.给ec-canvas组件添加样式apache
ec-canvas { width: 100%; height: 50%; }
6.在app.wxss里添加公共的.container样式json
/**app.wxss**/ .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; /* flex布局 */ /* 注意:设为Flex布局之后,子元素的float、clear和vertical-align属性将失效。 */ flex-direction: column; /*决定主轴的方向(即项目的排列方向) */ /* column:主轴为垂直方向,起点在上沿。*/ align-items: center; /*定义项目在交叉轴上如何对齐 */ /* center:交叉轴的中点对齐*/ justify-content: space-between; /* 定义了项目在主轴上的对齐方式 */ /* space-between:两端对齐,项目之间的间隔都相等 */ box-sizing: border-box; /* content-box:padding和border不被包含在定义的width和height以内 盒子的实际宽度=设置的width+padding+border border-box:padding和border被包含在定义的width和height以内。 盒子的实际宽度=设置的width(padding和border不会影响实际宽度) */ }
7.按照文档中的说明,补全js文件,根据本身的需求去嫖取option。canvas
若是以为文章对你有用!欢迎关注❤️、评论📝、点赞👍小程序