有些时候,我们需要使用通用的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'
}
}
]
}
]
},}
}
}