|
@@ -0,0 +1,95 @@
|
|
|
+智能箱 AI生成的内容如下:
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div ref="chart" style="width: 100%; height: 600px; margin: 20px"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+import resize from "./mixins/resize";
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [resize],
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChart();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.chart) {
|
|
|
+ this.chart.dispose();
|
|
|
+ this.chart = null;
|
|
|
+ }
|
|
|
+ clearInterval(this.timeOut);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initChart() {
|
|
|
+ this.chart = echarts.init(this.$refs.chart);
|
|
|
+ const data = [
|
|
|
+ { bluetooth: 12, name: "高新体育中心", wifi: 2 },
|
|
|
+ { bluetooth: 23, name: "高新体育中心", wifi: 23 },
|
|
|
+ { bluetooth: 0, name: "高新体育中心", wifi: 23 },
|
|
|
+ { bluetooth: 4, name: "高新体育中心", wifi: 0 }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const xAxisData = data.map(item => item.name);
|
|
|
+ const bluetoothData = data.map(item => item.bluetooth);
|
|
|
+ const wifiData = data.map(item => item.wifi);
|
|
|
+
|
|
|
+ this.option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['bluetooth', 'wifi']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '10%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: xAxisData
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'bluetooth',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: [0, 10, 10, 0]
|
|
|
+ },
|
|
|
+ data: bluetoothData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'wifi',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: [0, 10, 10, 0]
|
|
|
+ },
|
|
|
+ data: wifiData
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.chart.setOption(this.option);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|