当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 在小程序中使用ECharts快速上手

在小程序中使用ECharts快速上手

2020年07月17日  | 移动技术网IT编程  | 我要评论

首先可以阅读以下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样式

/**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。

如果觉得文章对你有用！欢迎关注❤️、评论

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网