微信小程序Echarts图动态渲染

Archer_Yuhh

已于 2022-10-24 16:04:53 修改

阅读量1.4k

点赞数 2

文章标签： echarts 微信小程序前端 1024程序员节

于 2022-10-10 16:13:14 首次发布

本文链接：https://blog.csdn.net/weixin_48419726/article/details/127246671

版权

本文介绍了如何在微信小程序中使用Echarts库来动态渲染压力监测图表，包括日压力监测（kPa）的折线图。通过wxml、json、wxss和js文件的配置，实现了图表的展示和数据的获取。在js文件中，定义了初始化图表的函数，并调用接口获取数据，将数据渲染到Echarts图表上。

摘要由CSDN通过智能技术生成

1.wxml文件

<view class="message-box1">
        <view class="message-box-tit">
            <image src="/images/yl.png" class="container-icon"></image>
            <text class="item-cont">日压力监测（kPa）</text>
        </view>
        <view class="echarts-box">
            <ec-canvas id="mychart-dom-bar1" canvas-id="mychart-bar1" ec="{ { ec1 }}" force-use-old-canvas="true"></ec-canvas>
        </view>
    </view>

2.json文件

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "看板",
  "navigationBarTextStyle": "white"

}

3.wxss文件
.message-box1 {
  margin: 35rpx auto;
  width: 90%;
  height: 309rpx;
  box-shadow: 0 0 10rpx #dedede;
  border-radius: 20rpx;
}
.message-box-tit {
  font-weight: 500;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #20B2AA;
  padding-left: 20rpx;
  box-shadow: 0 0 10rpx 0 #dedede;
  border-radius: 20rpx  20rpx 0 0;
}
.item-cont {