微信小程序使用echarts雷达图遇到的坑

最近一个医院的小程序需要使用雷达图来展示，简单总结一下。

1：使用场景：在详情页，根据测试的题目得分画成雷达图，测试的题目会得到2种结果，高危和低危。一种雷达图，但是样式不一样。如果是标题文字颜色不用改，那就初始化一个就行。因为这2个的文字，一个文字是白色，一个文字是黑色，而文字我并没有找到可以动态更改的方法，就只能初始化2个了，初始化2个是有一些问题的。我先说只初始化一个。

2：引入echarts，使用专用的小程序版本，点击去Git上下载。如果直接下载的话，echarts.js有700多k，小程序打包最多2M，所以直接去echarts官网，按需下载需要的文件。定制需要的文件（https://echarts.apache.org/zh/builder.html），定制好之后，我下载的雷达图只有470K了，少了300k。下载之后的文件是echarts.min.js，替换掉ec-canvas里面的echarts.js,注意，替换之后，把原文件的一些引入echarts的地方，改成引入echarts.min，不然会报错。

3.前期引入，可以参考其他博主文章。这里贴个链接（https://blog.csdn.net/qq_42650665/article/details/105713517）。这样子，静态数据展示没有问题了。

雷达图的一些配置，参考这篇文章（https://blog.csdn.net/csdn_zsdf/article/details/81366738）；也可以直接在官网上找对照的api。

4.基本样式完成之后，说说我遇到的坑：

A：明明静态展示一点问题没有，为什么一用动态数据，就开始报错“getOption 没有定义” 了呢？

答：首先注意2回事，页面上如果有 wx-if来判断是否展示隐藏，就会出这个问题，都是因为执行顺序的问题。我的页面因为有2种情况，高危和低危，所以我用得到的数据，进行判断，展示隐藏哪一个echarts。在js中打印顺序，发现int的echarts的方法最后执行，所以如果我们提前获取了数据就直接展示，会报错。所以，这个时候提前把控制弄出来，不用异步。做法是在列表页的时候，直接拿到这个高低危的参数放进query，链接上带过去详情页，在onload的时候，直接展示隐藏。需要数据的顺序要比int的方法执行的更后面一些的话，加一个定时器就行了。在onload的时候定时器执行方法。

 setTimeout(this.getReports,200)

5.最后贴上代码：

wxml:<view class="radar" hover-class="none" hover-stop-propagation="false"><ec-canvas ec="{{ ec1 }}" id="mychart-dom-graph" canvas-id="mychart-graph"></ec-canvas></view>js:
import * as echarts from "../../ec-canvas/echarts.min";
var chart = null;
function initChart(canvas, width, height, dpr) {chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr, // new});canvas.setChart(chart);var option = {xAxis: {show: false,},yAxis: {show: false,},radar: {name: {textStyle: {color: "#1b1b1c",padding: [0, 10],borderRadius: 10,},},// 设置雷达图中间射线的颜色axisLine: {lineStyle: {color: "#e0e1e3",},},indicator: [{name: "平和质",max: 20,},{name: "阳虚质",max: 20,},{name: "阴虚质",max: 20,},{name: "气虚质",max: 20,},{name: "痰湿质",max: 20,},{name: "湿热质",max: 20,},{name: "血瘀质",max: 20,},{name: "气郁质",max: 20,},{name: "特禀质",max: 20,},],},series: [{name: "",type: "radar",data: [{value: [],name: "",areaStyle: {color: "#4378e4",},},],itemStyle:{borderColor:"#e2e4e7",// borderWidth:0.5},lineStyle:{color:'#467be7'}},],};chart.setOption(option);return chart;
}
Page({data:{ec: {onInit: initChart,},},onLoad: function (options) {// console.log('onload');if (options) {this.setData({id: options.id,risk: options.highRisk == 1 ? "low" : "high", //判断是否高低危});}setTimeout(this.getReports,200) //获取详情数据},// 获取详情页信息getReports() {// console.log('getReports');let that = thisWXAPI.getlhReport(wx.getStorageSync("header"), this.data.id).then((res) => {if (res.consType) {var option = chart.getOption(); // 获取chart的方法option.series[0].data[0].value = Object.values(res.consType); // 获取需要展示的数组数据chart.setOption(option, true); //设置数据到雷达图let dataList = Object.values(res.consType)let max = Math.max(...dataList)let index1for (let index = 0; index < dataList.length; index++) {if(dataList[index] == max){index1 = indexbreak}}this.setData({reportsDetail:localData.riskAnswer[index1],getTools:res.getTools})}}).catch((err) => {Toast.fail('获取详情失败')});},})

综上，主要是这个问题。

微信小程序使用echarts雷达图遇到的坑相关推荐

uniapp 微信小程序端echarts扇形图
github地址:https://github.com/yah0130/echarts-wx-uniapp 插件地址:echarts-for-wx - DCloud 插件市场具体流程参考github ...
微信小程序使用Echarts绘制K线图与双曲线图以及实现tab切换
在微信小程序中使用Echarts需要下载相应的文件,可在这下载ec-canvas,该github里也有很多很好的例子,可自行调试学习. 本例子的目录结构: 微信小程序使用Echarts的步骤在需要引 ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...
微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...

微信小程序使用echarts雷达图遇到的坑

微信小程序使用echarts雷达图遇到的坑相关推荐

最新文章

热门文章