jin_ji_hu/src/views/dataCloudMap/index.vue

<template>
  <div class="dataCloudMap" v-if="false">
    <el-row class="dataCloudMap-main">
      <el-col :span="11" class="dataCloudMap-main-left">
        <div class="dataCloudMap-left-top">
          <div class="echart-title">
            <div class="echart-left-title">
              <div class="L-title-left">
                <span class="dataCloudMap-birght"></span>
                <span class="dataCloudMap-title">服务业发展总览</span>
              </div>
              <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
            </div>
            <div class="rightBigNav">
              <div class="right-nav">
                <div
                  class="tabStyle"
                  v-for="(item, index) in options1"
                  :key="index"
                  @click="active(index)"
                  :class="activeIndex == index ? 'change-blue' : ''"
                >
                  <div class="change-grey-birght" :class="activeIndex == index ? 'change-blue-birght' : ''"></div>
                  <span class="change-grey-text" :class="activeIndex == index ? 'change-blue-text' : ''">{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="echarts-data-box">
            <div class="E-box-item">
              <div class="img-box-one img-box"></div>
              <div class="data-box">
                <div class="box-number">
                  <span class="number-yuan">1758.13</span>
                  <span class="yuan-unit">亿元</span>
                </div>
                <div class="box-bottom">【2023】服务业增加值</div>
              </div>
            </div>
            <div class="E-box-item">
              <div class="img-box-two img-box"></div>
              <div class="data-box">
                <div class="box-number">
                  <span class="number-yuan">1.3</span>
                  <span class="yuan-unit">%</span>
                </div>
                <div class="box-bottom">【2023】服务业增速</div>
              </div>
            </div>
            <div class="E-box-item">
              <div class="img-box-three img-box"></div>
              <div class="data-box">
                <div class="box-number">
                  <span class="number-yuan">49.9</span>
                  <span class="yuan-unit">%</span>
                </div>
                <div class="box-bottom">【2023】服务业增加值占GDP比重</div>
              </div>
            </div>
          </div>
          <div id="echarts"></div>
        </div>
        <div class="dataCloudMap-left-bottom">
          <div class="industry-title">
            <div class="bottom-left-title">
              <div class="L-title-left">
                <span class="dataCloudMap-birght"></span>
                <span class="dataCloudMap-title">行业纵深情况</span>
              </div>
              <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
            </div>
            <div class="rightBtn">查看更多数据>></div>
          </div>
          <section>
            <el-table v-loading="loadingOne" class="tabTwo-table" border :data="tableOneData" :row-class-name="tableRowClassName" >  <!-- :max-height="tabHeader" -->
              <el-table-column label="行业大类" prop="bigType" />
              <el-table-column label="全年营收" prop="revenue" />
              <el-table-column label="增加值（亿元）" prop="yuan" />
              <el-table-column label="增加值增速（按不变价）" prop="speedUp" />
              <el-table-column label="增加值占GDP比重" prop="proportion" />
            </el-table>
          </section>
        </div>
      </el-col>
      <el-col :span="13" class="dataCloudMap-main-right">
        <div class="dataCloudMap-right-top">
          <div class="right-top-title">
            <div class="L-title-left">
              <span class="dataCloudMap-birght"></span>
              <span class="dataCloudMap-title">企业情况</span>
            </div>
            <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
          </div>
        </div>
        <div class="dataCloudMap-right-middle">
          <div class="honor-title">
            <div class="right-middle-title">
              <div class="L-title-left">
                <span class="dataCloudMap-birght"></span>
                <span class="dataCloudMap-title">荣誉情况</span>
              </div>
              <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
            </div>
            <div class="rightBtn">查看更多数据>></div>
          </div>
        </div>
        <div class="dataCloudMap-right-bottom">
          <div class="project-trace-title">
            <div class="right-bottom-title">
              <div class="L-title-left">
                <span class="dataCloudMap-birght"></span>
                <span class="dataCloudMap-title">项目追踪情况</span>
              </div>
              <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
            </div>
            <div class="rightBtn">查看更多数据>></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      activeIndex:0,
      options1: [
        {
          name: "按年",
          // url: require("../../assets/images/bg1.png"),
          // url1: require("../../assets/images/bg2.png"),
        },
        {
          name: "按季度",
          // url: require("../../assets/images/tb1.png"),
          // url1: require("../../assets/images/tb2.png"),
        },
      ],
      loadingOne: false,
      tableOneData: [
        {
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89%",
          proportion:"11%",
        },
        {
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89%",
          proportion:"11%",
        },
      ]
    }
  },
  mounted(){
    // this.$nextTick(()=>{
    //   this.initEchart();
    // })
  },
  methods:{
    initEchart(){
      var chartDom = document.getElementById("echarts");
      var myChart = echarts.init(chartDom);
      let option = {
        // title: {
        //   text: "2019年销售水量和主营业务收入对比",
        //   textStyle: {
        //     align: "center",
        //     color: "#fff",
        //     fontSize: 20,
        //   },
        //   top: "3%",
        //   left: "10%",
        // },
        grid: {
          top: "8%",
          left: "3%",
          right: "3%",
          bottom: "35%", //也可设置left和right设置距离来控制图表的大小
        },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "shadow",
      //       label: {
      //         show: true,
      //       },
      //     },
      //   },
        // legend: {
        //   data: ["销售水量", "主营业务"],
        //   top: "1%",
        //   textStyle: {
        //   //   color: "#ffffff",
        //   },
        // },
        xAxis: {
          data: [
            "2019",
            "2020",
            "2021",
            "2022",
            "2023",
            "2024",
          ],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#ccc",
              opacity: 0.6,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            color: "#666666", //X轴文字颜色
            fontSize: 14,
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle :{
                type: "dashed",
              }
            },
            axisLabel: {
              show: true,
              color: "#666666",
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: "销售水量",
            type: "line",
            // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            // smooth: true, //平滑曲线显示  会让lineStyle的type设置的solid无效
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#FFBB00",
              borderColor: "#fff",
              borderWidth: 2,
            },
            lineStyle: {
              type: "solid",
              color: "#FFBB00",
            },
            // 折线覆盖的颜色
            // areaStyle: {
            //   color: "rgba(5,140,255, 0.2)",
            // },
            data: [4.8, 4.4, 5.4, 4.1, 3.6, 3.4],
          },
          {
            name: "主营业务",
            type: "bar",
            barWidth: 25,
            itemStyle: {
              // normal: {
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     {
              //       offset: 0,
              //       color: "#00FFE3",
              //     },
              //     {
              //       offset: 1,
              //       color: "#4693EC",
              //     },
              //   ]),
              // },
              color: "#0086FF",
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
          },
        ],
      };
      myChart.setOption(option)
    },
    active(e) {
      this.activeIndex = e;
    },
    // 修改table背景色
    tableRowClassName({row, rowIndex}){
      if (rowIndex % 2 !== 0) {
        return 'evenNumber-row';
      }
      return '';
    },
  },
}
</script>