耕地保护

src/components/echartsTemplate/highPie.vue

@@ -0,0 +1,403 @@
+<template>
+  <div id="pie_high" ref="echart"></div>
+</template>
+
+<script>
+import { cloneDeep } from "lodash";
+import Highcharts from "highcharts/highstock";
+import HighchartsMore from "highcharts/highcharts-more";
+import HighchartsDrilldown from "highcharts/modules/drilldown";
+import Highcharts3D from "highcharts/highcharts-3d";
+HighchartsMore(Highcharts);
+HighchartsDrilldown(Highcharts);
+Highcharts3D(Highcharts);
+
+let colors = [
+  ["#2281D1", "#62ADED", "#92CDFF", "#229AFF"],
+  ["#B7750D", "#F9B447", "#CC820C", "#FFCB78"],
+  ["#209742", "#6EDC8D", "#2EC057", "#A5FFBE"],
+];
+let option = {
+  grid: {
+    left: "15%",
+    top: "10%",
+    right: "5%",
+    bottom: "20%",
+  },
+  // // 设置鼠标移入的提示，默认显示
+  // tooltip: {},
+  // // 设置图例
+  // legend: {
+  //   textStyle: {
+  //     color: "#999",
+  //   },
+  // },
+  // 设置x轴
+  xAxis: {
+    data: [],
+    // 显示x轴
+    axisLine: {
+      show: false,
+    },
+    // 设置x轴的颜色和偏移量
+    axisLabel: {
+      color: "#fff",
+      rotate: 0,
+    },
+    // 不显示x轴刻度
+    axisTick: {
+      show: false,
+    },
+  },
+  // 设置y轴
+  yAxis: {
+    // 显示y轴
+    axisLine: {
+      show: false,
+    },
+    // interval: 30,
+    // 设置y轴的颜色
+    axisLabel: {
+      color: "#fff",
+    },
+    // 不显示分隔线
+    splitLine: {
+      show: false,
+    },
+    splitLine: {
+      show: true,
+      // y-line
+      lineStyle: {
+        // width: 1,
+        type: "dashed",
+        color: "rgba(255, 255, 255, 0.15)",
+      },
+    },
+  },
+  // 表示不同系列的列表
+  series: [],
+};
+
+// 柱体
+let seriesItem = {
+  name: "",
+  type: "custom",
+  renderItem: (params, api) => {
+    const location = api.coord([api.value(0), api.value(1)]);
+    return {
+      type: "group",
+      x: (params.seriesIndex - 1) * 20,
+      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: colors[params.seriesIndex][0],
+            //   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //     {
+            //       offset: 0,
+            //       color: "rgba(0, 164, 255, 1)",
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: "rgba(0, 239, 255, 0)", //'#337CEB',
+            //     },
+            //   ]),
+          },
+        },
+        {
+          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: colors[params.seriesIndex][1],
+            //   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //     {
+            //       offset: 0,
+            //       color: "rgba(0, 144, 255, 1)",
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: "rgba(0, 159, 253, 0)", //'#1A57B7',
+            //     },
+            //   ]),
+          },
+        },
+        {
+          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: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: colors[params.seriesIndex][2],
+              },
+              {
+                offset: 1,
+                color: colors[params.seriesIndex][3],
+              },
+            ]),
+          },
+        },
+      ],
+    };
+  },
+  data: [],
+};
+
+export default {
+  name: "sankey_echart",
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    drawCube() {
+      const offsetX = 8;
+      const offsetY = 4;
+      // 绘制左侧面
+      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);
+    },
+    setOptions(
+      data = [
+        ["货1", 23],
+        ["客1", 18],
+        ["货2", 23],
+        ["客2", 18],
+      ]
+    ) {
+      let option = this.options3dPie(data);
+      new Highcharts.Chart(this.$refs.echart, option);
+    },
+    options3d(v) {
+      option.xAxis.data = v.xData;
+      v.yData.forEach((item, k) => {
+        let o = cloneDeep(seriesItem); // JSON.parse(JSON.stringify(seriesItem));
+        // o.name = v.legend[k];
+
+        o.data = item;
+        if (v.interval) {
+          option.xAxis.axisLabel.interval = 0;
+          option.xAxis.axisLabel.rotate = 0;
+        }
+        option.series.push(o);
+      });
+      // v.areaStyle ? (option.series[0].areaStyle = v.areaStyle) : null;
+
+      return option;
+    },
+
+    options3dPie(busData) {
+      let option = {
+        chart: {
+          type: "pie",
+          options3d: {
+            enabled: true,
+            alpha: 60,
+            marginLeft: 10,
+          },
+          marginRight: 210,
+          backgroundColor: "rgba(255,255,255,0)",
+          // plotBackgroundImage: require( '../../assets/images/photoeffect.png')
+        },
+        legend: {
+          show: false,
+          // 不展示图例
+          enabled: true,
+          align: "center",
+          verticalAlign: "middle",
+          layout: "horizontal",
+          x: 50,
+          y: 10,
+          // width: 220,
+          useHTML: true,
+          itemMarginTop: 10,
+          squareSymbol: false,
+          symbolWidth: 4,
+          symbolHeight: 11,
+          symbolRadius: 0,
+          // itemWidth:100,
+          itemStyle: {
+            color: "#FEFFFF",
+            cursor: "pointer",
+            fontSize: "10px",
+            // fontWeight: "bold"
+          },
+          // layout: 'vertical',
+          labelFormatter: function () {
+            return `<span style="display: inline-block;vertical-align: top;width:20px;fontFamily: siyuanheiti;color:#fff;">${this.name}</span> 
+                <span style="display: inline-block;vertical-align: top;width:50px;text-align:right;font-size: 14px;font-family: 'pangmenzhengdao';color: #fff;">${this.y}</span><br/>`;
+          },
+        },
+        title: {
+          // text: `${this.carProportionData.total || 0} <br />总数`,
+          floating: true,
+          x: -142,
+          y: 190,
+          style: {
+            color: "#fff",
+            fontWeight: "bold",
+          },
+        },
+        tooltip: {
+          enabled: true,
+          style: {
+            color: "#fff",
+            fontSize: 18,
+          },
+          useHTML: true,
+          headerFormat: "",
+          pointFormat:
+            '<span style="display:inline-block;width:10px;height:10px;border-radius: 50%;background: {point.color};margin-right:10px"></span>{point.name} {point.y}',
+          backgroundColor: "rgba(0,0,0,0.3)",
+        },
+        credits: {
+          enabled: false,
+        },
+        plotOptions: {
+          pie: {
+            innerSize: 55,
+            size: 75,
+            allowPointSelect: true,
+            cursor: "pointer",
+            depth: 20,
+            showInLegend: true,
+            // slicedOffset: 70,
+            point: {
+              // 每个扇区是数据点对象，所以事件应该写在 point 下面
+              events: {
+                // 鼠标滑过是，突出当前扇区
+                mouseOver: function () {
+                  this.slice();
+                },
+                // 鼠标移出时，收回突出显示
+                mouseOut: function () {
+                  this.slice();
+                },
+                // 默认是点击突出，这里屏蔽掉
+                click: function () {
+                  return false;
+                },
+              },
+            },
+          },
+        },
+        series: [
+          {
+            dataLabels: {
+              enabled: false,
+            },
+            name: "",
+            colors: [
+              "#4DB5FF",
+              "#45FAF7",
+              "#F49759",
+              "#F5F465",
+              "#FFFBEE",
+              "#A87EFF",
+            ],
+            data:
+              busData && busData.length
+                ? busData
+                : [{ name: "暂无数据", y: 100, num: 0 }],
+          },
+        ],
+      };
+      return option;
+    },
+  },
+  mounted() {
+    // console.log(document.getElementById("pie_high"));
+    // this.setOptions();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sankey_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/cockpitNew1/gdbh.vue

@@ -1,411 +1,141 @@
 <template>
-    <div class="gdbh">
-        <div class="box_gdbh">
-            <div class="title">耕地保护</div>
-            <div class="centent">
-                <div class="item">
-                    <p class="text">
-                        <span>·</span>
-                        地保有量
-                        <span>354.56</span>
-                        KM2
-                    </p>
-                    <p>
-                        <span>·</span>
-                        永久基本农田
-                        <span>354.56</span>
-                        KM2
-                    </p>
-                </div>
-                <div class="item">
-                    <p class="text">
-                        <span>·</span>
-                        地保有量
-                        <span>354.56</span>
-                        KM2
-                    </p>
-                    <p>
-                        <span>·</span>
-                        永久基本农田
-                        <span>354.56</span>
-                        KM2
-                    </p>
-                </div>
-            </div>
-            <div id="gdbh_echart">
-
-            </div>
+  <borderTemplate titleName="耕地保护" class="gdbh">
+    <div class="content">
+      <div class="item" v-for="(sd, i) in sdlist" :key="i">
+        <div class="icon" :class="`icongdbh${i}`"></div>
+        <div class="text">
+          <p>{{ sd.name }}</p>
+          <span class="sdvalue">{{ sd.value || 0 }}</span>
+          <span class="unit">{{ sd.unit }}</span>
         </div>
+      </div>
     </div>
+    <highPie id="gdbh_echart" ref="echartRef"></highPie>
+  </borderTemplate>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import borderTemplate from "./borderTemplate.vue";
+import highPie from "../../components/echartsTemplate/highPie.vue";
 
 export default {
-    components: {},
-    data() {
-        return {};
-    },
-    //监听属性 类似于data概念
-    computed: {},
-    //监控data中的数据变化
-    watch: {},
-    //方法集合
-
-    beforeCreate() { }, //生命周期 - 创建之前
-    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
-    beforeMount() { }, //生命周期 - 挂载之前
-    methods: {
-        getRenKou() {
-            var dom = document.getElementById('gdbh_echart');
-            var myChart = window.echarts.init(dom);
-
-            let data = [
-                { name: '水田', value: 30 },
-                { name: '水浇地', value: 40 },
-                { name: '旱地', value: 50 },
-                // { 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 = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
-            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
-                    text: '耕地来源',
-                    x: '49%',
-                    y: '32%',
-                    itemGap: 6,
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 11,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    subtextStyle: {
-                        color: '#fff',
-                        fontSize: 8,
-                        fontWeight: '400',
-                        lineHeight: 8,
-                    },
-                    textAlign: 'center',
-                },
-
-                // 图例
-                legend: {
-                    show: true,
-                    orient: 'horizontal',
-                    icon: 'rect',
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 10,
-                    },
-                    top: '70%',
-                    // left: '20%',
-                    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²`;
-                        //     // console.log(`{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `);
-
-                        //     return `{icon|${pm}} {name|${name}}  {percent|${p}%} {area|${area}} `;
-                        // } else {
-                        //     console.log(name);
-
-                        //     return name;
-                        // }
-
-                        if (selectedItem) {
-                            return name;
-
-                        }
-                    },
-                },
-                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() { }, //生命周期 - 销毁之前
-    destroy() { },//生命周期 - 销毁完成
-    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+  components: { borderTemplate, highPie },
+  data() {
+    return {
+      sdlist: [
+        { name: "耕地保有量", value: "", unit: "km²" },
+        { name: "补充耕地项目", value: "", unit: "个" },
+        { name: "永久基本农田", value: "", unit: "km²" },
+        { name: "补充耕地面积", value: "", unit: "km²" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+
+  methods: {},
+  mounted() {
+    let data = [
+      ["货1", 23],
+      ["客1", 18],
+      ["货2", 23],
+      ["客2", 18],
+    ];
+    this.$nextTick(() => {
+      this.$refs.echartRef.setOptions(data);
+    });
+  },
 };
 </script>
 <style lang="scss" scoped>
 .gdbh {
-    border-width: 0px;
+  top: 10px !important;
+  .content {
+    // border: #00FFFF 1px solid;
     position: absolute;
-    left: 1366px;
-    top: 20px;
-    display: -ms-flexbox;
-    display: flex;
-
-    .box_gdbh {
-        font-family: 'Arial Normal', 'Arial';
-        font-weight: 400;
-        font-style: normal;
-        font-size: 13px;
-        letter-spacing: normal;
-        color: #333333;
-        text-align: center;
-        line-height: normal;
-        text-transform: none;
-        border-width: 0px;
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 535px;
-        height: 260px;
-        background: inherit;
-        background-color: rgba(3, 25, 67, 0.698039215686274);
-        border: none;
-        border-radius: 0px;
-        -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%;
-            text-align: justify;
-        }
-
-        #gdbh_echart {
-            width: 280px;
-            height: 230px;
-
-            position: relative;
-            left: 54%;
-            top: -75%;
-        }
-
-        .centent {
-            // border: #00FFFF 1px solid;
-            width: 280px;
-            height: 185px;
-            position: relative;
-            left: 6%;
-
-            .item {
-                // border: #00FFFF 1px solid;
-                height: 40%;
-                margin-bottom: 10%;
-                background-color: #283f6d;
-                text-align: left;
-                padding-left: 7%;
-                padding-top: 4%;
-
-                p {
-                    font-size: 14px;
-                    color: #fff;
-                    margin-bottom: 4%;
-                }
-
-                span {
-                    color: #00FFFF;
-                    font-weight: 1000;
+    left: 5%;
+    width: 400px;
+    height: 140px;
+    top: 10px;
+  }
+
+  .item {
+    width: 45%;
+    height: 45px;
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+  }
+
+  .icon {
+    width: 45px;
+    height: 45px;
+    padding: 2%;
+    border-radius: 8px;
+    display: inline-block;
+    background: no-repeat 50%;
+  }
+
+  .icongdbh0 {
+    background-image: url("/static/images/overview/icongdbh0.png");
+  }
+  .icongdbh1 {
+    background-image: url("/static/images/overview/icongdbh1.png");
+  }
+  .icongdbh2 {
+    background-image: url("/static/images/overview/icongdbh2.png");
+  }
+  .icongdbh3 {
+    background-image: url("/static/images/overview/icongdbh3.png");
+  }
+
+  .text {
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+    width: 100px;
+    margin-bottom: 4px;
+
+    p {
+      font-kerning: normal;
+      font-family: "Arial Negreta", "Arial Normal", "Arial";
+      font-weight: bold;
+      font-size: 14px;
+      color: #bcd3e5;
+      line-height: 24px;
+    }
 
-                }
-            }
-        }
+    .sdvalue {
+      font-family: "Arial Negreta", "Arial Normal", "Arial";
+      font-weight: 700;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 18px;
+      color: #64daff;
+      line-height: 16px;
+    }
+    .unit {
+      font-family: "Arial Negreta", "Arial Normal", "Arial";
+      font-weight: 400;
+      font-size: 12px;
+      color: #ecf6ff;
+      line-height: 12px;
     }
+  }
+
+  .value {
+    display: inline-block;
+
+    // border: #00FFFF 1px solid;
+    width: 50px;
+  }
+  #gdbh_echart {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: 100px;
+  }
 }
 </style>