echarts插件 ：https://ext.dcloud.net.cn/plugin?id=4899
<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef"></l-echart></view>
// 小程序 二选一
// 插件内的 二选一
const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
onMounted( ()=>{// 组件能被调用必须是组件的节点已经被渲染到页面上setTimeout(async()=>{if(!chartRef.value) returnconst myChart = await chartRef.value.init(echarts)myChart.setOption(option)},300)
})
柱状图x轴文本展示不全
let options = {xAxis: {type:"category",data: echartsData02XAxis.value,axisLabel: {show: true, // 是否显示刻度标签，默认显示interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。rotate: 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度inside: false, // 刻度标签是否朝内，默认朝外margin: 6, // 刻度标签与轴线之间的距离formatter: function (value) {// return value.split("").join("\n")var str = ""var paramsLen = value.lengthlet len = 2;var rowNumber = Math.ceil(paramsLen / len)for (let i = 0; i < rowNumber; i++) {var temp = value.substring(i*len,len+i*len);str += temp+"\n"console.log(value,str,"str",temp)}return str}, // 刻度标签的内容格式器},},}
雷达图
const option01 = {tooltip: {show: true,confine:true,// 雷达图不会超出diventerable:true, // 鼠标是否可以移动到tooltip内trigger:"item",// formatter: function(params){////// console.log(params,"params")// return params.name+":"+params.value//// // return `${option01.radar.indicator[params.dataIndex].name} : ${params.value[params.dataIndex]}`;// }},radar: {center:["50%","50%"],radius:"70%",shape: 'polygon', // 使用多边形indicator: indicatorList.value,splitArea: {show: true,areaStyle: {color: ['#f5f5f5', '#e5e5e5'] // 交替颜色}},splitLine: {show: true,lineStyle: {color: '#ccc'}}},series: [{type: 'radar',data: [{value: echartData01.value,name: '体质评分',label:{show:true},areaStyle: {color: 'rgba(255, 0, 0, 0.3)' // 填充区域的颜色},lineStyle: {color: 'red' // 边框线的颜色},itemStyle: {color: 'red' // 节点的颜色}}]}]};