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 待看
相关推荐
遂心_13 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ13 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
程序员鱼皮14 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort14 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手14 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码14 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码14 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高00714 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴14 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong14 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript