real3d-portalsite/src/views/cockpit/bjxm.vue

<template>
  <div class="bjxm">
    <div class="title">
      <Title :title="'报健项目'"></Title>

      <div class="selectTab">
        <el-select v-model="left_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content">
      <div class="item">
        <div class="icon">
          <div class="icon_zxkg"></div>
        </div>
        <div class="text">
          <p>报建数量</p>
          <span>{{ left_value == 'csbj' ? sdata.sj_number : 0 }}</span>个
        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_zxkg"></div>
        </div>
        <div class="text">
          <p>用地面积</p>
          <span>0</span>平方千米
        </div>
      </div>

      <div id="bjxm_echart"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { QueryOne, QueryList } from "../../api/cockpitNew";
import Title from './common/Title.vue';

export default {
  components: { Title },
  data() {
    return {
      sdata: {},
      left_value: 'csbj',
      options: [
        { value: "csbj", label: "城市报建" },
        { value: "szbj", label: "私宅报建" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeChartsLeft() {
      this.init_bjxm_echart_info();
    },
    async init_info(params) {
      const that = this;
      let obj = {
        jscType: 'jsc_bjxm_csbj_hz',
        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
        endTime: params ? params.endTime : store.state.cockpit_date[1],
        id: params ? params.id : '4602'
      };
      let res = await QueryOne(obj);
      this.sdata = res.data;
    },
    async init_bjxm_echart_info(params) {
      const that = this;
      let obj = {
        jscType: 'jsc_bjxm_csbj_yffl',
        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
        endTime: params ? params.endTime : store.state.cockpit_date[1],
        id: params ? params.id : '4602'
      };
      let data = await QueryList(obj);
      let xAxis = [];
      let bat_data = [];
      let line_data = [];

      data.data.forEach(element => {

        xAxis.push(element.yf);
        bat_data.push(element.sj_mj);
        line_data.push(element.sj_number);


      });
      store.state.cockpit_bjxm.csbj.csbj_echart = {
        xAxis: xAxis,
        bat_data: bat_data,
        line_data: line_data,

      }
      this.init_bjxm_echart();

    },
    init_bjxm_echart() {
      var myChart = echarts.init(document.getElementById("bjxm_echart"));
      // 柱状图的宽度，y是x的一半
      const offsetX = 10
      const offsetY = 5

      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - offsetX, shape.y - offsetY]
          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
          const c3 = [xAxisPoint[0], xAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
          const c4 = [shape.x + offsetX, shape.y - offsetY]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + offsetX, shape.y - offsetY]
          const c3 = [shape.x, shape.y - offsetX]
          const c4 = [shape.x - offsetX, shape.y - offsetY]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 注册三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
      // 数据
      const xAxis = store.state.cockpit_bjxm.csbj.csbj_echart.xAxis
      const bat_data = store.state.cockpit_bjxm.csbj.csbj_echart.bat_data
      const line_data = this.left_value == 'csbj' ? store.state.cockpit_bjxm.csbj.csbj_echart.line_data : [0, 0, 0, 0, 0, 0]

      let option = {
        //你的代码
        backgroundColor: 'rgba(17, 42, 62, 0)',//"#012366",
        tooltip: {
          show:false,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: function (params) {
          //   const item = params[1]
          //   return item.name + "\n" + item.value;
          // }
        },
        grid: {
          left: '1%',
          right: '10%',
          bottom: 10,
          top: 10,
          containLabel: true
        },
        xAxis: {
          name: '月',
          nameGap: 2,
          type: 'category',
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: '#BCD3E5'
            }
          },
          // offset: 25,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#BCD3E5'
            }
          },
          axisLabel: {
            show: true,
            fontSize: 12,
          },
        },
        yAxis: [
          // {
          //   min: 0,
          //   max: 20,
          //   interval: 5,
          //   type: 'value',
          //   name: '用地面积(km2)',
          //   axisLine: {
          //     show: false,
          //     lineStyle: {
          //       color: '#BCD3E5'
          //     }
          //   },
          //   splitLine: {
          //     show: false,
          //     lineStyle: {
          //       type: "dashed",
          //       color: "rgba(255,255,255,0.1)"
          //     },
          //   },
          //   axisTick: {
          //     show: false
          //   },
          //   axisLabel: {
          //     show: true,
          //     fontSize: 12,

          //   },
          //   boundaryGap: ['20%', '20%']
          // },
          {
            min: 0,
            max: 20,
            interval: 5,
            name: '项目数(个)',
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#BCD3E5'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(255,255,255,0.1)"
              },
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: 12,

            },
            boundaryGap: ['20%', '20%']
          },],
        series: [
          // {
          //   type: 'custom',
          //   renderItem: (params, api) => {
          //     const location = api.coord([api.value(0), api.value(1)])
          //     var color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: 'rgba(33,101,140,0.5)'

          //     },
          //     {
          //       offset: 0.8,
          //       color: 'rgba(33,101,140,0.5)'

          //     }
          //     ])
          //     return {
          //       type: 'group',
          //       children: [
          //         {
          //           type: 'CubeLeft',
          //           shape: {
          //             api,
          //             xValue: api.value(0),
          //             yValue: api.value(1),
          //             x: location[0],
          //             y: location[1],
          //             xAxisPoint: api.coord([api.value(0), 0])
          //           },
          //           style: {
          //             fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //               offset: 0,
          //               color: 'rgba(34, 129, 209, 0.8)'
          //             },
          //             {
          //               offset: 0.8,
          //               color: 'rgba(34, 129, 209, 0.8)'


          //             }
          //             ])
          //           }
          //         },
          //         {
          //           type: 'CubeRight',
          //           shape: {
          //             api,
          //             xValue: api.value(0),
          //             yValue: api.value(1),
          //             x: location[0],
          //             y: location[1],
          //             xAxisPoint: api.coord([api.value(0), 0])
          //           },
          //           style: {
          //             fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //               offset: 0,
          //               color: 'rgba(97, 173, 237, 0.8)'
          //             },
          //             {
          //               offset: 0.8,
          //               color: 'rgba(97, 173, 237, 0.8)'
          //             }
          //             ])
          //           }
          //         }, {
          //           type: 'CubeTop',
          //           shape: {
          //             api,
          //             xValue: api.value(0),
          //             yValue: api.value(1),
          //             x: location[0],
          //             y: location[1],
          //             xAxisPoint: api.coord([api.value(0), 0])
          //           },
          //           style: {
          //             fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //               offset: 0,
          //               color: 'rgba(60, 167, 255, 1)'

          //             },
          //             {
          //               offset: 1,
          //               color: 'rgba(135, 200, 255, 1)'

          //             }
          //             ])
          //           }
          //         }]
          //     }
          //   },

          //   data: bat_data
          // },
          {
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#FFCC64'  // 折线的颜色
              }
            },
            data: line_data,
          },
        ]
      };
      myChart.setOption(option);
    },

  },
  beforeCreate() { }, //生命周期 - 创建之前
  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() { }, //生命周期 - 挂载之前
  mounted() {
    this.$nextTick((res) => {
      this.init_info()
      this.init_bjxm_echart_info();
    })
  }, //生命周期 - 挂在完成
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroy() { }, //生命周期 - 销毁完成
  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
  deactivated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style lang="scss" scoped>
.bjxm {
  position: absolute;
  width: 22vw;
  border: 1px solid red;
  height: 17rem;
  top: 38.5rem;
  left: 27.5vw;
  border-radius: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  z-index: 100;
}


.selectTab {
  position: absolute;
  top: 3px;
  right: 22px;
  z-index: 100;

  /deep/ .el-input__inner {
    // padding-right: 30px;
    width: 128px !important;
    height: 24px !important;
    line-height: 24px;
    padding-left: 22px;
    padding-right: 0px;
    font-size: 12px;
    color: #bcd3e5;
    border: none;
    // background: url("/static/images/overview/selectBg.png") no-repeat !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-size: 100% 100%;
  }

  /deep/ .el-input__icon {
    line-height: 1;
  }

  /deep/ .el-input__suffix {
    right: -2px;
  }

  /deep/ .el-select-dropdown__list {
    color: #bcd3e5 !important;
    background: linear-gradient(180deg,
        rgba(3, 115, 177, 0) 11%,
        rgba(3, 115, 177, 0.48) 100%);
    border-image: linear-gradient(360deg,
        rgba(75, 185, 250, 0.2),
        rgba(75, 185, 250, 0.05)) 1 1 !important;
    border: none;
  }

  /deep/ .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgba(87, 163, 226, 0.5);
  }

  /deep/ .el-select-dropdown__item {
    color: #ecf6ff;
  }
}

/deep/ {
  .el-select-dropdown__item.selected {
    color: #409eff;
  }
}

/deep/ .el-popper[x-placement^="bottom"] {
  margin-top: 12px;
  background: #163253;
}

/deep/ .el-select-dropdown {
  border: none;
}

/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #163253;
  top: 0;
}

.content {
  position: absolute;
  left: 5%;
  width: 400px;
  height: 220px;
  top: 13%;
}

.item {
  width: 45%;
  height: 30%;
  display: inline-block;
}

.icon {
  width: 50px;
  padding: 1.5%;
  border-radius: 8px;
  display: inline-block;
  height: 50px;
}

.icon_zxkg {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icongdbh0.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;
}

.text {
  display: inline-block;
  // border: #00FFFF 1px solid;
  width: 100px;

  p {
    font-kerning: normal;
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #ffffff;
  }

  span {
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: 700;
    font-style: normal;
    color: #68f4fb;
  }
}

.value {
  display: inline-block;

  // border: #00FFFF 1px solid;
  width: 50px;
}

#bjxm_echart {
  position: relative;
  top: 0;
  width: 20.5rem;
  height: 10rem;
}

.title {
  width: 22vw;
  background-size: 100% 89%;
}
</style>