数据分析疫情图——day5

Bertha 。 2023-01-07 04:59 90阅读 0赞

### 数据分析疫情图 ###

*   *  制作饼图
     *  制作留言墙
     *  制作地图

前言

> 好好学习，javaweb制作全国疫情展示,以下是今天学习的知识，今天疫情图的界面已经完成了，利用echarts绘制图形，官网：[https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]

第一天：[数据分析疫情图——day1][day1]  
第二天：[数据分析疫情图——day2][day2]  
第三天：[数据分析疫情图——day3][day3]  
第四天：[数据分析疫情图——day4][day4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]

## 制作饼图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]

// 基于准备好的dom，初始化echarts实例
    var tab_l_2=echarts.init(document.getElementById('left2'),'dark');
    /*指定图表的配置项和数据*/
    var l_2_option = { 
    		title: { 
    	        text: '境外输出城市TOP5',
    	        subtext: '纯属虚构',//副标题
    	        left: 'center'
    	    },
    	    tooltip: { 
    	        trigger: 'item',//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
    	        formatter: '{a} <br/>{b} : {c} ({d}%)'//提示框浮层内容格式器，支持字符串模板和回调函数两种形式
    	    },
    	    legend: { 
    	        orient: 'vertical',//图例列表的布局朝向,垂直,horizontal(水平)
    	        left: 'left',//图例组件离容器左侧的距离
    	        data: ['上海', '广州', '石家庄', '北京', '深圳']
    	    },
    	    series: [
    	        { 
    	            name: '访问来源',
    	            type: 'pie',//饼状图
    	            radius: '55%',//饼图的半径
    	            center: ['50%', '60%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
    	            data: [
    	                { value: 335, name: '上海'},
    	                { value: 310, name: '广州'},
    	                { value: 234, name: '石家庄'},
    	                { value: 135, name: '北京'},
    	                { value: 1548, name: '深圳'}
    	            ],
    	            emphasis: { 
    	                itemStyle: { 
    	                    shadowBlur: 10,//图形阴影的模糊大小
    	                    shadowOffsetX: 0,//阴影水平方向上的偏移距离
    	                    shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色
    	                }
    	            }
    	        }
    	    ]
    };
    tab_l_2.setOption(l_2_option);

## 制作留言墙 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]

创建right2.js文件

导入包

html中

导入包  
html中

<div id="left2">
    	左边的部分二
    </div>
    <script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
    <script type="text/javascript" src="js/world_yun.js"></script>

## 制作地图 ##

地图样式链接  
[https://www.makeapie.com/editor.html?c=x1-bQDu00][https_www.makeapie.com_editor.html_c_x1-bQDu00]

需要的js包  
![在这里插入图片描述][20210115185715874.png]

[https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[day1]: https://chenyunzhi.blog.csdn.net/article/details/112481162
[day2]: https://chenyunzhi.blog.csdn.net/article/details/112507367
[day3]: https://chenyunzhi.blog.csdn.net/article/details/112572227
[day4]: https://chenyunzhi.blog.csdn.net/article/details/112623571
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]: /images/20221119/b565fa1857004063a0fe34ee4d6ec187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]: /images/20221119/f3010e5ceb144d7f966cd7d6ac8bf958.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 2]: /images/20221119/85ec6302a55e45f0a03e951e19dff8df.png
[https_www.makeapie.com_editor.html_c_x1-bQDu00]: https://www.makeapie.com/editor.html?c=x1-bQDu00
[20210115185715874.png]: /images/20221119/3a64e990cfc446369d311d6b232cef0e.png