微信小程序实现位置变动图表

简介: 微信小程序实现位置变动图表

在做小程序的项目过程中,碰到了一个特别奇葩的需求,需要用图表的方式去展示用户的某项数据,数据量用百分比进行表示,最多可以达到100%,在图表显示数据的时候,每个百分比数数据的展示起始位置都不一样,所以我这里第一个想到是canvas,但是canvas实现比较麻烦,进而采用echast


引入


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


页面结构


把组件放到页面中,接收一个ec的配置项

  <view class="my_accuracy_left">
      <ec-canvas ec="{{ ec }}"></ec-canvas>
    </view>


样式


我们这里设置好样式,将承载ec-canvas组件的盒子设置好宽高后,再将组件宽和高设置为100%

.my_accuracy .my_accuracy_left {
  width: 242rpx;
  height: 242rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

我们这里导入ehcarts,声明一个全局对象echast1,默认值为null,在data对象中声明一个ec对象,这个是echarts图表对象的配置项,我们对里面的onInit方法进行编写,并将使用到的数据以入参的方式传递进去,将创建好的图表对象赋值给全局变量echast1,最后返回给组件的配置项,在声明一个angleCount方法对于起始位置进行计算,声明一个setEchastConfig方法,是对当前图表进行配置的,接受一个参数num,是我们当前数据的百分比,在setEchastConfig方法中使用angleCount方法得出当前的图表的起始位置,最后进行设置上,最后页面就会展示

import * as echarts from '../../ec-canvas/echarts';
// echast对象
var echast1 = null;
Page({
  data: {
   // echast配置
    ec: {
      onInit: function (canvas, width, height, dpr) {
        echast1 = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr 
        });
        canvas.setChart(echast1);
        return echast1;
      },
    },
  },
  /**
   * @function 对echast进行配置
   * @param num 百分比
   */
  setEchastConfig(num) {
    // 计算角度
    let deg = this.angleCount(num);
    var option = {
      title: [{
        text: `${num}%`,
        x: 'center',
        top: 'center',
        textStyle: {
          fontSize: '16',
          color: '#FF841A'
        },
      }],
      polar: {
        radius: ['42%', '52%'],
        center: ['50%', '50%'],
      },
      angleAxis: {
        max: 100,
        startAngle: deg,
        show: false,
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [{
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 90,
        showBackground: true,
        backgroundStyle: {
          color: '#FFDABA',
        },
        data: [num],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#FF841A',
            }, ]),
          },
        },
      }, ],
    };
    echast1.setOption(option);
  },
  /**
   * @function 计算当前echast的角度
   */
  angleCount(num) {
  //360度为一个圆,我们这里起始位置只会在右半圆,所以是180度,然后180按照100进行平分,在拿每份的平分数乘以当前的角度,减去90度是为了确定是在上半圆还是下半圆,最后将计算出来的角度返回出去即可
    let res = (180 / 100 * num) - 90;
    return res;
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  //这里对于图表的更新需要放到页面显示后,并且需要等到`echast1`有值后我们才可以进行设置,由于小程序没有数据侦听器,所以我们使用定时器的方式做一个延时的效果,等到`echast1`有值后调用对图表的配置
    setTimeout(() => {
      this.setEchastConfig(90)
    }, 300)
  },
})
目录
打赏
0
0
0
0
8
分享
相关文章
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
112 1
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
569 1
微信小程序使用echarts图表(ec-canvas)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
344 0
【社区每周】小程序商品能力两项接口变动(11月第三期)
【社区每周】小程序商品能力两项接口变动(11月第三期)
81 10
微信小程序统计图表插件wxcharts的使用汇总
微信小程序统计图表插件wxcharts的使用汇总
530 0
解决微信小程序echarts图表真机预览模糊
解决微信小程序echarts图表真机预览模糊
233 0
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
862 7
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
862 1
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
213 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等