echarts世界人口分布图图表效果代码-html代码-BFW代码库

echarts世界人口分布图图表效果代码

代码语言：html

所属分类：图表

代码描述：echarts世界人口分布图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
	background-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; 
	color: #000;
}

a:link, a:visited {
	color: #4682b4;
}

a:hover {
	color: #4169e1;
}

#main	{
	width: 1000px;
	height: 800px;
	border: 1px solid #ccc;
	padding: 10px;
}
</style>



</head>

<body >
  <div id="main"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-all.js"></script>
      <script >
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  title: {
    text: 'World Population (2010)',
    subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
    sublink: 'http://bfw.wiki',
    x: 'center',
    y: 'top' },

  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      var value = (params.value + '').split('.');
      value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') +
      '.' + value[1];
      return params.seriesName + '<br/>' + params.name + ' : ' + value;
    } },

  toolbox: {
    show: true,
    orient: 'vertical',
    x: 'right',
    y: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true } } },


  dataRange: {
    min: 0,
    max: 1000000,
    text: ['High', 'Low'],
    realtime: false,
    calculable: true,
    color: ['orangered', 'yellow', 'lightskyblue'] },

  series: [
  {
    name: 'World Population (20.........完整代码请登录后点击上方下载按钮下载查看