categories:Y轴,
data:X轴,value第一个参数对应categories里的索引值,一一映射
效果图:
代码:
<template>
<div class="custom">
<div class="status-view">
<div class="item">
<SvgIcon icon="icon_1"></SvgIcon>
<div class="name">无线电设备:{
{ radiosNumber }}</div>
</div>
<div class="item">
<SvgIcon icon="icon_2"></SvgIcon>
<div class="name">用频设备:{
{ frequencyNumber }}</div>
</div>
</div>
<div ref="custom" class="chart-view"></div>
<div ref="customMain" class="main-view"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { getStatistics, getFrequencyList } from "@api/home/index";
export default {
name: "Custom",
props: {
venueName: {
type: String,
default: "",
},
},
data() {
return {
frequencyNumber: 0,
radiosNumber: 0,
};
},
watch: {
venueName() {
this.init();
},
},
mounted() {
this.init();
},
methods: {
async init() {
const { data: list } = await getFrequencyList();
const { data } = await getStatistics(this.venueName);
this.radiosNumber = data.radiosNumber;
this.frequencyNumber = data.frequencyNumber;
const template = list.map(x => {
return {
name: x.nameFrequency,