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

   日期:2020-07-17     浏览:97    评论:0    
核心提示:首先可以阅读以下ECharts的官方文档 ECharts官方文档1.将ec-canvas文件夹放到新建的小程序根目录下在此 链接github 下可以下载到小程序的实例项目,解压到本地可找到此文件。2.在需要用到的文件夹下的json文件配置引用路径usingComponents: { ec-canvas: ../../ec-canvas/ec-canvas }3.在需要用到的文件夹下的js文件下引用echartsimport * as echarts from ../.

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

如果觉得文章对你有用!欢迎关注️、评论、点赞

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服