关于Echarts在小程序中的运用
首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。你也可以根据我的方法使用,大同小异自取链接: https://pan.baidu.com/s/1lqfc7hyiD0_gHxfrcQz_PA 提取码: hqhb如果根据我所说的,请按照以下步骤操作:第一步:copy网盘文件中的ec-canvas放入自己新建项目中,如下![介绍](https://img-blo
·
首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
你也可以根据我的方法使用,大同小异
自取链接: https://pan.baidu.com/s/1lqfc7hyiD0_gHxfrcQz_PA 提取码: hqhb
如果根据我所说的,请按照以下步骤操作:
第一步:copy网盘文件中的ec-canvas放入自己新建项目中,如下![介绍](https://img-blog.csdnimg.cn/20200718232010981.png)
在 app.json 的 pages 中增加 ‘pages/home/home’,或者手动添加,纯粹个人习惯
引入代码如下:
home.json如下:
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
“ec-canvas”: "…/…/ec-canvas/ec-canvas"此处的路径千万要写对,否则无法使用 组件
.wxml如下:
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
ec 是一个我们在 index.js 中定义的对象,它使得图表能够在页面加载后被初始化并设置。home.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 = {…};这里面的内容需要我们自己写,可以参考以下网址:
https://echarts.apache.org/examples/zh/index.html
以下是官网所未提及的,需注意
之后,我们需要在home.js中引用echarts,代码如下:
import * as echarts from '../../ec-canvas/echarts';
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不会影响实际宽度)
*/
}
home.wxss如下
ec-canvas{
width: 100%;
height: 50%;
}
希望可以帮到你们,今天就分享到这~~~~~~~~
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)