aucma-mes-ui/src/views/model/productDistribution.vue

<template>
  <div class="app-container">
    <div class="exit" @click="exitFun"></div>
    <div class="top">澳柯玛商用冷链产品在国内市场占有率达
      <span style="color:#ffd202;font-weight: bold"> 51%</span>
      ，连续三年保持行业第一，冷藏展示柜荣膺工信部
      <span style="color:#ffd202;font-weight: bold"> “中国制造业单项冠军产品”</span>
      ，获得了国内外众多品牌客户的高度认可，成为冰淇淋、饮料、速冻、乳业、啤酒以及零售行业等数千家食品快消与流通行业用户的首选冷链设备供应商，目前已接入平台的设备达
      <span style="color:#ffd202;font-weight: bold"> 911706</span>
      台。
    </div>
    <div class="headline1">产品分布情况分析</div>
    <div class="headline2">产品区划大数据</div>
    <div class="chart1">
      <Chart ref="chart1"></Chart>
    </div>
    <div class="chart2"></div>
  </div>
</template>

<script>
import Chart from "@/components/board/Chart";
import chinaMap from './china.json'
import * as echarts from "echarts";

export default {
  name: "Liner",
  components: {
    Chart
  },
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      chartData: [...(chinaMap.features.map(e => {
        return {
          name: e.properties.name,
          value: Math.random() * 200
        }
      })), {
        name: '南海诸岛',
        value: Math.random() * 200
      }],
    }
  },
  mounted() {
    echarts.registerMap('china', chinaMap);
    this.$refs.chart1.setData({
      visualMap: {
        // show: false,
        min: 0,
        max: 200,
        left: 'left',
        top: 'bottom',
        calculable: true,
        seriesIndex: [1],
        textStyle: {
          color: "#FFFF",
        },
        inRange: {
          color: ['#dbac00', '#cf0000'] // 蓝绿
        }
      },
      geo: {
        show: true,
        map: 'china',
        zoom: 1.2,
        label: {
          normal: {
            show: true,
            formatter: (e) => {
              console.log(e.name)
              return `${this.chartData.find(val => val.name === e.name).value.toFixed(0)}\n${e.name}`
            },
            textStyle: {
              color: '#fff'
            }
          },
          emphasis: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
          },
          emphasis: {
            areaColor: '#2B91B7',
          }
        }
      },
      series: [
        {
          name: '散点',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbolSize: (val) => {
            return val[2] / 10;
          },
          label: {
            normal: {
              formatter: (e) => {
                return e.data.name
              },
              position: 'right',
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#05C3F9'
            }
          }
        },
        {
          type: 'map',
          map: 'china',
          geoIndex: 0,
          zoom: 1.6,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#3B5077',
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          },
          // animation: false,
          data: this.chartData
        },
      ]
    })
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style scoped>
.app-container {
  background-color: #021e31;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.top {
  position: absolute;
  background-image: url("~@/assets/model/productDistribution/bg1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 90%;
  top: 15%;
  left: 5%;
  font-size: 1.2vw;
  color: #05c4ec;
  padding: 12px
}

.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}

.headline1 {
  position: absolute;
  top: 28%;
  left: 5%;
  border-left: 3px solid #0251d1;
  padding-left: 12px;
  height: 1.5vw;
  line-height: 1.5vw;
  font-size: 1vw;
  color: #fff;
  font-weight: bold;
}

.headline2 {
  position: absolute;
  top: 28%;
  left: 70%;
  border-left: 3px solid #0251d1;
  padding-left: 12px;
  height: 1.5vw;
  line-height: 1.5vw;
  font-size: 1vw;
  color: #fff;
  font-weight: bold;
}

.chart1 {
  position: absolute;
  top: 32%;
  left: 5%;
  width: 63%;
  height: 65%;
}

.chart2 {
  background-image: url("~@/assets/model/productDistribution/right.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 32%;
  left: 70%;
  width: 36vh;
  height: 66vh;
}
</style>