标签：微信 ec height width 初次 home border 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里复制即可。
标签：微信,ec,height,width,初次,home,border,echarts 来源： https://blog.csdn.net/fishineye/article/details/115267472
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。