微信小程序wxss中--自定义属性和var用法

在微信小程序开发中,每个小程序一般都有一个主题色,为了方便开发,我们可以在app.wxss中初始化一下,或者在app.wxss中引用一下公共的样式文件,将主题色声明一下。(前面的–是不能省略的)

page{
  --bg:#04bcc8
}

在需要调用的地方

.tag{
background-color: var(--bg);
}

在这里插入图片描述

### 如何在微信小程序中引入配置 `ec-canvas` 实现 ECharts 图表显示 #### 准备工作 为了能够在微信小程序中使用ECharts图表,需要先安装并准备必要的组件。可以从DCloud插件市场下载`echarts-for-wx`[^1] 或者通过GitHub获取`ec-canvas`文件[^2]。 #### 创建项目结构 创建一个新的页面用于放置图表,在该页面下新建一个wxml文件来定义UI布局,并确保其中包含了`<ec-canvas>`标签作为容器。 ```html <!-- pages/chart/chart.wxml --> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"></ec-canvas> </view> ``` #### 配置JSON文件 编辑对应页面的json配置文件以加载所需的自定义组件: ```json { "usingComponents": { "ec-canvas": "../../components/ec-canvas/ec-canvas" } } ``` #### 初始化ECharts实例 接着是在js逻辑层初始化ECharts实例以及设置初始数据与样式。这通常会在Page对象内的生命周期函数里完成,比如onLoad()方法内。 ```javascript // pages/chart/chart.js const app = getApp(); import * as echarts from &#39;../../utils/echarts.min&#39;; Page({ onReady: function () { this.ec.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); var option = { title : { text: &#39;某站点用户访问来源&#39;, subtext: &#39;纯属虚构&#39; }, tooltip : { trigger: &#39;axis&#39; }, legend: { data:[&#39;邮件营销&#39;,&#39;联盟广告&#39;] }, xAxis : [ { type : &#39;category&#39;, data : ["周一","周二","周三","周四","周五","周六","周日"] } ], yAxis : [ { type : &#39;value&#39; } ], series : [ { name:&#39;邮件营销&#39;, type:&#39;bar&#39;, data:[120, 132, 101, 134, 90, 230, 210] }, { name:&#39;联盟广告&#39;, type:&#39;bar&#39;, data:[220, 182, 191, 234, 290, 330, 310] } ] }; chart.setOption(option); return chart; }); }, ec: {} }) ``` 上述代码展示了如何在一个简单的柱状图例子中应用ECharts到微信小程序中的具体过程。 #### 添加CSS样式调整 最后可以为图表添加一些基本的css样式使其更美观,例如设定宽度高度等属性。 ```css /* pages/chart/chart.wxss */ .container { display: flex; justify-content: center; } #mychart-dom-bar { width: 750rpx; /* 设置合适的宽高比例 */ height: 400rpx; } ``` 这样就完成了整个流程,现在应该可以在微信开发者工具预览效果了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值