单独分离echarts的配置

最新推荐文章于 2023-07-26 17:55:22 发布

WorkAndDebugger

最新推荐文章于 2023-07-26 17:55:22 发布

阅读量266

点赞数

分类专栏： vue2 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/Xiang_Gong_Ya_/article/details/128563738

版权

vue2 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue应用中创建一个可复用的Echarts子组件，通过接收配置项(props)来绘制雷达图。组件将配置项、宽高和ID作为输入，简化了后期维护。示例代码中包括了一个雷达图的配置，用于展示火灾相关指标。

摘要由CSDN通过智能技术生成

有些时候，我们需要使用通用的echarts组件框架，那么，就可以把配置项单独分离出来，便于后期维护

通用echarts子组件

<template>
  <div class="echarts" :style="`width:${width}px;height:${height}px`">
    <div :id="id" :style="`width:${width}px;height:${height}px`"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      id: {
        type: String,
        default: ''
      },
      width: {
        type: [String, Number],
        default: 300
      },
      height: {
        type: [String, Number],
        default: 300
      },
      options: {
        type: Object,
        default: () => {}
      }
    },
</script>

#父组件

import Echarts from '@/components/Echarts/echarts.vue'
export default {
    components: {
        Echarts,
        Bgmodel,
        GDmap,
    },
    data() {
        return {
         ld: {
                title: [
                    {
                        text: 92.8,
                        left: '45%',
                        top: '40%',
                        // subtext: '限电轮次：' + "IV",
                        textAlign: 'center',
                        textStyle: {
                            fontSize: '45',
                            fontWeight: '400',
                            color: '#fff',
                            textAlign: 'center',
                        },
                    },
                    {
                        text: '%',
                        left: '65%',
                        top: '44.5%',
                        textAlign: 'center',
                        textStyle: {
                            fontSize: '24',
                            fontWeight: '400',
                            color: '#fff',
                            textAlign: 'center',
                        },
                    },

                ],
                tooltip: {
                    show: true,
                },
                radar: {
                    indicator: [
                        { name: '火灾', max: 100 },
                        { name: '气体', max: 100 },
                        { name: '电气火灾', max: 100 },
                        { name: '消防水', max: 100 },
                    ],
                    // 雷达内部背景色
                    splitArea: {
                        show: false,
                        areaStyle: {
                            color: 'rgba(255,0,0,0)', // 图表背景的颜色
                        },
                    },
                    axisLabel: { show: true, textStyle: { fontSize: 12, color: '#fff' } }
                },
                series: [
                    {
                        type: 'radar',
                        data: [
                            {
                                value: [100, 80, 60, 40],
                                // 内部区域
                                areaStyle: {
                                    color: '#08778F'
                                },
                                // 边
                                lineStyle: {
                                    color: '#56F4FE'
                                }
                            }
                        ]
                    }
                ]
            },}
        }
}