uniapp使用echarts

echarts插件 :https://ext.dcloud.net.cn/plugin?id=4899

xml 复制代码
<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef"></l-echart></view>
js 复制代码
// 小程序 二选一 
// 插件内的 二选一 
const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
js 复制代码
onMounted( ()=>{
    // 组件能被调用必须是组件的节点已经被渲染到页面上
    setTimeout(async()=>{
        if(!chartRef.value) return
        const myChart = await chartRef.value.init(echarts)
        myChart.setOption(option)
    },300)
})
柱状图x轴文本展示不全
js 复制代码
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.length

          let 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
        }, // 刻度标签的内容格式器
      },

    },
 }
雷达图
js 复制代码
  const option01 = {
    tooltip: {
      show: true,
      confine:true,// 雷达图不会超出div
      enterable: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' // 节点的颜色
            }
          }
        ]
      }
    ]
  };
qiun-data-charts 待看
相关推荐
I'm Jie6 小时前
深入了解 Vue 3 组件间通信机制
前端·javascript·vue.js
用户90443816324607 小时前
90%前端都踩过的JS内存黑洞:从《你不知道的JavaScript》解锁底层逻辑与避坑指南
前端·javascript·面试
PPPPickup8 小时前
easychat项目复盘---获取联系人列表,联系人详细,删除拉黑联系人
java·前端·javascript
老前端的功夫8 小时前
前端高可靠架构:医疗级Web应用的实时通信设计与实践
前端·javascript·vue.js·ubuntu·架构·前端框架
脾气有点小暴9 小时前
前端页面跳转的核心区别与实战指南
开发语言·前端·javascript
San30.10 小时前
深入 JavaScript 内存机制:从栈与堆到闭包的底层原理
开发语言·javascript·udp
Fantastic_sj10 小时前
Vue3相比Vue2的改进之处
前端·javascript·vue.js
ttod_qzstudio12 小时前
深入理解 TypeScript 数组的 find 与 filter 方法:精准查找的艺术
javascript·typescript·filter·find
冬男zdn12 小时前
优雅处理数组的几个实用方法
前端·javascript
克喵的水银蛇13 小时前
Flutter 通用标签选择组件:TagSelector 支持单选 / 多选
javascript·windows·flutter