Echarts模拟疫情图

基本示例

1.引入ECharts需要的jar包

<!-- <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
<script src="../../resources/echarts/dist/echarts.min.js"></script>
<script src="../../resources/js/jquery-3.4.1.min.js"></script>

2.柱状图-前端

<div id="main" style="width: 600px; height: 400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var option = {
			title : {
				text : 'ECharts 入门示例'
			},
			tooltip : {},
			legend : {
				data : [ '销量' ]
			},
			xAxis : {
				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
			},
			yAxis : {},
			series : [ {
				name : '销量',
				type : 'bar',
				data : [Math.random(5), Math.random(20), Math.random(36), Math.random(10), Math.random(10),Math.random(20)]
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>

3.折线图-前端

<div id="main" style="width: 600px; height: 400px;"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			window.onload= function(){
				$.ajax({
					type: 'get',
					url : '/line/charts',
					dataType: 'json',
// 					success: (data, statusText, xhr) => {
					success:function(data){
//	 					$.get('data.json', function(data) { //与服务器连接成功
							myChart.setOption(option = {
								title: {
									text: 'ECharts 异步加载数据'
								},
								tooltip: {},
								legend: {
									data: ['访问量']
								},
								xAxis: {
									// 横坐标值：data.name
									data: data.categories
								},
								yAxis: {},
								series: [{
									name: '访问量',
									type: 'line',
									// data:data.data[200,100,350,90,11]
									data: data.data
								}]
							});
//	 					});
					}
				})
			}
		</script>

4.个性化图表样式

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<input type="button" value="reset" onclick="reset()"/>
<script type="text/javascript">
	function reset(){
		window.location.reload()
	}
	
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	myChart.setOption(
		option = {
			backgroundColor: '#2c343c',
			visualMap: {
				show: false,
				min: 80,
				max: 600,
				inRange: {
					colorLightness: [0, 1]
				}
			},
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: '55%',
				data: [{
						value: 235,
						name: '视频广告'
					},
					{
						value: 274,
						name: '联盟广告'
					},
					{
						value: 310,
						name: '邮件营销'
					},
					{
						value: 335,
						name: '直接访问'
					},
					{
						value: 400,
						name: '搜索引擎'
					}
				],
				roseType: 'angle',
				label: {
					normal: {
						textStyle: {
							color: 'rgba(255, 255, 255, 0.3)'
						}
					}
				},
				labelLine: {
					normal: {
						lineStyle: {
							color: 'rgba(255, 255, 255, 0.3)'
						}
					}
				},
				itemStyle: {
					normal: {
						color: '#c23531',
						shadowBlur: 200,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		}
	)
</script>

5.异步加载图表

 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      function fetchData(cb) {
          // 通过 setTimeout 模拟异步加载
          setTimeout(function () {
              cb({
                  categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                  data: [5, 20, 36, 10, 10, 20]
              });
          }, 1000);
      }
      myChart.setOption(option = {
          title: {
              text: '异步数据加载示例'
          },
          tooltip: {},
          legend: {
              data: ['销量']
          },
          xAxis: {
              data: []
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: []
          }]
      });

myChart.showLoading();

      fetchData(function (data) {
	myChart.hideLoading();
          myChart.setOption({
              xAxis: {
                  data: data.categories
              },
              series: [{
                  // 根据名字对应到相应的系列
                  name: '销量',
                  data: data.data
              }]
          });
      });

  </script>

模拟疫情图

1. 引入echarts

npm install echarts --save

2. 引入jsonp

npm istall jsonp --save

<template>
  <div id="map"></div>
</template>

<script>
// 导入Echarts
import echarts from 'echarts'
// 导入中国地图
import 'echarts/map/js/china'
// 引入jsonp
import jsonp from 'jsonp'

const option = {
  title: {
    text: '模拟疫情地图'
  },
  visualMap: [
    {
      // 分段型
      type: 'piecewise',
      show: true,
      splitNumber: 6,
      pieces: [
        {
          min: 10000
        }, // 不指定 max，表示 max 为无限大（Infinity）。
        {
          min: 1000,
          max: 9999
        },
        {
          min: 100,
          max: 999
        },
        {
          min: 10,
          max: 99
        },
        {
          min: 1,
          max: 9
        },
        {
          min: 0,
          max: 0
        }
      ],
      inRange: {
        symbol: 'rect',
        color: ['#fff', '#ffaa85', '#ff7b69', '#cc2929', '#8c0d0d', '#660208']
      },
      itemHeight: 10,
      itemWidth: 20
    }
  ],
  // 鼠标悬浮的提示信息
  // 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
  tooltip: {
    trigger: 'item',
    formatter: '地区：{b}<br/>确诊：{c}',
    position: function(point, params, dom, rect, size) {
      // 固定在顶部
      return [point[0], '10%']
    }
  },
  series: [
    {
      // 图表的类型
      type: 'map',
      map: 'china',
      label: {
        // 显示各个省份名称
        show: true,
        fontSize: 12,
        color: 'black'
      },
      itemStyle: {
        // 区域的背景颜色
        areaColor: '#fff'
      },
      // 高亮状态下
      emphasis: {
        label: {
          fontSize: 15,
          color: '#4adbaf'
        },
        // 控制鼠标滑过时的高亮样式
        itemStyle: {
          // 地图区域的多边形 图形颜色
          areaColor: '#c7fffd',
          borderColor: '#B03A5B'
        }
      },
      // 当前视角的缩放比例
      zoom: 1.2,
      data: [
        { name: '北京', value: 200 },
        { name: '湖北', value: 20000 }
      ]
    }
  ]
}

export default {
  data() {
    return {
      myChart: ''
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('map'))
    // 指定图表的配置项和数据
    // 使用刚指定的配置项和数据显示图表。
    this.myChart.setOption(option)
  },
  created() {
    this.getData()
  },
  methods: {
    // 获得真实数据
    getData() {
      // 解决访问跨域问题
      jsonp(
        'http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',
        {},
        (erros, data) => {
          // console.log(data);
          // console.log(data.data.list)
          var lists = data.data.list.map(item => {
            return {
              name: item.name,
              value: item.value
            }
          })
          option.series[0].data = lists
          this.myChart.setOption(option)
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
#map {
  width: 1050px;
  height: 620px;
}
</style>

Echarts 官方文档

欢迎访问我的博客

My Blog: https://coderblue.cn/
Github:https://github.com/CoderBleu
My Project:https://coderblue.cn/project/