|
|
@@ -0,0 +1,385 @@
|
|
|
+<!--
|
|
|
+ * @Author: liukeke
|
|
|
+ * @Date: 2024-06-08 12:51:03
|
|
|
+ * @LastEditTime: 2024-06-08 16:59:26
|
|
|
+ * @LastEditors: liukeke
|
|
|
+ * @FilePath: \real3d-portalsite\src\views\cockpitNew1\bjxm.vue
|
|
|
+ * @Description:
|
|
|
+-->
|
|
|
+<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"));
|
|
|
+
|
|
|
+ var dataList = [
|
|
|
+ {
|
|
|
+ value: 31,
|
|
|
+ name: "城市报建"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 43,
|
|
|
+ name: "私宅报建"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ var color2 = [
|
|
|
+ {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#FC8053"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#F2CAA4"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#5583e7"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#36dddb"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#f888b1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#fbe6ee"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ var dataAll = 0;
|
|
|
+ dataList.forEach((item, index) => {
|
|
|
+ item.itemStyle = color2[index];
|
|
|
+ dataAll += item.value;
|
|
|
+ });
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ backgroundColor: "rgba(0,0,0,0)",
|
|
|
+ title: {
|
|
|
+ text: "报建数量",
|
|
|
+ x:'20%',
|
|
|
+ textStyle: {
|
|
|
+ // rich: {
|
|
|
+ fontSize:14,
|
|
|
+ color: "#fff",
|
|
|
+ fontWeight: "bold",
|
|
|
+ // align: "35%"
|
|
|
+
|
|
|
+ // a: {
|
|
|
+ // color: "#fff",
|
|
|
+ // fontSize: 42,
|
|
|
+ // align: "35%",
|
|
|
+ // },
|
|
|
+ // b: {
|
|
|
+ // fontSize: 20,
|
|
|
+ // color: "#fff",
|
|
|
+ // fontWeight: "bold",
|
|
|
+ // align: "35%",
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ x: "20%",
|
|
|
+ y: "45%"
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ right: "10%",
|
|
|
+ top: "center",
|
|
|
+ data: ["城市报建", "私宅报建"],
|
|
|
+ icon: "rect", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
|
|
|
+ itemWidth: 10, // 设置宽度
|
|
|
+ itemHeight: 10, // 设置高度
|
|
|
+
|
|
|
+ itemGap: 10, // 设置间距
|
|
|
+ textStyle: {
|
|
|
+ //图例文字的样式
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ graphic: [
|
|
|
+ {
|
|
|
+ type: "group",
|
|
|
+ top: "middle",
|
|
|
+ left: "center",
|
|
|
+ id: "data",
|
|
|
+ children: [
|
|
|
+ // {
|
|
|
+ // type: "text",
|
|
|
+ // id: "current",
|
|
|
+ // top: 40,
|
|
|
+ // style: {
|
|
|
+ // text: dataAll,
|
|
|
+ // font: 'bolder 36px "Microsoft YaHei", sans-serif',
|
|
|
+ // fill: "#fff",
|
|
|
+ // textAlign: "center"
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "text",
|
|
|
+ // id: "all",
|
|
|
+ // top: 80,
|
|
|
+ // left:'10%',
|
|
|
+ // style: {
|
|
|
+ // text: "报建数量",
|
|
|
+ // font: 'bolder 14px "Microsoft YaHei", sans-serif',
|
|
|
+ // fill: "#fff",
|
|
|
+ // // textAlign: "center"
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "轮次",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["45%", "80%"],
|
|
|
+ center: ["30%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ position: "inner", // 数值显示在内部
|
|
|
+ formatter: params => {
|
|
|
+ console.log(params);
|
|
|
+ return `${params.name}` + ":" + +params.value + "个";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ //图例文字的样式
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: "bold"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ length: 48
|
|
|
+ },
|
|
|
+ data: dataList
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: "20%",
|
|
|
+ // right: "40%",
|
|
|
+ // bottom: "10%",
|
|
|
+ top: "16%",
|
|
|
+ containLabel: true
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ 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: relative;
|
|
|
+ width: 407px;
|
|
|
+ height: 310px;
|
|
|
+ background: inherit;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0px;
|
|
|
+ -webkit-box-shadow: none;
|
|
|
+ left: 1080px;
|
|
|
+ top: 270px;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 20.5rem;
|
|
|
+ height: 10rem;
|
|
|
+}
|
|
|
+</style>
|
zpf