【echarts】15、echarts+vue2 -雷达图

最新推荐文章于 2024-03-12 17:02:52 发布

汪同学丶

最新推荐文章于 2024-03-12 17:02:52 发布

阅读量610

点赞数 1

分类专栏： ECHARTS相关操作文章标签： echarts+vue

本文链接：https://blog.csdn.net/weixin_44402694/article/details/126016403

版权

ECHARTS相关操作专栏收录该内容

24 篇文章 2 订阅

订阅专栏

前言

基于echarts5.x和vue2实现
记录以便日后查阅

实现效果

在这里插入图片描述

代码实现

<template>
  <div class="chart-wrap">
    <div id="chart12" class="chart" />
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      chart: null,
      data1: [60, 70, 50, 80, 66, 77],
      data2: [86, 83, 82, 91, 90, 87]
    }
  },
  mounted() {
    this.createChartHandler()
  },
  methods: {
    // 创建图表
    createChartHandler () {
      this.chart = this.$echarts.init(document.getElementById('chart12'))
      this.chart.setOption(this.getChartOption(this.data1, this.data2))
      window.addEventListener('resize', () => {
        setTimeout(() => {
          this.chart.resize()
        })
      })
    },
    // 获取图表配置项
    getChartOption (data1, data2) {
      return {
        normal: {
          top: 0,
          left: 0,
          width: 0,
          height: 0,
          zIndex: 6,
          backgroundColor: ''
        },
        legend: {
          show: false,
          data: [
            {
              name: '上月指数',
              icon: 'circle'
            },
            {
              name: '当月指数',
              icon: 'circle'
            }
          ],
          left: 'center',
          position: ['bottom', 'center']
        },
        color: ['rgba(245, 166, 35, 1)', 'rgba(19, 173, 255, 1)'],
        radar: {
          center: ['50%', '50%'],
          axisName: {
            // (圆外的标签)雷达图每个指示器名称的配置项。
            fontSize: 12,
            color: 'rgba(221,221,221,0.79)',
            formatter: function (value, indicator) {
              if (value !== '安防态势' && value !== '产业经济') {
                const charArr = value.split('')
                return charArr[0] + charArr[1] + '\n' + charArr[2] + charArr[3]
              }
              return value
            }
          },
          axisNameGap: 4,
          radius: ['0%', '70%'],
          splitNumber: 6,
          splitArea: {
            areaStyle: {
              color: ['transparent']
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(221,221,221,0.79)' //
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(221,221,221,0.79)' //
            }
          },
          indicator: [
            {
              text: '安防态势',
              max: 100
            },
            {
              text: '消防状态',
              max: 100
            },
            {
              text: '能耗监测',
              max: 100
            },
            {
              text: '产业经济',
              max: 100
            },
            {
              text: '设备运行',
              max: 100
            },
            {
              text: '环境监测',
              max: 100
            }
          ]
        },
        series: [
          {
            name: '上月指数',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 4,
            areaStyle: {
              color: '#06C88C'
            },
            itemStyle: {
              color: '#06C88C'
            },
            lineStyle: {
              type: 'dashed',
              color: '#06C88C',
              width: 2
            },
            data: [data1]
          },
          {
            name: '当月指数',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              color: '#63BCFF'
            },
            areaStyle: {
              color: '#63BCFF'
            },
            lineStyle: {
              color: '#63BCFF',
              width: 2,
              type: 'dashed'
            },
            data: [data2]
          }
        ]
      }
    }
  }
}
</script>