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 待看
相关推荐
建群新人小猿38 分钟前
会员等级经验问题
android·开发语言·前端·javascript·php
djk88881 小时前
Layui Table 行号
前端·javascript·layui
痴憨道人1 小时前
openharmony sdk描述
javascript
loey_ln1 小时前
FIber + webWorker
javascript·react.js
lv程序媛2 小时前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
ZwaterZ2 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
蒟蒻的贤2 小时前
vue学习11.21
javascript·vue.js·学习
初遇你时动了情3 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
zongzi_4944 小时前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
麻辣_水煮鱼4 小时前
vue数据变化但页面不变
前端·javascript·vue.js