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 待看
相关推荐
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
lonelyhiker7 小时前
javascript的原型链
开发语言·javascript·原型模式
MarkHD9 小时前
第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互
javascript·交互·harmonyos
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek
程序员黄同学10 小时前
请解释设备像素、CSS 像素、设备独立像素、DPR、PPI 之间的区别 ?
开发语言·javascript