Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度echarts地图给每个区域单独设置样式

function analyseJSON(url, callback) {
  let request = new XMLHttpRequest();
  request.open("get", url);
  request.send(null);
  request.onload = function () {
    if (request.status == 200) {
      callback(request.responseText);
    }
  }
}

//注册地图
echarts.registerMap("绍兴", getJSON);

//3D地图渲染
analyseJSON('./绍兴区县.json', function (getJSON) {
  var myChart = echarts.init(document.getElementById('id'));
  echarts.registerMap("绍兴", getJSON);
  let inputData = [565464, 117230.34, 74130.95, 41375.41, 43099.39, 127574.2, 86198.78, 75854.93];
  let data2 = [{
    name: '越城区',
    value: inputData[2],
    itemStyle: {
      color: '#e78078',
    },
  },
  {
    name: '柯桥区',
    value: inputData[3],
    itemStyle: {
      color: '#3f93d3',
    },
  },
  {
    name: '上虞区',
    value: inputData[4],
    itemStyle: { 
      color: '#98a3af',
    },
  },
  {
    name: '新昌县',
    value: inputData[5],
    itemStyle: {
      color: '#12c0ae',
    },
  }];
  let option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
      return params.name + ":" + params.value;
      }
    },
    series: [{
      name: '绍兴',
      type: 'map3D',
      map: '绍兴',
      boxDepth: 100, //地图倾斜度
      regionHeight: 2, //地图厚度
  	  light: {
          main: {
            intensity: 1.5
          }
        },
        label: {
          show: true, //是否显示市
  	    textStyle: {
            color: "#333333", //文字颜色
            fontSize: 16, //文字大小
            fontFamily: '微软雅黑',
            backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
  	    },
        },
        data: data2,
        itemStyle: {
          opacity: 1, // 透明度
          borderWidth: 1, //分界线宽度
          borderColor: "#808080", //分界线颜色
          color: "#ffffff"
        },
        emphasis: {
          itemStyle: {
          color: "#D3D3D3"
          },
        },
        groundplane: {
          show: false
        },
        shading: 'realistic',
  	    realisticMaterial: {
          detailTexture: '#fff', // 纹理贴图
          textureTiling: 1, // 纹理平铺,1是拉伸,数字表示纹理平铺次数
          roughness: 0, // 材质粗糙度,0完全光滑,1完全粗糙
          metalness: 0, // 0材质是非金属 ,1金属
          roughnessAdjust: 0
        },
        viewControl: {
          distance: 135, // 地图视角 控制初始大小
          rotateSensitivity: 1, // 旋转
          zoomSensitivity: 1, // 缩放
  	  },
    }],
  };
  myChart.setOption(option);
});

 

点击展开全文

相关文章

  1. 百度Echarts设置geo地图位置(上下左右)
  2. 百度Echarts之3d地图旋转效果
  3. vue3项目中如何搭建Echarts图表
  4. 北京西城区什刹海街道地图
  5. 百度echarts实现堆叠分离柱形图