小程序 词云图 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);
      }
    }

这样处理就没啥问题了

### 在 UniApp 中使用 ECharts-for-Weixin 实现微信小程序图表功能 要在 UniApp 中实现基于 `echarts-for-weixin` 的图表功能,可以通过以下方式完成: #### 1. 安装依赖 首先需要下载并安装 `echarts-for-weixin` 插件。此插件提供了适配微信小程序环境的 ECharts 功能[^1]。 通过 npm 或手动下载的方式获取插件文件: ```bash npm install echarts-for-weixin ``` 或者直接从官方仓库下载最新版本的压缩包,并将其解压至项目目录下的合适位置(如 `/components/mpvue-echarts/`)。 --- #### 2. 配置组件 将下载好的 `echarts-for-weixin` 文件夹放入项目的静态资源目录中。接着,在目标页面中引入必要的模块和组件[^2]。 以下是具体的配置代码示例: ##### 页面脚本部分 在 `.vue` 文件中的 `<script>` 块里导入所需模块: ```javascript import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'; import * as wxCharts from '@/components/ec-canvas/echarts'; export default { components: { mpvueEcharts }, data() { return { chartData: null, options: { title: { text: '示例图表', }, tooltip: {}, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] } }; }, methods: { initChart(canvas, width, height) { const chart = new this.$echarts.init(canvas); canvas.setChart(chart); chart.setOption(this.options); return chart; } } }; ``` 上述代码实现了对 `mpvueEcharts` 组件的初始化以及数据绑定操作。 --- ##### 页面模板部分 定义好 HTML 结构以便渲染图表内容: ```html <template> <view class="container"> <!-- 图表容器 --> <mpvue-echarts id="chart" canvasId="myCanvas" ref="echartRef" :onInit="initChart" /> </view> </template> <style scoped> .container { display: flex; justify-content: center; } </style> ``` 此处的关键在于设置 `canvasId` 和调用 `onInit` 方法来动态加载图表实例。 --- #### 3. 运行效果验证 当以上步骤完成后,运行项目即可查看生成的效果图。注意确保开发工具支持微信小程序模式,并且网络请求正常以加载外部 JS 库。 --- ### 注意事项 - 如果仅针对微信小程序场景,则可以直接采用本文介绍的方法;但如果涉及跨平台需求(如支付宝小程序),建议考虑更通用的解决方案——例如 uCharts。 - 对于复杂交互逻辑可能还需要额外处理事件监听等问题。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值