Echarts可视化教程

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

百度echarts做一个世界地图

var data=[
  {
    "data": [
      {"name": "China","value":[81116,"中国"]},
      {"name": "Italy","value":[24747,"意大利"]},
      {"name": "Iran","value":[14991,"伊朗"]},
      {"name": "Corea","value":[8236,"韩国"]},
      {"name": "Spain","value":[7753,"西班牙"]},
      {"name": "France","value":[5380,"法国"]},
      {"name": "Germany","value":[4838,"德国"]},
      {"name": "United States","value":[1678,"美国"]},
      {"name": "United Kingdom","value":[1395,"英国"]},
      {"name": "Japan","value":[814,"日本"]},
      {"name": "Australia","value":[814,"澳大利亚"]},
      {"name": "Russia","value":[814,"俄罗斯"]}
    ]
  }
]

var option = {
  baseOption: {
    animationDurationUpdate: 1000,
    animationEasingUpdate: 'quinticInOut',
    timeline: {
      show: false,
      axisType: 'category',
      orient: 'vertical',
      autoPlay: true,
      inverse: true,
      playInterval: 2000,
      left: null,
      right: 5,
      top: 20,
      bottom: 20,
      width: 46,
      height: null,
      label: {
        normal: {
          textStyle: {
            color: '#ddd'
          }
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      symbol: 'none',
      lineStyle: {
        color: '#555'
      },
    },
    backgroundColor: '#0B1321',
    xAxis: {},
    yAxis: {},
    series: [
      {
        id: 'map',
        type: 'map',
        mapType: 'world',
        top: '8%',
        bottom: '25%',
        left:80,
        itemStyle: {
          normal: {
            areaColor: '#323c48',
            borderColor: '#404a59'
          },
          emphasis: {
            label: {
              show: true
            },
            areaColor: 'rgba(255,255,255, 0.5)'
          }
        },
        data: []
      }, {
        id: 'bar',
        type: 'bar',
        tooltip: {
          show: false
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            textStyle: {
              color: '#ddd'
            }
          }
        },
        data: []
      },
    ]
  },
  options: []
}

for (var i = 0; i < data.length; i++) {
  //计算其余国家GDP
  option.options.push({
    visualMap: [{
         show: false,
      dimension: 0,
      left: '25%',
      itemWidth: 12,
      min:data[i].data[9].value[0],
      max:data[i].data[0].value[0],
      text: ['高', '低'],
      textStyle: {
        color: '#ddd'
      },
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered', 'red']
      }
    }],
    xAxis: {
      type: 'value',
        show: false
    },
    yAxis: {
      type: 'category',
      show: false
    },
    series: [
      {
        id: 'map',
        data: data[i].data
      }
    ]
  })
}

 

点击展开全文

相关文章

  1. 世界地图