vue + ECharts 雷达图显示数值

最新推荐文章于 2025-01-09 13:12:39 发布

最懒的菜鸟

最新推荐文章于 2025-01-09 13:12:39 发布

阅读量799

点赞数

CC 4.0 BY-SA版权

文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43453621/article/details/129931460

该代码段展示了在vue-element-admin后台模板框架中如何初始化并设置一个雷达图。数据包括羊毛党、活跃用户和沉睡用户的数值，图表配置包括提示框、雷达图样式、指标最大值等，并设置了动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我用的是vue-element-admin 后台模板框架

其实也是差不多的

<script>
const animationDuration = 3000

export default {
    data() {
        return {
          chart: null,
          sign_in_ceremony_max: 10000,
          blessing_bag_max: 20000,
          ranking_max: 20000,
          wait_pay_order: 20000,
          pay_order: 20000,
          Wool: [5000, 7000, 12000, 11000, 15000],
          brisk: [4000, 9000, 15000, 15000, 13000],
          sleep: [5500, 11000, 12000, 15000, 12000]
        }
    },
    mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
    mounted() {
        this.$nextTick(() => {
          this.initChart()
        })
    },
    methods: {
        this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        radar: {
          radius: '66%',
          center: ['50%', '48%'],
          splitNumber: 8,
          splitArea: {
            areaStyle: {
              color: 'rgba(127,95,132,.3)',
              opacity: 1,
              shadowBlur: 45,
              shadowColor: 'rgba(0,0,0,.5)',
              shadowOffsetX: 0,
              shadowOffsetY: 15
            }
          },
          indicator: [
            { name: '签到礼', max: this.sign_in_ceremony_max },
            { name: '福袋', max: this.blessing_bag_max },
            { name: '冲榜礼', max: this.ranking_max },
            { name: '未支付订单', max: this.wait_pay_order },
            { name: '已支付订单', max: this.pay_order }
          ]
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: ['羊毛党', '活跃用户', '沉睡用户']
        },
        series: [{
          type: 'radar',
          label: {
            show: true, // 显示数值
            color: '#ffffff' //数值的颜色
          },
          symbolSize: 6,
          areaStyle: {
            normal: {
              shadowBlur: 13,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1
            }
          },
          data: [
            {
              value: this.Wool,
              name: '羊毛党'
            },
            {
              value: this.brisk,
              name: '活跃用户'
            },
            {
              value: this.sleep,
              name: '沉睡用户'
            }
          ],
          animationDuration: animationDuration
        }]
      })
    }
}

</script>