图表

config/index.js

@@ -13,7 +13,7 @@ module.exports = {
         proxyTable: {},
 
         // Various Dev Server settings
-        host: '192.168.100.252', // can be overwritten by process.env.HOST
+        host: '127.0.0.1', // can be overwritten by process.env.HOST
         port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
         autoOpenBrowser: false,
         errorOverlay: true,

src/views/cockpitNew/jsyd.vue

@@ -1,6 +1,82 @@
 <template>
   <div class="jsyd">
-    123123
+    <div class="title">建设用地规划指标</div>
+    <div class="content">
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>在变控规</p>
+          <span>66</span>个
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>已入库控规</p>
+          <span>66</span>个
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>建设用地总指标</p>
+          <span>66</span>公顷
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>新增建设用地</p>
+          <span>66</span>公顷
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>已使用指标</p>
+          <span>66</span>公顷
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>剩余指标
+
+          </p>
+          <span>66</span>公顷
+
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -30,10 +106,10 @@ export default {
   deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
-<style  scoped>
+<style  lang="scss"  scoped>
 .jsyd {
   border-width: 0px;
-  position: absolute;
+  position: relative;
   left: 9px;
   top: 20px;
   width: 535px;
@@ -46,4 +122,81 @@ export default {
   -webkit-box-shadow: none;
   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: #00FFFF;
+  padding: 2%;
+}
+
+.content {
+  // border: #00FFFF 1px solid;
+  position: absolute;
+  left: 5%;
+  width: 400px;
+  height: 190px;
+  top: 18%;
+}
+
+.item {
+  width: 45%;
+  height: 30%;
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+
+}
+
+.icon {
+  width: 50px;
+  padding: 1.5%;
+  border-radius: 8px;
+  background-color: rgba(104, 244, 251, 0.215686);
+  display: inline-block;
+  height: 50px
+}
+
+.icon2 {
+  background: no-repeat 50%;
+  background-image: url("/static/images/cockpitNew/u296.svg");
+  /* 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;
+
+}
 </style>

src/views/cockpitNew/tdsc.vue

@@ -1,7 +1,37 @@
 <template>
-<div class="tdsc">
-    1
-</div>
+  <div class="tdsc">
+    <div class="title">建设用地规划指标</div>
+    <div class="content">
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>在变控规</p>
+          <span>66</span>个
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon2">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>已入库控规 </p>
+          <span>66</span>个
+
+        </div>
+      </div>
+
+    </div>
+    <div id="echart" style="width: 280px; height: 230px;">
+
+    </div>
+  </div>
 </template>
 
 <script>
@@ -17,11 +47,276 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
   beforeCreate() { }, //生命周期 - 创建之前
-  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
-  mounted() { }, //生命周期 - 挂在完成
+  methods: {
+    getRenKou() {
+      var dom = document.getElementById('echart');
+      var myChart = window.echarts.init(dom);
+
+      let data = [
+        { name: '商业', value: 30 },
+        { name: '租赁', value: 40 },
+        { name: '自用', value: 50 },
+        { name: '办公', value: 20 },
+        // { name: '餐饮', value: 16 },
+        // { name: '住宿', value: 24 },
+      ]
+      for (var i = 0; i < data.length; i++) {
+        for (var j = i + 1; j < data.length; j++) {
+          //如果第一个比第二个大，就交换他们两个位置
+          if (data[i].value < data[j].value) {
+            var temp = data[i];
+            data[i] = data[j];
+            data[j] = temp;
+          }
+        }
+      }
+      let pm = []
+      for (var i = 0; i < data.length; i++) {
+        let k = i + 1
+        pm.push('NO.' + k)
+      }
+      data.forEach(function (value, index, obj) {
+        value.pm = pm[index]
+      })
+      console.log('ssss', data)
+      const colors = ['#FF0000', '#00FF00', '#FFFF00', '#FF00FF', '#00FFFF', '#0000FF']
+      const chartData = data.map((item, index) => ({
+        value: item.value,
+        name: item.name,
+        pm: item.pm,
+        itemStyle: {
+          shadowBlur: 20,
+          shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
+          shadowOffsetx: 25,
+          shadowOffsety: 20,
+          color: colors[index % colors.length],
+        },
+      }))
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0)
+      const gap = (1 * sum) / 100
+      const pieData1 = []
+      const gapData = {
+        name: '',
+        value: gap,
+        itemStyle: {
+          color: 'transparent',
+        },
+      }
+      let totalRatio = []
+      // let totalPercent = 0
+      for (let i = 0; i < chartData.length; i++) {
+        // 计算占比
+        // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
+        // 累加占比到总占比中
+        // totalRatio.push(ratio*100)
+        let ratio = (chartData[i].value / sum) * 100
+        let percent = Math.round(ratio)
+        totalRatio.push(percent)
+        // totalPercent += percent
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        })
+        pieData1.push(gapData)
+      }
+      // 补充最后一项占比百分比保证之和为100%
+      // totalRatio[0].value += 100 - totalPercent
+      let option = {
+        backgroundColor: 'rgba(1,1,1,0)',
+        title: {
+          show: true,
+          text: sum,
+          subtext: '总建筑面积平方米',
+          x: '49%',
+          y: '32%',
+          itemGap: 6,
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+            fontWeight: '400',
+            lineHeight: 6,
+          },
+          subtextStyle: {
+            color: '#fff',
+            fontSize: 8,
+            fontWeight: '400',
+            lineHeight: 6,
+          },
+          textAlign: 'center',
+        },
+
+        legend: {
+          orient: 'vertical',
+          icon: 'circle',
+          textStyle: {
+            color: '#f2f2f2',
+            fontSize: '12px',
+          },
+          top: '70%',
+          left: '40%',
+          itemGap: 14,
+          itemHeight: 14,
+          itemWidth: 14,
+          data: chartData,
+          formatter: function (name) {
+            const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
+            if (selectedItem) {
+              const { value } = selectedItem;
+              const { pm } = selectedItem;
+              console.log('dddd', selectedItem)
+              const p = ((value / sum) * 100).toFixed(2);
+              const area = `${value}m²`;
+              return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
+            } else {
+              return name;
+            }
+          },
+          textStyle: {
+            rich: {
+              icon: {
+                color: colors
+              },
+              name: {
+                color: '#f2f2f2'
+              },
+              percent: {
+                color: '#f2f2f2'
+              },
+              area: {
+                color: '#f2f2f2'
+              }
+            }
+          }
+        },
+        series: [
+          // 中间圆环
+          {
+            name: '',
+            type: 'pie',
+            roundCap: true,
+            radius: ['36%', '52%'],
+            center: ['50%', '35%'],
+            data: pieData1,
+            labelLine: {
+              length: 8,
+              length2: 16,
+              lineStyle: {
+                width: 1,
+              },
+            },
+            label: {
+              show: false,
+              fontFamily: 'ysbth',
+              position: 'outside',
+              padding: [0, -4, 0, -4],
+              formatter(params) {
+                if (params.name === '') {
+                  return ''
+                }
+                return `${params.percent.toFixed(0)}% `
+              },
+              color: '#fff',
+              fontSize: '14px',
+              lineHeight: 10,
+            },
+            emphasis: {
+              // 鼠标移入时显示
+              label: {
+                show: true,
+              },
+            },
+          },
+          // 最里面圆环
+          {
+            type: 'pie',
+            radius: ['28%', '30%'],
+            center: ['50%', '35%'],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              color: '#3BC5EF',
+            },
+          },
+          // 最里面圆环内的背景圆
+          {
+            name: '',
+            type: 'pie',
+            startAngle: 90,
+            radius: '28%',
+            animation: false,
+            hoverAnimation: false,
+            center: ['50%', '35%'],
+            itemStyle: {
+              labelLine: {
+                show: false,
+              },
+              color: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: 'rgba(50,171,241, 0)',
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(50,171,241, .4)',
+                  },
+                  {
+                    offset: 0,
+                    color: 'rgba(55,70,130, 0)',
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+              shadowBlur: 60,
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+          // 最外面的圆环
+          {
+            type: 'pie',
+            color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
+            radius: ['53%', '54%'],
+            center: ['50%', '35%'],
+            label: {
+              show: false,
+            },
+            select: {
+              display: false,
+            },
+            tooltip: {
+              show: false,
+            },
+            data: totalRatio,
+          },
+        ],
+      }
+
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.getRenKou();
+  },
   beforeUpdate() { }, //生命周期 - 更新之前
   updated() { }, //生命周期 - 更新之后
   beforeDestroy() { }, //生命周期 - 销毁之前
@@ -30,21 +325,91 @@ export default {
   deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
-<style  scoped>
+<style  lang="scss"  scoped>
 .tdsc {
-    border-width: 0px;
-    position: absolute;
-    left: 9px;
-    top: 35%;
-    width: 534px;
-    height: 260px;
-    border-width: 0px;
-    background: inherit;
-    background-color: rgba(3, 25, 67, 0.698039215686274);
-    border: none;
-    border-radius: 0px;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
+  border-width: 0px;
+  position: absolute;
+  left: 9px;
+  top: 35%;
+  width: 534px;
+  height: 260px;
+  border-width: 0px;
+  background: inherit;
+  background-color: rgba(3, 25, 67, 0.698039215686274);
+  border: none;
+  border-radius: 0px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  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: #00FFFF;
+  padding: 2%;
+}
+
+.content {
+  // border: #00FFFF 1px solid;
+  position: absolute;
+  left: 5%;
+  width: 400px;
+  height: 190px;
+  top: 18%;
+}
+
+.item {
+  width: 45%;
+  height: 30%;
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+
+}
+
+.icon {
+  width: 50px;
+  padding: 1.5%;
+  border-radius: 8px;
+  background-color: rgba(104, 244, 251, 0.215686);
+  display: inline-block;
+  height: 50px
+}
+
+.icon2 {
+  background: no-repeat 50%;
+  background-image: url("/static/images/cockpitNew/u296.svg");
+  /* 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;
+  }
 }
 </style>