vue+echarts实现雷达图及刻度标注

文章目录


前言

最近项目有做数据可视化 大屏 不免再次使用些echarts应用 记录下其中echarts雷达图的实现


代码实现

先上代码

javascript 复制代码
<template>
  <div class="container">
    <div ref="chart" style="width: 500px; height: 500px; margin-top: 20px"></div>
  </div>
</template>

<script>
export default {
  name: 'testDemo',
  data() {
    return {};
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.chart);
      const option = {
        color: ['#FFC481', '#8EC6F8', '#56D8CD'],
        title: {
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 12,
            rich: {
              a: {
                color: '#0066FF',
                fontSize: 18,
                align: 'center',
              },
              b: {
                color: '#00BBFF',
                fontSize: 12,
                height: 16,
                align: 'centerc',
              },
              c: {
                color: 'orange',
                fontSize: 12,
                height: 16,
                align: 'center',
              },
            },
          },
        },
        // 配置图例
        legend: {
        },
        radar: {
          indicator: [
            {name: '资本背景', max: 100, min: 0, index: 0, axisLabel: {show: true}}, //显示刻度
            {name: '知识产权', max: 100, min: 0, index: 1},
            {name: '成长性', max: 100, min: 0, index: 2},
            {name: '风险状况', max: 100, min: 0, index: 3},
            {name: '经营质量', max: 100, min: 0, index: 4},
            {name: '企业规模', max: 100, min: 0, index: 5},
          ],
          radius: 80, //大小
          startAngle: 120, // 雷达图的旋转偏移量
          splitNumber: 5, // 分层5层,当前最大1000,可理解为每层200
          triggerEvent: true,
          name: {
            formatter: (value, indicator) => {
              // 获取对应的数值
              const valueAtIndex = this.radarData[indicator.index];
              return `{a|${value}}: {b|${valueAtIndex}}`; // 显示名称和对应的数值
            },
            rich: {
              a: {
                color: '#333',
                fontSize: 12,
              },
              b: {
                color: '#333',
                fontSize: 12,
              },
            },
          },
        },
        textStyle: {
          color: '#333333',
        },
        series: [
          {
            type: 'radar',
            areaStyle: {
              normal: {
                //添加阴影效果的配置部分
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(255, 196, 129, 0.8)'},
                  {offset: 1, color: 'rgba(255, 196, 129, 0.3)'},
                ]),
                opacity: 0.8,
              },
            },
            data: [
              {
                value: [34,23,34,87,68,67],
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
    }
  },
  mounted() {
    // 等dom渲染后再初始化图表
    this.initChart()
  }
};
</script>

<style scoped>
</style>

实现效果


总结

initChart方法中,使用this.$echarts.init来初始化一个ECharts实例,并设置图表的配置项option。这些配置项定义了图表的标题、提示框、雷达图的指标、名称的富文本样式、全局文本样式以及系列列表等。最后,通过this.chart.setOption(option)将配置项应用到图表实例上

相关推荐
90后的晨仔8 分钟前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
重生之我要当java大帝19 分钟前
java微服务-尚医通-数据字典-5
vue.js·微服务·云原生·架构
Shi_haoliu1 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥1 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计
知识分享小能手7 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
MC丶科9 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
90后的晨仔11 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
90后的晨仔11 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔11 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀11 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js