From 703703929e97b94ca1c1c5e35a578e5fe9d4cfea Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期一, 30 九月 2024 09:58:04 +0800
Subject: [PATCH] 代码修改
---
src/views/visualization/rightMenu.vue | 309 ++++++++++++++++++++++++++-------------------------
1 files changed, 158 insertions(+), 151 deletions(-)
diff --git a/src/views/visualization/rightMenu.vue b/src/views/visualization/rightMenu.vue
index c2fa490..bf00213 100644
--- a/src/views/visualization/rightMenu.vue
+++ b/src/views/visualization/rightMenu.vue
@@ -1,30 +1,30 @@
<template>
<div class="rightMnu">
<div class="menuBox">
- <div class="aside-title">{{ title.t1 }}</div>
+ <!-- <div class="aside-title">{{ title.t1 }}</div>
<div class="echartBox">
<div id="rightEchart1" class="chartBox"></div>
- </div>
+ </div> -->
+ <chart-list :childData="childData"></chart-list>
</div>
<div class="menuBox">
- <div class="aside-title">{{ title.t2 }}</div>
- <div class="echartBox">
- <div id="rightEchart2" class="chartBox"></div>
- </div>
+ <chart-list1 :childData="childData1"></chart-list1>
</div>
<div class="menuBox">
- <div class="aside-title">{{ title.t3 }}</div>
- <div class="echartBox">
- <div id="rightEchart3" class="chartBox"></div>
- </div>
+ <chart-list1 :childData="childData2"></chart-list1>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
-
+import chartList from './list/chartList.vue';
+import chartList1 from './list/chartList1.vue';
+import data from './data.js';
export default {
+ components:{
+ chartList,chartList1
+ },
props: {
rightChartData: {
type: Object,
@@ -36,8 +36,12 @@
title: {
t1: 'xxx',
t2: 'XXXX',
- t3: 'xxxxx'
- }
+ t3: 'xxxxx',
+
+ },
+ childData:null,
+ childData1:null,
+ childData2:null,
}
},
watch: {
@@ -63,155 +67,158 @@
this.initEchart3();
},
initEchart1() {
- var myChart = echarts.init(document.getElementById('rightEchart1'));
- var option = {
- xAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- axisLine: {
- lineStyle: {
- color: 'white' // 璁剧疆涓虹孩鑹�
- }
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: 'white' // 璁剧疆涓虹孩鑹�
- }
- }
- },
- series: [
- {
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line',
- smooth: true,
- lineStyle: {
- color: '#409EFF', // 鎶樼嚎棰滆壊
+ this.childData= data[0];
+ // var myChart = echarts.init(document.getElementById('rightEchart1'));
+ // var option = {
+ // xAxis: {
+ // type: 'category',
+ // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ // axisLine: {
+ // lineStyle: {
+ // color: 'white' // 璁剧疆涓虹孩鑹�
+ // }
+ // }
+ // },
+ // yAxis: {
+ // type: 'value',
+ // axisLine: {
+ // lineStyle: {
+ // color: 'white' // 璁剧疆涓虹孩鑹�
+ // }
+ // }
+ // },
+ // series: [
+ // {
+ // data: [820, 932, 901, 934, 1290, 1330, 1320],
+ // type: 'line',
+ // smooth: true,
+ // lineStyle: {
+ // color: '#409EFF', // 鎶樼嚎棰滆壊
- }
- }
- ]
- };
+ // }
+ // }
+ // ]
+ // };
- option && myChart.setOption(option);
+ // option && myChart.setOption(option);
},
initEchart2() {
- var myChart1 = echarts.init(document.getElementById('rightEchart2'));
- var option1 = {
- title: {
+ this.childData1=data[1];
+ // var myChart1 = echarts.init(document.getElementById('rightEchart2'));
+ // var option1 = {
+ // title: {
- subtext: 'Fake Data',
- left: 'center'
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- show: false
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: '50%',
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' }
- ],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- };
- option1 && myChart1.setOption(option1);
+ // subtext: 'Fake Data',
+ // left: 'center'
+ // },
+ // tooltip: {
+ // trigger: 'item'
+ // },
+ // legend: {
+ // orient: 'vertical',
+ // left: 'left',
+ // show: false
+ // },
+ // series: [
+ // {
+ // name: 'Access From',
+ // type: 'pie',
+ // radius: '50%',
+ // data: [
+ // { value: 1048, name: 'Search Engine' },
+ // { value: 735, name: 'Direct' },
+ // { value: 580, name: 'Email' },
+ // { value: 484, name: 'Union Ads' },
+ // { value: 300, name: 'Video Ads' }
+ // ],
+ // emphasis: {
+ // itemStyle: {
+ // shadowBlur: 10,
+ // shadowOffsetX: 0,
+ // shadowColor: 'rgba(0, 0, 0, 0.5)'
+ // }
+ // }
+ // }
+ // ]
+ // };
+ // option1 && myChart1.setOption(option1);
},
initEchart3() {
- var myChart2 = echarts.init(document.getElementById('rightEchart3'));
- // prettier-ignore
- let dataAxis = ['鐐�', '鍑�', '鏌�', '瀛�',];
- // prettier-ignore
- let data = [220, 182, 191, 234, 290];
- let yMax = 500;
- let dataShadow = [];
- for (let i = 0; i < data.length; i++) {
- dataShadow.push(yMax);
- }
- var option2 = {
- title: {
+ this.childData2=data[2];
+ // var myChart2 = echarts.init(document.getElementById('rightEchart3'));
+ // // prettier-ignore
+ // let dataAxis = ['鐐�', '鍑�', '鏌�', '瀛�',];
+ // // prettier-ignore
+ // let data = [220, 182, 191, 234, 290];
+ // let yMax = 500;
+ // let dataShadow = [];
+ // for (let i = 0; i < data.length; i++) {
+ // dataShadow.push(yMax);
+ // }
+ // var option2 = {
+ // title: {
- },
- xAxis: {
- data: dataAxis,
- axisTick: {
- show: false
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: 'white' // 璁剧疆涓虹孩鑹�
- }
- },
- z: 10
- },
- yAxis: {
- axisLine: {
- show: false,
- lineStyle: {
- color: 'white' // 璁剧疆涓虹孩鑹�
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#fff'
- },
+ // },
+ // xAxis: {
+ // data: dataAxis,
+ // axisTick: {
+ // show: false
+ // },
+ // axisLine: {
+ // show: false,
+ // lineStyle: {
+ // color: 'white' // 璁剧疆涓虹孩鑹�
+ // }
+ // },
+ // z: 10
+ // },
+ // yAxis: {
+ // axisLine: {
+ // show: false,
+ // lineStyle: {
+ // color: 'white' // 璁剧疆涓虹孩鑹�
+ // }
+ // },
+ // axisTick: {
+ // show: false
+ // },
+ // axisLabel: {
+ // color: '#fff'
+ // },
- },
- dataZoom: [
- {
- type: 'inside'
- }
- ],
- series: [
- {
- type: 'bar',
- showBackground: true,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#83bff6' },
- { offset: 0.5, color: '#188df0' },
- { offset: 1, color: '#188df0' }
- ])
- },
- emphasis: {
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#2378f7' },
- { offset: 0.7, color: '#2378f7' },
- { offset: 1, color: '#83bff6' }
- ])
- }
- },
- data: data
- }
- ]
- };
- option2 && myChart2.setOption(option2);
+ // },
+ // dataZoom: [
+ // {
+ // type: 'inside'
+ // }
+ // ],
+ // series: [
+ // {
+ // type: 'bar',
+ // showBackground: true,
+ // itemStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: '#83bff6' },
+ // { offset: 0.5, color: '#188df0' },
+ // { offset: 1, color: '#188df0' }
+ // ])
+ // },
+ // emphasis: {
+ // itemStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ // { offset: 0, color: '#2378f7' },
+ // { offset: 0.7, color: '#2378f7' },
+ // { offset: 1, color: '#83bff6' }
+ // ])
+ // }
+ // },
+ // data: data
+ // }
+ // ]
+ // };
+ // option2 && myChart2.setOption(option2);
}
--
Gitblit v1.9.3