平均预期寿命可视化_预期寿命表在echart中的模板-CSDN博客

本文链接：https://blog.csdn.net/weixin_43914278/article/details/135558254

博客提及了data.json和data2.json两个数据文件，还介绍了在vscode中下载插件的安装方法，忽略了无关的一键三连话语。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整地址：

一键三连感谢您的观看

https://www.bilibili.com/video/BV11V41197Rd/?spm_id_from=333.999.list.card_archive.click&vd_source=e9167c654bb4523338a765358a8ac2af

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
    <script src="jquery-1.10.2.min.js"></script>
    <style>
      body {
   
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh; /* 让 body 铺满整个视口高度 */
        margin: 0; /* 去除默认的 body 边距 */
        background-size: cover;
        background: url('1.jpg') center center fixed; /* 替换 'your-background-image.jpg' 为实际的背景图片路径 */
        position: relative;
      }
      .t,.p {
   
        display:flex;
        overflow: hidden;
    }

    .title,.para {
   
        margin-bottom: 10px;
        display:inline-block;
        animation-name:hc;
        animation-duration: .5s;
        transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
        animation-fill-mode: both;
    }

    @keyframes hc{
   
        from {
   transform: translateY(30%);opacity: 0;}
        to {
   transform: translateY(0%);opacity: 1;}
    }
    </style>
  </head>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="display-1 t" style="height: 100px; text-align: center; font-size: 30px; font-weight: bold;color:aliceblue">
      <span class="title">平均</span>
      <span class="title">预期</span>
      <span class="title">寿命</span>
    </div>
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
var title=document.getElementsByClassName('title');
var para=document.getElementsByClassName('para');

for(i0=0;i0<title.length;i0++) {
   
    title[i0].style.animationDelay = (i0*0.1)+"s";
}

for(i1=0;i1<para.length;i1++) {
   
    para[i1].style.animationDelay = (i1*0.1)+"s";
}

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const updateFrequency = 2000;
const dimension = 0;
const countryColors = {
   
  男: '#b2bb1a',
  女: '#c69674',
  合计: '#f93',
  Cuba: '#002a8f',
  Finland: '#003580',
  France: '#ed2939',
  Germany: '#000',
  Iceland: '#003897',
  India: '#f93',
  Japan: '#bc002d',
  'North Korea': '#024fa2',
  'South Korea': '#000',
  'New Zealand': '#00247d',
  Norway: '#ef2b2d',
  Poland: '#dc143c',
  Russia: '#d52b1e',
  Turkey: '#e30a17',
  'United Kingdom': '#00247d',
  'United States': '#b22234'
};
$.when(
  $.getJSON('data.json'),
  $.getJSON('data2.json')
).done(function (res0, res1) {
   
  const flags = res0[0];
  const data = res1[0];
  const years = [];
  for (let i = 0; i < data.length; ++i) {
   
    if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
   
      years.push(data[i][4]);
    }
  }
  const namesSet = new Set();

for (let i = 0; i < data.length; ++i) {
   
  namesSet.add(data[i][3]);
}

const names = Array.from(namesSet);

  
  function getFlag(countryName) {
   
    if (!countryName) {
   
      return '';
    }
    return (
      flags.find(function (item) {
   
        return item.name === countryName;
      }) || {
   }
    ).emoji;
  }
  let startIndex = 1;
  let startYear = years[startIndex];
  option = {
   
    grid: {
   
      top: 10,
      bottom: 30,
      left: 150,
      right: 80
    },
    xAxis: {
   
      max: 'dataMax',
      scale: true,
      axisLabel: {
   
        formatter: function (n) {
   
          return Math.round(n) + '';
        },
        fontSize: 20,
        color:"#ffffff"
      },
        },
    dataset: {
   
      source: data.slice(1).filter(function (d) {
   
        return d[4] === startYear;
      })
    },
    yAxis: {
   
      type: 'category',
      inverse: true,
      max: 3,
      axisLabel: {
   
        show: true,
        fontSize: 30,
        margin:50,
        color:"#ffffff"
      },
      animationDuration: 300,
      animationDurationUpdate: 300
    },
    series: [
      {
   
        realtimeSort: true,
        seriesLayoutBy: 'column',
        type: 'bar',
        itemStyle: {
   
          color: function (param) {
   
            return countryColors[param.value[3]] || '#5470c6';
          }
        },
        encode: {
   
          x: dimension,
          y: 3
        },
        label: {
   
          show: true,
          precision: 1,
          position: 'right',
          fontSize:20,
          color:"#ffffff",
          valueAnimation: true,
          fontFamily: 'monospace'
        }
      }
    ],
    // Disable init animation.
    animationDuration: 0,
    animationDurationUpdate: updateFrequency,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    graphic: {
   
      elements: [
        {
   
          type: 'text',
          right: 150,
          bottom: 60,
          style: {
   
            text: startYear,
            font: 'bolder 80px monospace',
            fill: 'rgba(255, 255, 255, 0.3)'
          },
          z: 100
        }
      ]
    }
  };
  console.log(option);
  myChart.setOption(option);
  for (let i = startIndex; i < years.length - 1; ++i) {
   
    (function (i) {
   
      setTimeout(function () {
   
        updateYear(years[i + 1]);
      }, (i - startIndex) * updateFrequency);
    })(i);
  }
  function updateYear(year) {
   
    let source = data.slice(1).filter(function (d) {
   
      return d[4] === year;
    });
    option.series[0].data = source;
    option.graphic.elements[0].style.text = year;
    myChart.setOption(option);
  }
});

option && myChart.setOption(option);

    </script>
  </body>
</html>

data.json

[
    {
   
        "code": "AD",
        "emoji": "🇦🇩",
        "unicode": "U+1F1E6 U+1F1E9",
        "name": "Andorra",
        "title": "flag for Andorra",
        "dialCode": "+376"
    },
    {
   
        "code": "AE",
        "emoji": "🇦🇪",
        "unicode": "U+1F1E6 U+1F1EA",
        "name": "United Arab Emirates",
        "title": "flag for United Arab Emirates",
        "dialCode": "+971"
    },
    {
   
        "code": "AF",
        "emoji": "🇦🇫",
        "unicode": "U+1F1E6 U+1F1EB",
        "name": "Afghanistan",
        "title": "flag for Afghanistan",
        "dialCode": "+93"
    },
    {
   
        "code": "AG",
        "emoji": "🇦🇬",
        "unicode": "U+1F1E6 U+1F1EC",
        "name": "Antigua and Barbuda",
        "title": "flag for Antigua and Barbuda",
        "dialCode": "+1268"
    },
    {
   
        "code": "AI",
        "emoji": "🇦🇮",
        "unicode": "U+1F1E6 U+1F1EE",
        "name": "Anguilla",
        "title": "flag for Anguilla",
        "dialCode": "+1 264"
    },
    {
   
        "code": "AL",
        "emoji": "🇦🇱",
        "unicode": "U+1F1E6 U+1F1F1",
        "name": "Albania",
        "title": "flag for Albania",
        "dialCode": "+355"
    },
    {
   
        "code": "AM",
        "emoji": "🇦🇲",
        "unicode": "U+1F1E6 U+1F1F2",
        "name": "Armenia",
        "title": "flag for Armenia",
        "dialCode": "+374"
    },
    {
   
        "code": "AO",
        "emoji": "🇦🇴",
        "unicode": "U+1F1E6 U+1F1F4",
        "name": "Angola",
        "title": "flag for Angola",
        "dialCode": "+244"
    },
    {
   
        "code": "AQ",
        "emoji": "🇦🇶",
        "unicode": "U+1F1E6 U+1F1F6",
        "name": "Antarctica",
        "title": "flag for Antarctica",
        "dialCode": null
    },
    {
   
        "code": "AR",
        "emoji": "🇦🇷",
        "unicode": "U+1F1E6 U+1F1F7",
        "name": "Argentina",
        "title": "flag for Argentina",
        "dialCode": "+54"
    },
    {
   
        "code": "AS",
        "emoji": "🇦🇸",
        "unicode": "U+1F1E6 U+1F1F8",
        "name": "American Samoa",
        "title": "flag for American Samoa",
        "dialCode": "+1 684"
    },
    {
   
        "code": "AT",
        "emoji": "🇦🇹",
        "unicode": "U+1F1E6 U+1F1F9",
        "name": "Austria",
        "title": "flag for Austria",
        "dialCode": "+43"
    },
    {
   
        "code": "AU",
        "emoji": "🇦🇺",
        "unicode": "U+1F1E6 U+1F1FA",
        "name": "Australia",
        "title": "flag for Australia",
        "dialCode": "+61"
    },
    {
   
        "code": "AW",
        "emoji": "🇦🇼",
        "unicode": "U+1F1E6 U+1F1FC",
        "name": "Aruba",
        "title": "flag for Aruba",
        "dialCode": "+297"
    },
    {
   
        "code": "AX",
        "emoji": "🇦🇽",
        "unicode": "U+1F1E6 U+1F1FD",
        "name": "Åland Islands",
        "title": "flag for Åland Islands",
        "dialCode": ""
    },
    {
   
        "code": "AZ",
        "emoji": "🇦🇿",
        "unicode": "U+1F1E6 U+1F1FF",
        "name": "Azerbaijan",
        "title": "flag for Azerbaijan",
        "dialCode": "+994"
    },
    {
   
        "code": "BA",
        "emoji": "🇧🇦",
        "unicode": "U+1F1E7 U+1F1E6",
        "name": "Bosnia and Herzegovina",
        "title": "flag for Bosnia and Herzegovina",
        "dialCode": "+387"
    },
    {
   
        "code": "BB",
        "emoji": "🇧🇧",
        "unicode": "U+1F1E7 U+1F1E7",
        "name": "Barbados",
        "title": "flag for Barbados",
        "dialCode": "+1 246"
    },
    {
   
        "code": "BD",
        "emoji": "🇧🇩",
        "unicode": "U+1F1E7 U+1F1E9",
        "name": "Bangladesh",
        "title": "flag for Bangladesh",
        "dialCode": "+880"
    },
    {
   
        "code": "BE",
        "emoji": "🇧🇪",
        "unicode": "U+1F1E7 U+1F1EA",
        "name": "Belgium",
        "title": "flag for Belgium",
        "dialCode": "+32"
    },
    {
   
        "code": "BF",
        "emoji": "🇧🇫",
        "unicode": "U+1F1E7 U+1F1EB",
        "name": "Burkina Faso",
        "title": "flag for Burkina Faso",
        "dialCode": "+226"
    },
    {
   
        "code": "BG",
        "emoji": "🇧🇬",
        "unicode": "U+1F1E7 U+1F1EC",
        "name": "Bulgaria",
        "title": "flag for Bulgaria",
        "dialCode": "+359"
    },
    {
   
        "code": "BH",
        "emoji": "🇧🇭",
        "unicode": "U+1F1E7 U+1F1ED",
        "name": "Bahrain",
        "title": "flag for Bahrain",
        "dialCode": "+973"
    },
    {
   
        "code": "BI",
        "emoji": "🇧🇮",
        "unicode": "U+1F1E7 U+1F1EE",
        "name": "Burundi",
        "title": "flag for Burundi",
        "dialCode": "+257"
    },
    {
   
        "code": "BJ",
        "emoji": "🇧🇯",
        "unicode": "U+1F1E7 U+1F1EF",
        "name": "Benin",
        "title": "flag for Benin",
        "dialCode": "+229"
    },
    {
   
        "code": "BL",
        "emoji": "🇧🇱",
        "unicode": "U+1F1E7 U+1F1F1",
        "name": "Saint Barthélemy",
        "title": "flag for Saint Barthélemy",
        "dialCode": "+590"
    },
    {
   
        "code": "BM",
        "emoji": "🇧🇲",
        "unicode": "U+1F1E7 U+1F1F2",
        "name": "Bermuda",
        "title": "flag for Bermuda",
        "dialCode": "+1 441"
    },
    {
   
        "code