p4fkfpicj/app/static/index.js

// 立即执行函数，防止变量污染 (function() {})();

// 柱状图模块1
(function () {
  // 1.实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 2.指定配置项和数据
  var option = {
    legend:{
      data: []
    },
    color: ['#2f89cf'],
    // 提示框组件
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    // 修改图表位置大小
    grid: {
      left: '0%',
      top: '10px',
      right: '0%',
      bottom: '4%',
      containLabel: true
    },
    // x轴相关配置
    xAxis: {
        type: 'category',
        data: [],
        show: true,
      axisTick: {
        alignWithLabel: true
      },
      // 修改刻度标签，相关样式
      axisLabel: {
        color: "rgba(255, 255, 255, 1)",
        fontSize: 10,
        show: true,
        interval:0 
      },
      // x轴样式不显示
      axisLine: {
        show: true
      },
      nameTextStyle: {
      color: "rgba(255, 255, 255, 1)"
    }
    },
    // y轴相关配置
    yAxis: [{
      type: 'value',
      // 修改刻度标签，相关样式
      axisLabel: {
        color: "rgba(255,255,255,0.6)",
        fontSize: 12
      },
      // y轴样式修改
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.6)",
          width: 2
        }
      },
      // y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.1)"
        }
      }
    }],
    // 系列列表配置
    series: [{
      name: '累计确诊',
      type: 'bar',
      barWidth: '35%',
      // ajax传动态数据
      data: [],
      itemStyle: {
        // 修改柱子圆角
        barBorderRadius: 1
      }
    }]
    
  };

  $.ajax({
    cache: false,
    type:"GET",
    url:"/province_top15_curconfirm",
    data: null,
    dataType : "json",
    async: false,
    error: function(request) {
        alert("发送请求失败！");
    },
    success: function(result) {
        // pub_date, privinces, curConfirms
        var myCars=new Array();
        for(i=0; i<result.privincestop15.length; ++i) {
            option.legend.data.push(result.privincestop15[i])
            option.xAxis.data.push(result.privincestop15[i])
            option.series[0].data.push({name:result.privincestop15[i], value:result.curConfirmstop15[i]})
        }

        console.info(result)
    }
});

  // 3.把配置项给实例对象
  myChart.setOption(option);

  // 4.让图表随屏幕自适应
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})();

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 折线图模块1
(function () {
  

  var myChart = echarts.init(document.querySelector(".line .chart"));

  var option = {
    // 修改两条线的颜色
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis'
    },
    // 图例组件
    legend: {
      data: [],
      // 当serise 有name值时， legend 不需要写data
      // 修改图例组件文字颜色
      textStyle: {
        color: '#4c9bfd'
      },
      right: '10%',
    },
    grid: {
      top: "20%",
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      show: true, // 显示边框
      borderColor: '#012f4a' // 边框颜色
    },
    xAxis: {
      data: [],
      type: 'category',
      boundaryGap: false, // 去除轴间距
      // 去除刻度线
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#4c9bfb" // x轴文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      // 去除刻度线
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#4c9bfb" // x轴文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a"
        }
      }
    },
    series: [
      {
        type: 'line',
        smooth: true, // 圆滑的线
        name: '现存确诊',
        data: [],
      }
    ]
  };


   $.ajax({
    cache: false,
    type:"GET",
    url:"/home_daily_datas",
    data: null,
    dataType : "json",
    async: false,
    error: function(request) {
        alert("发送请求失败！");
    },
    success: function(result) {
        for(i=0; i<result.time.length; ++i){
          option.legend.data.push(result.time[i])
          option.xAxis.data.push(result.time[i])
          option.series[0].data.push({name:result.time[i], value:result.curConfirm[i]})
        }
        console.info(result)
    }
}); 

  myChart.setOption(option);

  // 4.让图表随屏幕自适应
  window.addEventListener('resize', function () {
    myChart.resize();
  })


})();
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 饼形图1
(function () {
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  var option = {
    title:"",
    color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6","#7D7D7D"],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      // 垂直居中,默认水平居中
      // orient: 'vertical',
      data: [],
      bottom: 0,
      left: 10,
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      // 修改图例组件的文字为 12px
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "10"
      }
    },
    series: [{
      name: '省份',
      type: 'pie',
      // 设置饼形图在容器中的位置
      center: ["50%", "42%"],
      // 修改饼形图大小，第一个为内圆半径，第二个为外圆半径
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      // 图形上的文字
      label: {
        show: false,
        position: 'center'
      },
      // 链接文字和图形的线
      labelLine: {
        show: false
      },
      data: []
    }]
  };

  $.ajax({
    cache: false,
    type:"GET",
    url:"/province_top5_curconfirm",
    data: null,
    dataType : "json",
    async: false,
    error: function(request) {
        alert("发送请求失败！");
    },
    success: function(result) {
        // pub_date, privinces, curConfirms
        option.title.subtext = "数据更新时间： "+result.pub_date
        for(i=0; i<result.privinces.length; ++i) {
            option.legend.data.push(result.privinces[i])
            option.series[0].data.push({name:result.privinces[i], value:result.curConfirms[i]})
        }
        console.info(result)
    }
});

  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})();











(function () {
  var myChart = echarts.init(document.querySelector(".map .chart"));
  
  var option = {
    backgroundColor: 'rgba(128, 128, 128, 0)',
    tooltip: {
        trigger: 'item',
        formatter: "省份：{b}<br/>确诊：{c}"
    },
    textStyle: {color: '#FFFFFF'},
    title:{
        left: 'center',
        text: '中国疫情地图（现有确诊人数）',
        subtext: '数据更新时间: ',
        textStyle:{
          color:"rgba(255, 255, 255)",
          fontSize:20,
          align:"center"
      }
    },
    visualMap: {
        left: 'left',
        top: 'bottom',
        splitNumber: 7,
        pieces: [
            {value: 0},
            {min: 0, max: 9},
            {min: 10, max: 49}, 
            {min: 50, max: 99},
            {min: 100, max: 999}, 
            {min: 1000, max: 9999}, 
            {min: 10000}
        ],
        textStyle: {
            color: "#fff"
        },
        inRange: {
            color: ["#FFFFFF", "#FFE5DB", "#FFC4B3", "#FF9985", "#F57567", "#E64546", "#B80909"]
        },
        outOfRange: {
            color: "#FFFFFF"
        },
        show:true
    },
    geo:{
        map:'china',
        roam:false,//不开启缩放和平移
        zoom:1.00,//视角缩放比例
        label: {
            normal: {
                show: true,
                fontSize:'11',
                color: '#6C6C6C'
            }
        },
        itemStyle: {
            normal:{
                borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis:{
                areaColor: '#FFFF00',//鼠标悬停区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(255, 255, 255, 0.5)'
            }
        }
    },
    series:[{
        name:'现有确诊',
        type:'map',
        map:'china',
        geoIndex: 0,
        roam: true,
        label: {
            normal: {
                show: true,
                textStyle:{
                    color: 'rgb(0, 0, 0)',
                    fontSize: 14
                }
            }
        },
        data:[]
    }]
};

$.ajax({
    cache: false,
    url:'/get_province_currentConfirmedCount',
    type:"GET",
    dataType:'json',
    async:false,
    error: function(request) {
        alert("发送请求失败！");
    },
    success: function(result) {
        console.info(result)
        for(i=0,max=result.provinceShortName.length; i<max; ++i) {
            option.series[0].data.push({name:result.provinceShortName[i], value:result.currentConfirmedCount[i]})
        }
        option.title.subtext = '数据更新时间: ' + result.pub_date
    }
});





  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})();