微信小程序初次创建echarts并简单使用的详细过程

微信小程序初次创建echarts并简单使用的详细过程

首先新建微信小程序

然后创建好新的页面

将ec-canvs文件放在小程序文件的根目录

然后打开微信开发者工具，在home.json中引用组件

在home.wxml中加入wxml固定代码

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

然后在home.js中加入js固定代码

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
	data: {
    	ec: {
      	onInit: initChart
    	}
  	},
  })

其中
var option = {
…
};

里面…填的是关于图表的信息 是根据图标变化而变化的。还有很多实例需要新加各种代码。
但做到此步骤时，官方文档已经没有再说如何进行了，接下来就是对官方文档的补充，没有以下步骤，echarts不能成功运行。
此时要在home.js页面最上方引入echarts.js

import * as echarts from '../../ec-canvas/echarts' 

在home.wxss里也要添加样式 不然也出不来。

ec-canvas {
  width: 90%;
  height: 50%;
  background: #eee;
}

还要在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不会影响实际宽度）
  */
}

现在就成功的搭建好echarts的框架了，引用官网实例试一下。

点开一个实例，把里面的代码往js里复制即可。