首页 / 浏览问题 / WebGIS / 问题详情
怎么才能让echarts的饼图定在地图上,不会跟随屏幕移动呢?
10EXP 2021年07月22日
<template>
  <div class="panel-item " id="static">
    <div class="thematic-container">
      统计分析
    </div>
  </div>
</template>

<script>
// import { getImg, getCia } from '@/gis/tianditu/index'
// import EchartsLayer from 'echartslayer'

let viewer;
export default {
  name: "StaticAna",
  props: {},
  components: {},
  data() {
    return {

    }
  },
  computed: {},
  watch: {},
  methods: {
    open() { },
    closeMenu() { },
    init() {
      // console.log('加载了');
      var imageryLayers = viewer.imageryLayers;
      var scene = viewer.scene;
      const data = [
        { name: '廊坊', value: 193 },
        { name: '菏泽', value: 194 },
        { name: '合肥', value: 229 },
        { name: '武汉', value: 273 },
        { name: '大庆', value: 279 }
      ];
      let pieData1 = [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' },
        { value: 300, name: '视频广告' }
      ];
      let pieData2 = [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' },
        { value: 300, name: '视频广告' }
      ];
      let pieData3 = [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' },
        { value: 300, name: '视频广告' }
      ];
      let pieData4 = [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' },
        { value: 300, name: '视频广告' }
      ];
      const geoCoordMap = {
      
        '廊坊': [116.7, 39.53],
        '菏泽': [115.480656, 35.23375],
        '合肥': [117.27, 31.86],
        '武汉': [114.31, 30.52],
        '大庆': [125.03, 46.58]
      };
      let convertData1 = geoCoordMap[data[0].name];//地理位置信息
      // convertData1=convertData1.concat(pieData1)
      // const convertData = function (data) {
      //   const res = [];
      //   for (let i = 0; i < data.length; i++) {
      //     const geoCoord = geoCoordMap[data[i].name];
      //     // console.log(geoCoord,'geoCoord');
      //     if (geoCoord) {
      //       res.push({
      //         name: data[i].name,
      //         value: geoCoord.concat(data[i].value)
      //       });
      //     }
      //   }
      //   return res;
      // };
      //res现在是二维点信息和echarts的value值==》convertData
      const options = {
        animation: !1,
        // backgroundColor: '#404a59',
        title: {
          text: 'Echarts之全国主要城市空气质量',
          subtext: '',
          sublink: '',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          y: 'bottom',
          x: 'left',
          data: ['pm2.5'],
          textStyle: {
            color: '#fff'
          }
        },
        GLMap: {},
        series: [
          {
            name: '廊坊',
            type: 'pie',
            coordinateSystem: 'GLMap',
            radius: convertData1,
            data: pieData1,
            // symbolSize: function (val) {
            //   return val[2] / 20;
            // },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            // itemStyle: {
            //   normal: {
            //     color:[ '#ddb926']
            //     //[ '#ddb926','#FFB6C1','#DA70D6','#9400D3','#B0C4DE','	#7FFFAA']
            //   }
            // }
          },
          // {
          //   name: '前5',
          //   type: 'effectScatter',
          //   coordinateSystem: 'GLMap',
          //   data: convertData(data.sort(function (a, b) {
          //     return b.value - a.value;
          //   }).slice(0, 6)),
          //   symbolSize: function (val) {
          //     return val[2] / 20;
          //   },
          //   showEffectOn: 'render',
          //   rippleEffect: {
          //     brushType: 'stroke'
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       formatter: '{b}',
          //       position: 'right',
          //       show: true
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: '#f4e925',
          //       shadowBlur: 10,
          //       shadowColor: '#333'
          //     }
          //   },
          //   zlevel: 1
          // }
          //  {
          //     name: '访问来源',
          //   type: 'pie',
          //   coordinateSystem: 'GLMap',
          //   radius: '50%',
          //   data: convertData(data),
          //   emphasis: {
          //       itemStyle: {
          //           shadowBlur: 10,
          //           shadowOffsetX: 0,
          //           shadowColor: 'rgba(0, 0, 0, 0.5)'
          //       }
          //   }
          // }
        ]
      };
      const options1 = {};
      const options2 = {};

      const options3 = {};

      const options4 = {};

      // console.log(EchartsLayer, 'this');
      // debugger
      var echartsLayer = new EchartsLayer(viewer);
      echartsLayer.chart.setOption(options);


      let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
      handler.setInputAction(function (e) {
        let pos = scene.pickPosition(e.position);
        console.log(pos);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      window.camera = scene.camera;
    },

  },
  beforeCreate() { },
  created() { },

  mounted() {
    let self = this;
    window.onload = () => {
      viewer = window.viewer;
      self.init();
      console.log('加载了分析');
    }
  },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() {
    //  var echartsLayer = new EchartsLayer(viewer);
    //  echartsLayer.chart.setOption(options1);
  },
  destroyed() { },
}
</script>
<style scoped>
.thematic-container {
  padding: 20px;
}
</style>

1个回答

可以尝试把地形深度检测给关闭了
6,077EXP 2021年07月22日
不行,没有用,就是一个饼图一直在页面中间,地理位置信息不知道绑定在echarts里的那个地方
...