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

首先能夠閱讀如下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。

若是以爲文章對你有用！歡迎關注❤️、評論📝、點贊👍