小程序 词云图 echarts-for-weixin-wordcloud

GitHub - clydee-geng/echarts-for-weixin-wordcloud: echarts词云微信小程序版

这个是适配与小程序版的词云图,之前有找到ucharts来代替,但是ucharts的词云图功能有两个缺点:1.无法根据值的大小显示词云图的大小;2.显示的顺序是随机的

第一个还比较好解决,自己写一个方法就可以处理了,但是第二个就处理不了了,没法达到echarts自带的那种显示方法

echarts-for-weixin-wordcloud这个我在使用的过程中也发现了一个问题:就是数组中最后那个最小值的显示不出来,所以就只能自己做处理了,我的处理方法是这样的:

let minValue = 0;
    let addItem = {}
    if(arr.length>1){ 
      for(let i in arr){
        if(minValue==0){
          minValue = arr[i].value;
          addItem = arr[i];
        }else{
          if(minValue>arr[i].value){
            minValue = arr[i].value;
            addItem = arr[i];
          }
        }
      }
      if(JSON.stringify(addItem)!='{}'){
        arr.push(addItem);
      }
    }

这样处理就没啥问题了

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
"ECharts for Weixin" 是 ECharts 官方提供的适用于微信小程序的图表库。它是在原生的 ECharts 基础上进行了适配,方便在微信小程序中使用。 使用 "ECharts for Weixin" 绘制图表的步骤如下: 1. 在小程序项目的根目录下,创建一个名为 `ec-canvas` 的文件夹。 2. 在 `ec-canvas` 文件夹中,将从 ECharts 官网下载的 `echarts.js` 和 `echarts.min.js` 文件复制进来。 3. 在 `ec-canvas` 文件夹中,创建一个名为 `echarts.js` 的文件,内容如下: ```javascript import * as echarts from './echarts'; Component({ properties: { canvasId: { type: String, value: 'ec-canvas' }, ec: { type: Object } }, ready() { const { canvasId, ec } = this.properties; const ctx = wx.createCanvasContext(canvasId, this); if (!ctx) { console.error('无法获取到 Canvas 上下文,请检查 canvasId 是否正确'); return; } if (!ec || !ec.lazyLoad) { this.chart = echarts.init(ctx); this.init(); } }, methods: { init() { const { ec } = this.properties; const { onInit } = ec; if (typeof onInit === 'function') { onInit(this.chart, echarts); } } } }); ``` 4. 在需要使用饼图的页面中,引入 `ec-canvas` 组件,例如: ```html <view class="chart-container"> <ec-canvas id="pieChart" canvas-id="pieCanvas" ec="{{ ec }}"></ec-canvas> </view> ``` 5. 在页面的 js 文件中,引入 ECharts 和 `echarts.js` 文件,并配置饼图的数据和样式,例如: ```javascript import * as echarts from '../../ec-canvas/echarts'; import '../../ec-canvas/echarts.js'; // 引入刚刚创建的 echarts.js 文件 Page({ data: { ec: { lazyLoad: true // 延迟加载 } }, onLoad: function (options) { this.initPieChart(); }, initPieChart: function () { const that = this; const { windowWidth } = wx.getSystemInfoSync(); this.setData({ ec: { lazyLoad: true // 延迟加载 } }); setTimeout(function () { that.setData({ ec: { onInit: that.initChart } }); }, 0); }, initChart: function (canvas, width, height, dpr) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); canvas.setChart(chart); const option = { // 饼图的配置选项... }; chart.setOption(option); return chart; } }); ``` 通过以上步骤,就可以在微信小程序中使用 "ECharts for Weixin" 绘制饼图了。具体的图表配置和样式可以根据自己的需求进行修改。 希望对你有所帮助!如有更多问题,请继续提问。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值