zhsq_qk_2.0/zhsq_qk-ui/src/views/fusion/jjyx.vue

<template>
  <div>

    <!-- 阴影背景
    <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
    <div class="bj_right"><img src="@/assets/images/sprhbj-right.png"/></div>-->
    <div class="bj_bottom"><img src="@/assets/images/sprhbj-bottom.png"/></div>
    <!--头部开始-->
    <div class="header">
      <h1>城市运行一网统管指挥中心</h1>

    </div>
    <!--头部结束-->
    <!-- 小头部 开始 -->
    <div class="nav_min">
      <div class="top_txt">
        <b>汽开区</b>
        <span>小雨</span>
        <span>9~16℃</span>
      </div>
      <div class="top_txt top_txt2">
        <span>{{ currentTime }}</span>
        <!--  <span>星期六</span>
             <b>11:16:58</b> -->
      </div>
    </div>
    <!-- 小头部 结束 -->
    <!-- 中间内容 开始 -->
    <div class="qkq_con">


      <!--左侧开始-->
      <div class="con_left_e">
        <div class="con_div">
          <div class="qkq_tit ">规模以上工业增加值</div>
          <div class="qkq_jjyx_div">
            <div id="qkq_zjz1_1"></div>
            <div id="qkq_zjz2_1"></div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit ">固定资产投资额</div>
          <div class="qkq_jjyx_div">
            <div id="qkq_zjz1_2"></div>
            <div id="qkq_zjz2_2"></div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit ">民间投资额</div>
          <div class="qkq_jjyx_div">
            <div id="qkq_zjz1_3"></div>
            <div id="qkq_zjz2_3"></div>
          </div>
        </div>

      </div>
      <div class="con_left_f">
        <div class="con_div clearfix">
          <div class="con_left_l fl">
            <div class="qkq_tit ">政策法规</div>
            <div class="qkq_zcfg">
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
              <p>汽开区的一些政策法规的列表展示<span>2024-01-01</span></p>
            </div>
          </div>
          <div class="con_left_r fr">
            <div class="qkq_tit ">主要经济指标</div>
            <div class="qkq_zcfg" id="scrollContent">
              <p>汽开区的一些主要经济指标的列表展示<i class="up">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="up">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="down">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="down">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="up">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="down">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="up">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="up">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="up">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="down">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="down">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="up">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="down">9.0%</i></p>
              <p>汽开区的一些主要经济指标的列表展示<i class="up">9.0%</i></p>
            </div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit ">本年度主要经济指标增长额</div>
          <div id="qkq_jdt"></div>
        </div>
        <div class="con_div">
          <div class="qkq_tit ">全省进出口总值对比</div>
          <div id="qkq_kxt"></div>
        </div>
      </div>
      <div class="con_left_g">
        <div class="con_div">
          <div class="qkq_tit ">规模以上工业增加值</div>
          <div class="qkq_jjyx_div">
            <div id="qkq_zjz1_4"></div>
            <div id="qkq_zjz2_4"></div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit ">固定资产投资额</div>
          <div class="qkq_jjyx_div">
            <div id="qkq_zjz1_5"></div>
            <div id="qkq_zjz2_5"></div>
          </div>
        </div>
        <div class="con_div">
          <div class="qkq_tit ">民间投资额</div>
          <div class="qkq_jjyx_div">
            <div id="qkq_zjz1_6"></div>
            <div id="qkq_zjz2_6"></div>
          </div>
        </div>
      </div>


      <!--左侧结束-->
    </div>
    <!-- 中间内容 结束 -->


    <!--底部开始-->
    <div class="footer">
      <div class="nav-bottom">
        <div class="nav-bottom-left">
          <div class="nav-li-left on" @click="handleNavigation('jjyx')">
            <span>经济运行</span>
          </div>
          <div class="nav-li-left" @click="handleNavigation('csgl')">
            <span>城市管理</span>
          </div>
          <div class="nav-li-left" @click="handleNavigation('jtzl')">
            <span>交通治理</span>
          </div>
          <div class="nav-li-left" @click="handleNavigation('jczl')">
            <span>基层治理</span>
          </div>
        </div>
        <div class="nav-home-middle" @click="homePage('weather')">
          <img src="@/assets/images/home-btn.png"/>
          <a>返回首页</a>
        </div>
        <div class="nav-bottom-right">
          <div class="nav-li-right" @click="handleNavigation('yshj_new')">
            <span>营商环境</span>
          </div>
          <div class="nav-li-right" @click="handleNavigation('yshj')">
            <span>政务运行</span>
          </div>
          <div class="nav-li-right" @click="handleNavigation('aqyj')">
            <span>安全应急</span>
          </div>
          <div class="nav-li-right" @click="handleNavigation('fwyq')">
            <span>服务一汽</span>
          </div>
        </div>
      </div>
    </div>
    <!--底部开始-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import $ from 'jquery'
import jQuery from 'jquery'
import "@/assets/images/qkq_body.css";
import "@/assets/images/qkq_index.css";
import "@/assets/images/qkq_sprh.css";
import {
  getCameraList
} from "@/api/system/camera";
import supermap from "@/views/supermap/supermap";


export default {
  name: "jjyx",
  components: {
    supermap
  },
  data() {
    return {
      dropdownVisible: false,
      cameras: [],
      sltProps: null,
      currentTime: '',
      btnOne: true,
      btnTwo: false
    };
    // 可根据实际情况添加更多设备列表
  },
  created() {
  },
  mounted() {
    this.qkq_zjz1_1();
    this.qkq_zjz2_1();
    this.qkq_zjz1_2();
    this.qkq_zjz2_2();
    this.qkq_zjz1_3();
    this.qkq_zjz2_3();
    this.qkq_zjz1_4();
    this.qkq_zjz2_4();
    this.qkq_zjz1_5();
    this.qkq_zjz2_5();
    this.qkq_zjz1_6();
    this.qkq_zjz2_6();
    this.getCurrentTime();
    this.qkq_jdt();
    this.qkq_kxt();
    // 每秒刷新时间
    setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  },

  methods: {
    sltHandle() {
      this.btnOne = true
      this.btnTwo = false
      this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
    },
    yxtHandle() {
      this.btnTwo = true
      this.btnOne = false
      this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
    },
    handleNavigation(route) {
      this.$router.push({
        path: route
      });
    },
    homePage(route) {
      this.$router.push({
        path: route
      });
    },
    cameraList() {
      getCameraList().then(response => {
        this.cameras = response.data;
      })
    },
    toggleDropdown(event) {
      this.dropdownVisible = !this.dropdownVisible;
    },

    qkq_zjz1_1() {
      //一汽红旗项目服务局
      var myChart = echarts.init(document.getElementById('qkq_zjz1_1'));
      let angle = 0; //角度，用来做简单的动画效果的
      var data = [{
        value: "10",
        itemStyle: {
          color: "#ffbf00"
        }
      },
        {
          value: "100",
          itemStyle: {
            color: "#fc465"

          }
        }
      ];
      var dataTotal = Number(data[1].value) + Number(data[0].value)
      var dataArr = [{
        value: Number(data[0].value),
        name: '增加值',
        itemStyle: {
          normal: {
            color: "#5a98ed"
          }
        }
      }, {
        value: Number(data[1].value),
        name: '总数',
        itemStyle: {
          normal: {
            color: "#1a3b72"
          }
        }
      }]

      var option = {
        title: [
          {
            text: '工业增加值',
            left: '49%',
            top: '40%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
              color: '#66b1ff',
              fontWeight: 'normal',
              fontSize: 16
            }
          }, {
            text: Math.floor((data[1].value / dataTotal) * 100) + '%',
            left: '49%',
            top: '55%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
              color: '#ffff00',
              fontWeight: 'normal',
              fontSize: 18
            }
          }],
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 90 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //粉
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5', //绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 270 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //绿
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            radius: ['45%', '60%'],
            name: '',
            type: 'pie',
            selectedOffset: 16,
            startAngle: 90,
            z: 3,
            labelLine: {
              normal: {
                length: 15,
                length2: 22,
                lineStyle: {
                  width: 2
                }
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 14
                },
                formatter: function (params) {
                  return params.name + '\n' + params.value
                }
              }
            },
            data: dataArr
          }]
      };
      myChart.setOption(option, true);

      if (option) {
        myChart.setOption(option);
      }

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }

      function draw() {
        angle = angle + 3;
        myChart.setOption(option, true);
        //window.requestAnimationFrame(draw);
      }

      setInterval(function () {
        //用setInterval做动画感觉有问题
        draw();
      }, 100);
    },

    qkq_zjz2_1() {
      var myChart = echarts.init(document.getElementById('qkq_zjz2_1'));
      let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let yData = [25, 100, 50, 45, 75, 25, 100, 50, 45, 75, 25, 100, 50, 45, 75]
      let barData = [25, 60, 50, 45, 75, 25, 60, 50, 45, 75, 25, 60, 50, 45, 75]

      function calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
          el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
              if (Number(max) < Number(el1)) {
                max = Number(el1);
              }
            }
          })
        })
        let maxint = Math.ceil(max / 9.5);
        //不让最高的值超过最上面的刻度
        let maxval = maxint * 10;
        //让显示的刻度是整数
        return maxval;
      }


      var max = Math.ceil(calMax([yData]) / 50) * 50;
      var max1 = Math.ceil(calMax([barData]) / 50) * 50;

      var option = {
        legend: {
          left: '1%',
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
        },
        grid: {
          left: '1%',
          top: 60,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        },
        yAxis: [{
          max: max1,
          name: '2024年',
          nameTextStyle: {
            align: 'left',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }, {
          max: max,
          name: '2023年',
          position: 'right',
          nameTextStyle: {
            align: 'right',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }],
        series: [
          {
            name: '2024年',
            type: 'bar',
            data: barData,
            barWidth: 10,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#1D82FF'
                }, {
                  offset: 1,
                  color: '#00FFF6'
                }]),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          },
          {
            name: '2023年',
            type: 'line',
            data: yData,
            yAxisIndex: 1,
            smooth: true,
            symbol: 'none',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: {
                    // 两端添加透明度,模拟两端线收缩
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
                    }, {
                      offset: 0.2,
                      color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                    }, {
                      offset: 0.8,
                      color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(255, 227, 168, 0)'
                    }]
                  },
                  shadowColor: 'rgba(255, 120, 0, 1)',
                  shadowBlur: 8
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(197, 106, 255, 0.6)'
                  }, {
                    offset: 0.6,
                    color: 'rgba(255, 120, 0, 0)'
                  }]),
                }
              }
            }
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: barData.map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [15, 2],
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            z: 999
          },
        ]
      };
      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_zjz1_2() {
      //一汽红旗项目服务局
      var myChart = echarts.init(document.getElementById('qkq_zjz1_2'));
      let angle = 0; //角度，用来做简单的动画效果的
      var data = [{
        value: "10",
        itemStyle: {
          color: "#ffbf00"
        }
      },
        {
          value: "100",
          itemStyle: {
            color: "#fc465"

          }
        }
      ];
      var dataTotal = Number(data[1].value) + Number(data[0].value)
      var dataArr = [{
        value: Number(data[0].value),
        name: '增加值',
        itemStyle: {
          normal: {
            color: "#5a98ed"
          }
        }
      }, {
        value: Number(data[1].value),
        name: '总数',
        itemStyle: {
          normal: {
            color: "#1a3b72"
          }
        }
      }]

      var option = {
        title: [{
          text: '工业增加值',
          left: '49%',
          top: '40%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#66b1ff',
            fontWeight: 'normal',
            fontSize: 16
          }
        }, {
          text: Math.floor((data[1].value / dataTotal) * 100) + '%',
          left: '49%',
          top: '55%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#ffff00',
            fontWeight: 'normal',
            fontSize: 18
          }
        }],
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 90 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //粉
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5', //绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 270 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //绿
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            radius: ['50%', '65%'],
            name: '',
            type: 'pie',
            selectedOffset: 16,
            startAngle: 90,
            z: 3,
            labelLine: {
              normal: {
                length: 15,
                length2: 22,
                lineStyle: {
                  width: 2
                }
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 14
                },
                formatter: function (params) {
                  return params.name + '\n' + params.value
                }
              }
            },
            data: dataArr
          }]
      };
      myChart.setOption(option, true);

      if (option) {
        myChart.setOption(option);
      }

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }

      function draw() {
        angle = angle + 3;
        myChart.setOption(option, true);
        //window.requestAnimationFrame(draw);
      }

      setInterval(function () {
        //用setInterval做动画感觉有问题
        draw();
      }, 100);
    },

    qkq_zjz2_2() {
      var myChart = echarts.init(document.getElementById('qkq_zjz2_2'));
      let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let yData = [25, 100, 50, 45, 75, 25, 100, 50, 45, 75, 25, 100, 50, 45, 75]
      let barData = [25, 60, 50, 45, 75, 25, 60, 50, 45, 75, 25, 60, 50, 45, 75]

      function calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
          el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
              if (Number(max) < Number(el1)) {
                max = Number(el1);
              }
            }
          })
        })
        let maxint = Math.ceil(max / 9.5);
        //不让最高的值超过最上面的刻度
        let maxval = maxint * 10;
        //让显示的刻度是整数
        return maxval;
      }


      var max = Math.ceil(calMax([yData]) / 50) * 50;
      var max1 = Math.ceil(calMax([barData]) / 50) * 50;

      var option = {
        legend: {
          left: '1%',
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
        },
        grid: {
          left: '1%',
          top: 60,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        },
        yAxis: [{
          max: max1,
          name: '2024年',
          nameTextStyle: {
            align: 'left',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }, {
          max: max,
          name: '2023年',
          position: 'right',
          nameTextStyle: {
            align: 'right',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }],
        series: [{
          name: '2024年',
          type: 'bar',
          data: barData,
          barWidth: 10,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#1D82FF'
              }, {
                offset: 1,
                color: '#00FFF6'
              }]),
              barBorderRadius: [4, 4, 0, 0]
            }
          }
        }, {
          name: '2023年',
          type: 'line',
          data: yData,
          yAxisIndex: 1,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              lineStyle: {
                color: {
                  // 两端添加透明度,模拟两端线收缩
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
                  }, {
                    offset: 0.2,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 0.8,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255, 227, 168, 0)'
                  }]
                },
                shadowColor: 'rgba(255, 120, 0, 1)',
                shadowBlur: 8
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(197, 106, 255, 0.6)'
                }, {
                  offset: 0.6,
                  color: 'rgba(255, 120, 0, 0)'
                }]),
              }
            }
          }
        },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: barData.map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [15, 2],
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            z: 999
          },]
      };
      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_zjz1_3() {
      //一汽红旗项目服务局
      var myChart = echarts.init(document.getElementById('qkq_zjz1_3'));
      let angle = 0; //角度，用来做简单的动画效果的
      var data = [{
        value: "10",
        itemStyle: {
          color: "#ffbf00"
        }
      },
        {
          value: "100",
          itemStyle: {
            color: "#fc465"

          }
        }
      ];
      var dataTotal = Number(data[1].value) + Number(data[0].value)
      var dataArr = [{
        value: Number(data[0].value),
        name: '增加值',
        itemStyle: {
          normal: {
            color: "#5a98ed"
          }
        }
      }, {
        value: Number(data[1].value),
        name: '总数',
        itemStyle: {
          normal: {
            color: "#1a3b72"
          }
        }
      }]

      var option = {
        title: [{
          text: '工业增加值',
          left: '49%',
          top: '40%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#66b1ff',
            fontWeight: 'normal',
            fontSize: 16
          }
        }, {
          text: Math.floor((data[1].value / dataTotal) * 100) + '%',
          left: '49%',
          top: '55%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#ffff00',
            fontWeight: 'normal',
            fontSize: 18
          }
        }],
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 90 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //粉
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5', //绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 270 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //绿
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            radius: ['50%', '65%'],
            name: '',
            type: 'pie',
            selectedOffset: 16,
            startAngle: 90,
            z: 3,
            labelLine: {
              normal: {
                length: 15,
                length2: 22,
                lineStyle: {
                  width: 2
                }
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 14
                },
                formatter: function (params) {
                  return params.name + '\n' + params.value
                }
              }
            },
            data: dataArr
          }]
      };
      myChart.setOption(option, true);

      if (option) {
        myChart.setOption(option);
      }

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }

      function draw() {
        angle = angle + 3;
        myChart.setOption(option, true);
        //window.requestAnimationFrame(draw);
      }

      setInterval(function () {
        //用setInterval做动画感觉有问题
        draw();
      }, 100);
    },

    qkq_zjz2_3() {

      var myChart = echarts.init(document.getElementById('qkq_zjz2_3'));
      let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let yData = [25, 100, 50, 45, 75, 25, 100, 50, 45, 75, 25, 100, 50, 45, 75]
      let barData = [25, 60, 50, 45, 75, 25, 60, 50, 45, 75, 25, 60, 50, 45, 75]

      function calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
          el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
              if (Number(max) < Number(el1)) {
                max = Number(el1);
              }
            }
          })
        })
        let maxint = Math.ceil(max / 9.5);
        //不让最高的值超过最上面的刻度
        let maxval = maxint * 10;
        //让显示的刻度是整数
        return maxval;
      }


      var max = Math.ceil(calMax([yData]) / 50) * 50;
      var max1 = Math.ceil(calMax([barData]) / 50) * 50;

      var option = {
        legend: {
          left: '1%',
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
        },
        grid: {
          left: '1%',
          top: 60,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        },
        yAxis: [{
          max: max1,
          name: '2024年',
          nameTextStyle: {
            align: 'left',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }, {
          max: max,
          name: '2023年',
          position: 'right',
          nameTextStyle: {
            align: 'right',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }],
        series: [{
          name: '2024年',
          type: 'bar',
          data: barData,
          barWidth: 10,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#1D82FF'
              }, {
                offset: 1,
                color: '#00FFF6'
              }]),
              barBorderRadius: [4, 4, 0, 0]
            }
          }
        }, {
          name: '2023年',
          type: 'line',
          data: yData,
          yAxisIndex: 1,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              lineStyle: {
                color: {
                  // 两端添加透明度,模拟两端线收缩
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
                  }, {
                    offset: 0.2,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 0.8,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255, 227, 168, 0)'
                  }]
                },
                shadowColor: 'rgba(255, 120, 0, 1)',
                shadowBlur: 8
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(197, 106, 255, 0.6)'
                }, {
                  offset: 0.6,
                  color: 'rgba(255, 120, 0, 0)'
                }]),
              }
            }
          }
        },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: barData.map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [15, 2],
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            z: 999
          },]
      };
      if (option) {
        myChart.setOption(option);
      }
    },

    qkq_zjz1_4() {
      //一汽红旗项目服务局
      var myChart = echarts.init(document.getElementById('qkq_zjz1_4'));
      let angle = 0; //角度，用来做简单的动画效果的
      var data = [{
        value: "10",
        itemStyle: {
          color: "#ffbf00"
        }
      },
        {
          value: "100",
          itemStyle: {
            color: "#fc465"

          }
        }
      ];
      var dataTotal = Number(data[1].value) + Number(data[0].value)
      var dataArr = [{
        value: Number(data[0].value),
        name: '增加值',
        itemStyle: {
          normal: {
            color: "#5a98ed"
          }
        }
      }, {
        value: Number(data[1].value),
        name: '总数',
        itemStyle: {
          normal: {
            color: "#1a3b72"
          }
        }
      }]

      var option = {
        title: [{
          text: '工业增加值',
          left: '49%',
          top: '40%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#66b1ff',
            fontWeight: 'normal',
            fontSize: 16
          }
        }, {
          text: Math.floor((data[1].value / dataTotal) * 100) + '%',
          left: '49%',
          top: '55%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#ffff00',
            fontWeight: 'normal',
            fontSize: 18
          }
        }],
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 90 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //粉
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5', //绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 270 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //绿
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            radius: ['50%', '65%'],
            name: '',
            type: 'pie',
            selectedOffset: 16,
            startAngle: 90,
            z: 3,
            labelLine: {
              normal: {
                length: 15,
                length2: 22,
                lineStyle: {
                  width: 2
                }
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 14
                },
                formatter: function (params) {
                  return params.name + '\n' + params.value
                }
              }
            },
            data: dataArr
          }]
      };
      myChart.setOption(option, true);

      if (option) {
        myChart.setOption(option);
      }

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }

      function draw() {
        angle = angle + 3;
        myChart.setOption(option, true);
        //window.requestAnimationFrame(draw);
      }

      setInterval(function () {
        //用setInterval做动画感觉有问题
        draw();
      }, 100);
    },

    qkq_zjz2_4() {

      var myChart = echarts.init(document.getElementById('qkq_zjz2_4'));
      let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let yData = [25, 100, 50, 45, 75, 25, 100, 50, 45, 75, 25, 100, 50, 45, 75]
      let barData = [25, 60, 50, 45, 75, 25, 60, 50, 45, 75, 25, 60, 50, 45, 75]

      function calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
          el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
              if (Number(max) < Number(el1)) {
                max = Number(el1);
              }
            }
          })
        })
        let maxint = Math.ceil(max / 9.5);
        //不让最高的值超过最上面的刻度
        let maxval = maxint * 10;
        //让显示的刻度是整数
        return maxval;
      }


      var max = Math.ceil(calMax([yData]) / 50) * 50;
      var max1 = Math.ceil(calMax([barData]) / 50) * 50;

      var option = {
        legend: {
          left: '1%',
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
        },
        grid: {
          left: '1%',
          top: 60,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        },
        yAxis: [{
          max: max1,
          name: '2024年',
          nameTextStyle: {
            align: 'left',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }, {
          max: max,
          name: '2023年',
          position: 'right',
          nameTextStyle: {
            align: 'right',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }],
        series: [{
          name: '2024年',
          type: 'bar',
          data: barData,
          barWidth: 10,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#1D82FF'
              }, {
                offset: 1,
                color: '#00FFF6'
              }]),
              barBorderRadius: [4, 4, 0, 0]
            }
          }
        }, {
          name: '2023年',
          type: 'line',
          data: yData,
          yAxisIndex: 1,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              lineStyle: {
                color: {
                  // 两端添加透明度,模拟两端线收缩
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
                  }, {
                    offset: 0.2,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 0.8,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255, 227, 168, 0)'
                  }]
                },
                shadowColor: 'rgba(255, 120, 0, 1)',
                shadowBlur: 8
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(197, 106, 255, 0.6)'
                }, {
                  offset: 0.6,
                  color: 'rgba(255, 120, 0, 0)'
                }]),
              }
            }
          }
        },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: barData.map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [15, 2],
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            z: 999
          },]
      };
      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_zjz1_5() {
      //一汽红旗项目服务局
      var myChart = echarts.init(document.getElementById('qkq_zjz1_5'));
      let angle = 0; //角度，用来做简单的动画效果的
      var data = [{
        value: "10",
        itemStyle: {
          color: "#ffbf00"
        }
      },
        {
          value: "100",
          itemStyle: {
            color: "#fc465"

          }
        }
      ];
      var dataTotal = Number(data[1].value) + Number(data[0].value)
      var dataArr = [{
        value: Number(data[0].value),
        name: '增加值',
        itemStyle: {
          normal: {
            color: "#5a98ed"
          }
        }
      }, {
        value: Number(data[1].value),
        name: '总数',
        itemStyle: {
          normal: {
            color: "#1a3b72"
          }
        }
      }]

      var option = {
        title: [{
          text: '工业增加值',
          left: '49%',
          top: '40%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#66b1ff',
            fontWeight: 'normal',
            fontSize: 16
          }
        }, {
          text: Math.floor((data[1].value / dataTotal) * 100) + '%',
          left: '49%',
          top: '55%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#ffff00',
            fontWeight: 'normal',
            fontSize: 18
          }
        }],
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 90 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //粉
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5', //绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 270 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //绿
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            radius: ['50%', '65%'],
            name: '',
            type: 'pie',
            selectedOffset: 16,
            startAngle: 90,
            z: 3,
            labelLine: {
              normal: {
                length: 15,
                length2: 22,
                lineStyle: {
                  width: 2
                }
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 14
                },
                formatter: function (params) {
                  return params.name + '\n' + params.value
                }
              }
            },
            data: dataArr
          }]
      };
      myChart.setOption(option, true);

      if (option) {
        myChart.setOption(option);
      }

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }

      function draw() {
        angle = angle + 3;
        myChart.setOption(option, true);
        //window.requestAnimationFrame(draw);
      }

      setInterval(function () {
        //用setInterval做动画感觉有问题
        draw();
      }, 100);
    },

    qkq_zjz2_5() {

      var myChart = echarts.init(document.getElementById('qkq_zjz2_5'));
      let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let yData = [25, 100, 50, 45, 75, 25, 100, 50, 45, 75, 25, 100, 50, 45, 75]
      let barData = [25, 60, 50, 45, 75, 25, 60, 50, 45, 75, 25, 60, 50, 45, 75]

      function calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
          el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
              if (Number(max) < Number(el1)) {
                max = Number(el1);
              }
            }
          })
        })
        let maxint = Math.ceil(max / 9.5);
        //不让最高的值超过最上面的刻度
        let maxval = maxint * 10;
        //让显示的刻度是整数
        return maxval;
      }


      var max = Math.ceil(calMax([yData]) / 50) * 50;
      var max1 = Math.ceil(calMax([barData]) / 50) * 50;

      var option = {
        legend: {
          left: '1%',
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
        },
        grid: {
          left: '1%',
          top: 60,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        },
        yAxis: [{
          max: max1,
          name: '2024年',
          nameTextStyle: {
            align: 'left',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }, {
          max: max,
          name: '2023年',
          position: 'right',
          nameTextStyle: {
            align: 'right',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }],
        series: [{
          name: '2024年',
          type: 'bar',
          data: barData,
          barWidth: 10,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#1D82FF'
              }, {
                offset: 1,
                color: '#00FFF6'
              }]),
              barBorderRadius: [4, 4, 0, 0]
            }
          }
        }, {
          name: '2023年',
          type: 'line',
          data: yData,
          yAxisIndex: 1,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              lineStyle: {
                color: {
                  // 两端添加透明度,模拟两端线收缩
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
                  }, {
                    offset: 0.2,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 0.8,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255, 227, 168, 0)'
                  }]
                },
                shadowColor: 'rgba(255, 120, 0, 1)',
                shadowBlur: 8
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(197, 106, 255, 0.6)'
                }, {
                  offset: 0.6,
                  color: 'rgba(255, 120, 0, 0)'
                }]),
              }
            }
          }
        },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: barData.map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [15, 2],
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            z: 999
          },]
      };
      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_zjz1_6() {
      //一汽红旗项目服务局
      var myChart = echarts.init(document.getElementById('qkq_zjz1_6'));
      let angle = 0; //角度，用来做简单的动画效果的
      var data = [{
        value: "10",
        itemStyle: {
          color: "#ffbf00"
        }
      },
        {
          value: "100",
          itemStyle: {
            color: "#fc465"

          }
        }
      ];
      var dataTotal = Number(data[1].value) + Number(data[0].value)
      var dataArr = [{
        value: Number(data[0].value),
        name: '增加值',
        itemStyle: {
          normal: {
            color: "#5a98ed"
          }
        }
      }, {
        value: Number(data[1].value),
        name: '总数',
        itemStyle: {
          normal: {
            color: "#1a3b72"
          }
        }
      }]

      var option = {
        title: [{
          text: '工业增加值',
          left: '49%',
          top: '40%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#66b1ff',
            fontWeight: 'normal',
            fontSize: 16
          }
        }, {
          text: Math.floor((data[1].value / dataTotal) * 100) + '%',
          left: '49%',
          top: '55%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            color: '#ffff00',
            fontWeight: 'normal',
            fontSize: 18
          }
        }],
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.7,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#fddb00',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 90 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //粉
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: 'ring5', //绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              let point = getCirlPoint(x0, y0, r, 270 + -angle);
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: '#0CD3DB', //绿
                  fill: '#0CD3DB',
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            radius: ['50%', '65%'],
            name: '',
            type: 'pie',
            selectedOffset: 16,
            startAngle: 90,
            z: 3,
            labelLine: {
              normal: {
                length: 15,
                length2: 22,
                lineStyle: {
                  width: 2
                }
              }
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 14
                },
                formatter: function (params) {
                  return params.name + '\n' + params.value
                }
              }
            },
            data: dataArr
          }]
      };
      myChart.setOption(option, true);

      if (option) {
        myChart.setOption(option);
      }

      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }

      function draw() {
        angle = angle + 3;
        myChart.setOption(option, true);
        //window.requestAnimationFrame(draw);
      }

      setInterval(function () {
        //用setInterval做动画感觉有问题
        draw();
      }, 100);
    },

    qkq_zjz2_6() {

      var myChart = echarts.init(document.getElementById('qkq_zjz2_6'));
      let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let yData = [25, 100, 50, 45, 75, 25, 100, 50, 45, 75, 25, 100, 50, 45, 75]
      let barData = [25, 60, 50, 45, 75, 25, 60, 50, 45, 75, 25, 60, 50, 45, 75]

      function calMax(arr) {
        let max = 0;
        arr.forEach((el) => {
          el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
              if (Number(max) < Number(el1)) {
                max = Number(el1);
              }
            }
          })
        })
        let maxint = Math.ceil(max / 9.5);
        //不让最高的值超过最上面的刻度
        let maxval = maxint * 10;
        //让显示的刻度是整数
        return maxval;
      }


      var max = Math.ceil(calMax([yData]) / 50) * 50;
      var max1 = Math.ceil(calMax([barData]) / 50) * 50;

      var option = {
        legend: {
          left: '1%',
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
        },
        grid: {
          left: '1%',
          top: 60,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: xData,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        },
        yAxis: [{
          max: max1,
          name: '2024年',
          nameTextStyle: {
            align: 'left',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }, {
          max: max,
          name: '2023年',
          position: 'right',
          nameTextStyle: {
            align: 'right',
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(18, 255, 255, 0.5)'
            }
          }
        }],
        series: [{
          name: '2024年',
          type: 'bar',
          data: barData,
          barWidth: 10,
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#1D82FF'
              }, {
                offset: 1,
                color: '#00FFF6'
              }]),
              barBorderRadius: [4, 4, 0, 0]
            }
          }
        }, {
          name: '2023年',
          type: 'line',
          data: yData,
          yAxisIndex: 1,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              lineStyle: {
                color: {
                  // 两端添加透明度,模拟两端线收缩
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(255, 227, 168, 0)' // 0% 处的颜色
                  }, {
                    offset: 0.2,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 0.8,
                    color: 'rgba(255, 227, 168, 1)' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255, 227, 168, 0)'
                  }]
                },
                shadowColor: 'rgba(255, 120, 0, 1)',
                shadowBlur: 8
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(197, 106, 255, 0.6)'
                }, {
                  offset: 0.6,
                  color: 'rgba(255, 120, 0, 0)'
                }]),
              }
            }
          }
        },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: barData.map((item, index) => {
              return {
                coords: [
                  [index, 0],
                  [index, item - 4]
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [15, 2],
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            z: 999
          },]
      };
      if (option) {
        myChart.setOption(option);
      }
    },
    qkq_jdt() {
      var myChart = echarts.init(document.getElementById('qkq_jdt'));
      //亮色图片
      var uploadedDataURL1 = "/asset/get/s/4CJ7_TCzJkXXblRL.png";
      var uploadedDataURL2 = "/asset/get/s/QekC70YLG_BZZXae.png";


      var baifenbi = [0.333, 0.444, 0.555, 0.777, 0.888, 0.922];
      var grayBar = [1, 1, 1, 1, 1, 1];
      var paiming = [6, 5, 4, 3, 2, 1];
      var zongjine = [2000, 3000, 4000, 5000, 6000, 7000];
      var xingm = ['实际经济指标的目标1', '实际经济指标的目标2', '实际经济指标的目标3', '实际经济指标的目标4', '实际经济指标的目标5', '实际经济指标的目标6'];
      var option = {
        color: ['#61A8FF'], //进度条颜色
        grid: {
          left: '2%',  //如果离左边太远就用这个......
          right: '0%',
          bottom: '-15%',
          top: '5%',
          containLabel: true
        },
        xAxis: [
          {
            show: false,
          },
          //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
          {
            show: false,
          }
        ],
        yAxis: {
          type: 'category',
          axisLabel: {
            show: false, //让Y轴数据不显示
          },
          itemStyle: {},
          axisTick: {
            show: false, //隐藏Y轴刻度
          },
          axisLine: {
            show: false, //隐藏Y轴线段
          },
          data: xingm,
        },
        series: [
          //背景色--------------------我是分割线君------------------------------//
          {
            show: true,
            type: 'bar',
            barGap: '-100%',
            barWidth: '40%', //统计条宽度
            itemStyle: {
              normal: {
                color: 'rgba(56,112,252,0.17)'
              },
            },
            z: 1,
            data: grayBar,
          },
          //蓝条--------------------我是分割线君------------------------------//
          {
            show: true,
            type: 'bar',
            barGap: '-100%',
            barWidth: '40%', //统计条宽度
            itemStyle: {
              normal: {
                color: {
                  type: 'bar',
                  colorStops: [{
                    offset: 0,
                    color: '#39A7FC' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00FBFF' // 100% 处的颜色
                  }],
                  globalCoord: false, // 缺省为 false

                }
              },
            },
            max: 1,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#b73838', //百分比颜色
                },
                position: 'inside',
                //百分比格式
                formatter: function (data) {
                  return (baifenbi[data.dataIndex] * 100).toFixed(1) + '%';
                },
              }
            },
            labelLine: {
              show: false,
            },
            z: 2,
            data: baifenbi,
          },
          //数据条--------------------我是分割线君------------------------------//
          {
            show: true,
            type: 'bar',
            xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
            barGap: '-100%',
            barWidth: '35%', //统计条宽度
            itemStyle: {
              normal: {
                barBorderRadius: 200,
                color: 'rgba(22,203,115,0.05)'
              },
            },
            label: {
              normal: {
                show: true,
                //label 的position位置可以是top bottom left,right,也可以是固定值
                //在这里需要上下统一对齐,所以用固定值
                position: ['0', '-130%'],
                rich: { //富文本
                  white: { //自定义颜色
                    color: '#ffffff',
                  },
                  start1: {
                    backgroundColor: {
                      image: uploadedDataURL1,
                    }
                  },
                  start2: {
                    backgroundColor: { //这里可以添加你想自定义的图片
                      image: uploadedDataURL2,
                    },
                  },
                  green: {
                    color: '#70DDA7',
                  },
                  yellow: {
                    color: '#CCB877',
                  },
                  red: {
                    color: '#BC3C47',
                  },
                  gray: {
                    color: '#727CBA'
                  }
                },
                formatter: function (data) {
                  //富文本固定格式{colorName|这里填你想要写的内容}
                  if (paiming[data.dataIndex] == 1) {
                    return '{start1|}{red|' + paiming[data.dataIndex] + '  ' + xingm[data.dataIndex] + '}' + '                                                           ' + '{white|    经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
                  } else if (paiming[data.dataIndex] == 2) {
                    return '{start1|}{yellow|' + paiming[data.dataIndex] + '  ' + xingm[data.dataIndex] + '}' + '                                                           ' + '{white|    经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
                  } else if (paiming[data.dataIndex] == 3) {
                    return '{start1|}{green|' + paiming[data.dataIndex] + '  ' + xingm[data.dataIndex] + '}' + '                                                           ' + '{white|    经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
                  } else {
                    return '{start2|}{white|' + paiming[data.dataIndex] + '  ' + xingm[data.dataIndex] + '}' + '                                                           ' + '{white|    经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
                  }

                },
              }
            },
            data: zongjine
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: baifenbi.map((item, index) => {
              return {
                coords: [
                  [0, index],
                  [item, index],
                ]
              };
            }),
            effect: {
              show: true,
              period: 2.5,
              trailLength: 0.5, //控制拖尾长度
              symbolSize: [15, 8],
              symbol: this.$store.state.common.echarts_baseStreamer,
              loop: true,
              color: '#fff' //流光颜色
            },
            lineStyle: {
              width: 0,
              opacity: 0.6,
              curveness: 0
            },
            z: 99
          },
        ]
      };

      if (option) {
        myChart.setOption(option);
      }
    },

    qkq_kxt() {
      var myChart = echarts.init(document.getElementById('qkq_kxt'));
      var option = {
        legend: {
          // right: '30',
          data: ['今年', '去年'],
          textStyle: {
            color: "#fff",
            fontSize: 16
          },
        },
        grid: {
          top: '14%',
          bottom: '10%',
          right: '30',
          left: '30'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (p) {
            if (p.seriesType === 'line') return '';
            return `${p[0].name}<br/>${p[0].marker}计划：${p[0].value[1] + "-" + p[0].value[2]}万元<br/>${p[0].marker}实际：${p[0].value[3] + "-" + p[0].value[4]}万元`
          }
        },
        xAxis: {
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(4, 38, 65, 0.5)'
            }
          },
          data: [
            '一月',
            '二月',
            '三月',
            '四月',
            '五月',
            '六月',
            '七月',
            '八月',
            '九月',
            '十月',
            '十一月',
            '十二月'

          ]
        },

        yAxis: {
          type: 'value',
          scale: true,
          max: 12,
          min: 0,
          interval: 4,
          axisLabel: {
            color: 'rgba(204, 234, 255, 1)'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(4, 38, 65, 0.5)'
            }
          },

        },
        series: [
          {
            name: "今年",
            type: 'candlestick',
            itemStyle: {
              color: '#1D82FF',
              color0: '#1D82FF',
              borderColor: '#1D82FF',
              borderColor0: '#1D82FF'
            },
            data: [
              [0, 0, 0, 0],
              [0, 0, 0, 0],
              [3, 4, 2, 5],
              [4, 6, 3, 7],
              [7, 9, 5, 10],
              [5, 8, 4, 9],
              [6, 6.5, 5, 7.5],
              [0, 0, 0, 0],
              [6, 9, 5, 10],
              [4, 6, 3, 7],
              [5, 7, 4, 8],
              [6, 9, 5, 10],
              [6.5, 9, 5.5, 10],

            ]
          },
          {
            name: '去年',
            type: 'line',
            smooth: true,
            data: [0, 0, 3, 6, 7, 5, 6, 0, 6, 4, 7, 9, 6.5],
            itemStyle: {
              color: '#ff0000'
            },
            lineStyle: {
              color: '#ff0000'
            },
            z: 10
          }
        ]
      };

      if (option) {
        myChart.setOption(option);
      }
    },


    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const date = now.getDate();
      const day = now.getDay();
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();

      const formattedMonth = month < 10 ? `0${month}` : month;
      const formattedDate = date < 10 ? `0${date}` : date;
      const formattedHour = hour < 10 ? `0${hour}` : hour;
      const formattedMinute = minute < 10 ? `0${minute}` : minute;
      const formattedSecond = second < 10 ? `0${second}` : second;

      this.currentTime =
        `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
    },


  }
};


// import '@/assets/images/leftnav.js';
$(function () {
  var Accordion = function (el, multiple) {
    this.el = el || {};
    this.multiple = multiple || false;

    // Variables privadas
    var links = this.el.find('.link');
    // Evento
    links.on('click', {
      el: this.el,
      multiple: this.multiple
    }, this.dropdown)
  };

  Accordion.prototype.dropdown = function (e) {
    var $el = e.data.el;
    let $this = $(this);
    let $next = $this.next();

    $next.slideToggle();
    $this.parent().toggleClass('open');

    if (!e.data.multiple) {
      $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
    }
  };

  var accordion = new Accordion($('#accordion'), false);
  $('.submenu li').click(function () {
    $(this).addClass('current').siblings('li').removeClass('current');
  });
});
</script>

<style>
/* 添加你的CSS样式 */
</style>