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

<template>
  <div class="bjxm">
    <div class="title">
      <div class="icon"></div>
      <span>报建项目</span>
    </div>
    <div class="content">
      <div class="item">
        <div class="icon">
          <div class="icon_zxkg"></div>
        </div>
        <div class="text">
          <p>报建数量</p>
          <span>66</span>个
        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_zxkg"></div>
        </div>
        <div class="text">
          <p>用地面积</p>
          <span>6666</span>平方千米
        </div>
      </div>

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

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    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 VALUE = [210.9, 260.8, 204.2, 504.9, 740.5]
      let option = {
        //你的代码
        backgroundColor: 'rgba(17, 42, 62, 0)',//"#012366",
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            const item = params[1]
            return item.name + "\n" + item.value;
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['崖州区', '天崖区', '吉阳区', '海棠区', '育才区'],
          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: 1200,
            interval: 200,
            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: 1200,
            interval: 200,
            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: VALUE
          },
          {
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#FFCC64'  // 折线的颜色
              }
            },
            data: VALUE,
          },
        ]
      };
      myChart.setOption(option);
    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() { }, //生命周期 - 挂载之前
  mounted() {
    this.init_bjxm_echart();
  }, //生命周期 - 挂在完成
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroy() { }, //生命周期 - 销毁完成
  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
  deactivated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style lang="scss" scoped>
.bjxm {
  border-width: 0px;
  position: absolute;
  width: 385px;
  height: 310px;
  top: 67%;
  left: 30rem;
  background: inherit;
  border: none;
  border-radius: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  z-index: 100;
}

.title {
  border-width: 0px;
  width: 100%;
  height: 40px;
  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  // font-weight: 700;
  // font-style: normal;
  // color: #fff;
  // padding: 2%;
  background: no-repeat;
  background-image: url("/static/images/overview/标题框.png");

  .icon {
    background: no-repeat;

    background-image: url("/static/images/overview/icon_标题框装饰.png");
    display: inline-block;
    width: 30px;
    height: 30px;
    background-position: 14px 7px;
  }

  span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    bottom: 0.5rem;
  }
}

.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: 23.5rem;
  height: 11rem;
}
</style>