代码修改

suerprisePlus

2024-09-30 703703929e97b94ca1c1c5e35a578e5fe9d4cfea

 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);
    }