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 待看
相关推荐
掘金安东尼33 分钟前
Next.js 原生实现 PWA 离线能力
前端·javascript·next.js
全宝40 分钟前
🚀前端必学!告别样式冲突:Shadow DOM 终极指南
前端·javascript·html
GDAL42 分钟前
v-model 入门教程
前端·javascript·vue.js
fakaifa3 小时前
【最新版】CRMEB Pro版v3.4系统源码全开源+PC端+uniapp前端+搭建教程
人工智能·小程序·uni-app·php·crmeb·源码下载·crmebpro
安卓开发者6 小时前
Android中RxJava与LiveData的结合使用
android·echarts·rxjava
2501_9159184110 小时前
iOS 应用上架全流程实践,从开发内测到正式发布的多工具组合方案
android·ios·小程序·https·uni-app·iphone·webview
你的人类朋友11 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
柳杉12 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
刺客-Andy13 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js
zzywxc78715 小时前
详细探讨AI在金融、医疗、教育和制造业四大领域的具体落地案例,并通过代码、流程图、Prompt示例和图表等方式展示这些应用的实际效果。
开发语言·javascript·人工智能·深度学习·金融·prompt·流程图