微信小程序如何引入echars组件
本次案例以引入温度仪表盘为例
废话不多说,直接上效果图
ehcats组件库可自行到echats官网下载,下载好之后放到你的项目包里面。
demo.json部分
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
//这里使用了相对路径
}
}
首先需要你在json文件里引入echarts组件
demo.wxml写法
<view class="my-echart">
<ec-canvas id="echarts_temp"></ec-canvas>
<!-- 在这引入echarts组件标签 -->
</view>
这里的ec-canvas绑定id就可以使用echarts组件
demo.wxss写法
.my-echart{
width: 100vw;
height: 50vh;
}
组件ec-canvas默认宽高100%,它的宽高大小取决于它的父元素view标签
demo.js写法
JS操作就是重点了
import * as echarts from '../../ec-canvas/echarts';
//这里使用了相对路径引入echarts组件库
Page({
data: {
temp: 37.5 //这里设置温度为37.5度
},
onLoad: function () {
//通过函数调用,解构的形式进行传参
initCharts({
type: 'temp',
value:this.data.temp,
color: ['#FFAB91', 'rgb(253,114,71)']
}