feat

pyt

2025-03-24 c0444705e749bfe400c3cc5726c2ec93696a5072

feat

 src/components/datascreen/LeftPanel.vue

@@ -53,28 +53,9 @@
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: 'LeftPanel',
  components: {
    VChart
  },
  data() {
    return {
@@ -93,6 +74,7 @@
      finalPercentages: [
        50, 85, 80, 75, 70, 65, 60, 55
      ],
      
      lineOption: {
        tooltip: {
          trigger: 'axis',
@@ -103,17 +85,18 @@
        legend: {
          data: ['安置面积异常', '补偿金额异常'],
          textStyle: {
            color: '#C0CFDC',
            color: 'rgba(255, 255, 255, 0.6)',
            fontSize: 12
          },
          color: ['#FEDB65', '#00F2F0'],
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          top: 0,
          itemWidth: 6,
          itemHeight: 6,
          top: 5,
          right: 0
        },
        grid: {
          top: '15%',
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
@@ -126,14 +109,14 @@
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1B374A'
              color: '#1F2C5C'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#C0CFDC',
            color: '#495F88',
            fontSize: 12
          }
        },
@@ -141,14 +124,13 @@
          type: 'value',
          name: '单位：次',
          nameTextStyle: {
            color: '#C0CFDC',
            color: '#495F88',
            fontSize: 12,
            padding: [0, 0, 0, 30]
          },
          splitLine: {
            lineStyle: {
              color: '#1B374A',
              type: 'dashed'
              color: '#1F2C5C',
              type: 'solid'
            }
          },
          axisLine: {
@@ -158,7 +140,7 @@
            show: false
          },
          axisLabel: {
            color: '#C0CFDC',
            color: '#495F88',
            fontSize: 12
          }
        },
@@ -168,6 +150,9 @@
            type: 'line',
            smooth: true,
            symbol: 'none',
            itemStyle: {
              color: '#FEDB65'
            },
            areaStyle: {
              opacity: 0.8,
              color: {
@@ -178,16 +163,35 @@
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255, 187, 0, 0.3)'
                  color: '#6C1F0D'
                }, {
                  offset: 1,
                  color: 'rgba(255, 187, 0, 0)'
                  offset: 0.7,
                  color: 'rgba(255,102,0,0)'
                }]
              }
            },
            lineStyle: {
              width: 2,
              color: '#FFBB00'
              width: 4,
              color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: '#AE5112' // 0% 处的颜色
              }, {
                offset: 0.3,
                color: '#FEDB65' // 50% 处的颜色
              }, {
                offset: 0.7,
                color: '#FEDB65' // 50% 处的颜色
              }, {
                offset: 1,
                color: '#AE5112' // 100% 处的颜色
              }]
              }
            },
            data: [150, 180, 230, 280, 260, 100]
          },
@@ -196,6 +200,9 @@
            type: 'line',
            smooth: true,
            symbol: 'none',
            itemStyle: {
              color: '#00F2EF' 
            },
            areaStyle: {
              opacity: 0.8,
              color: {
@@ -206,16 +213,35 @@
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 255, 255, 0.3)'
                  color: 'rgba(28,0,255,0.8)'
                }, {
                  offset: 1,
                  color: 'rgba(0, 255, 255, 0)'
                  offset: 0.7,
                  color: 'rgba(28,0,255,0)'
                }]
              }
            },
            lineStyle: {
              width: 2,
              color: '#00FFFF'
              width: 4,
              color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: '#0E5FFF' // 0% 处的颜色
              }, {
                offset: 0.3,
                color: '#00F2EF' // 50% 处的颜色
              }, {
                offset: 0.7,
                color: '#00F2EF' // 50% 处的颜色
              }, {
                offset: 1,
                color: '#0E5FFF' // 100% 处的颜色
              }]
              }
            },
            data: [200, 250, 380, 450, 380, 300]
          }

 src/main.js

@@ -4,7 +4,14 @@
import router from './router'
import store from './store'
import * as echarts from 'echarts';

import ECharts from 'vue-echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';
Vue.component('v-chart', ECharts); 
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false


 src/views/DataScreen.vue

@@ -12,7 +12,6 @@
import LeftPanel from '@/components/datascreen/LeftPanel.vue';
import CenterPanel from '@/components/datascreen/CenterPanel.vue';
import RightPanel from '@/components/datascreen/RightPanel.vue';
import '@/components/datascreen/chartConfig.js';

export default {
  name: 'DataScreen',