微信小程序使用echarts

最新推荐文章于 2025-04-29 16:59:08 发布

小曲曲

最新推荐文章于 2025-04-29 16:59:08 发布

阅读量1.5k

点赞数 16

文章标签：微信小程序 echarts notepad++

本文链接：https://blog.youkuaiyun.com/weixin_43848576/article/details/139311403

版权

在这里插入图片描述

思路

五个tab公用一个柱状图组件
切换tab以及切换时间改变数据，传入子组件，子组件监听数据重新更新
点击柱状图显示具体数值
每个时间点有两个柱子（高压和低压），柱状图显示高压的最大值到最小值的范围
除了血压其余只有一条柱子
步数比较特殊，不是范围，而是一个具体的步数数值
根据tab设置不同的最小值
假如最大值==最小值，显示一个点
所有横坐标全部显示，不滚动

下载wx-echarts

堆叠柱状图子组件

bar.json

{
   
  "component": true,
  "usingComponents": {
   
    "ec-canvas": "../../../ec-canvas/ec-canvas"
  }
}

bar.wxml

<view class="w100 h100">
  <ec-canvas id="mychart-bar" canvas-id="mychart-bar" ec="{
   { ec }}"></ec-canvas>
</view>

bar.js

import * as echarts from '../../../ec-canvas/echarts';
Component({
   
  options: {
   
    addGlobalClass: true,
  },
  data: {
   
    ec: {
   
      lazyLoad: true // 懒加载
    },
    time: [],
    low1: [],
    high1: [],
    low2: [],
    high2: [],
    step: []
  },
  properties: {
   
    list: {
   
      type: Array,
      observer: function (newVal, oldVal) {
   
        if (newVal.length || oldVal.length) {
   
          console.log(newVal, oldVal, 88)
          let time = newVal.map(item => item.date)
          let low1 = newVal.map(item => item.firstLowIndicators * 1)
          let high1 = newVal.map(item => item.firstHighIndicators && item.firstHighIndicators == item.firstLowIndicators ? 'solo' : item.firstHighIndicators * 1 - item.firstLowIndicators * 1)
          // let high1 = newVal.map(item => (item.firstHighIndicators * 1 - item.firstLowIndicators * 1 == 0) ? 1 : item.firstHighIndicators * 1 - item.firstLowIndicators * 1)
          let low2 = newVal.map(item => item.secondLowIndicators * 1)
          let high2 = newVal.map(item => item.secondHighIndicators && item.secondHighIndicators == item.secondLowIndicators ? 'solo' : item.secondHighIndicators * 1 - item.secondLowIndicators * 1)
          // let high2 = newVal.map(item => (item.secondHighIndicators * 1 - item.secondLowIndicators * 1 == 0) ? 1 : item.secondHighIndicators * 1 - item.secondLowIndicators * 1)
          let step = newVal.map(item => item.firstHighIndicators)
          this.setData({
   
            time,
            low1,
            high1,
            low2,
            high2,
            step
          })
          this.initChart(); // 数据变化时重新初始化图表
        }
      }
    },
    tab: {
   
      type: Number,
      value: 1
    }
  },
  methods: {
   
    initChart() {
   
      // 绑定组件
      this.barComponent = this.selectComponent("#mychart-bar");
      // 初始化柱状图
      this.barComponent.init((canvas, width, height, dpr) => {
   
        // 初始化图表
        const chart = echarts.init(canvas, null, {
   
          width: width,
          height: height,
          devicePixelRatio: dpr // 解决模糊显示问题
        })
        // 开发中根据从后端获取barData数据,动态更新图表
        chart.setOption(this.getOption())
        return chart
      })
    },
    getOption() {
   
      var option = {
   
        tooltip: {
   
          trigger: "axis",
          axisPointer: {
   
            type: "shadow",
          },
          formatter: (params) => {
   
            // console.log(params)
            if (this.data.tab == 5) {
   
              return (
                params[0].axisValue +
                "\n" +
                params[0].marker +
                params[1].seriesName +
                "：" +
                (params[0].value || 0)
              )
            } else if (this.data.tab == 1) {
   
              return (
                params[0].axisValue +
                "\n" +
                params[1].marker +
                params[0].seriesName +
                "：" +
                params[0].value +
                "~" +
                (params[0].value + ((params[1].value + '').slice(-6) == '521125' ? 0 : params[1].value)) +
                "\n" +
                params