嘘~ 正在从服务器偷取页面 . . .

数据分析疫情图——day5


前言

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

第一天:数据分析疫情图——day1

第二天:数据分析疫情图——day2

第三天:数据分析疫情图——day3

第四天:数据分析疫情图——day4

在这里插入图片描述
效果图;
在这里插入图片描述

制作饼图

在这里插入图片描述

// 基于准备好的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: '&#123;a&#125; <br/>&#123;b&#125; : &#123;c&#125; (&#123;d&#125;%)'//提示框浮层内容格式器,支持字符串模板和回调函数两种形式
        &#125;,
        legend: &#123;
            orient: 'vertical',//图例列表的布局朝向,垂直,horizontal(水平)
            left: 'left',//图例组件离容器左侧的距离
            data: ['上海', '广州', '石家庄', '北京', '深圳']
        &#125;,
        series: [
            &#123;
                name: '访问来源',
                type: 'pie',//饼状图
                radius: '55%',//饼图的半径
                center: ['50%', '60%'],//饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
                data: [
                    &#123;value: 335, name: '上海'&#125;,
                    &#123;value: 310, name: '广州'&#125;,
                    &#123;value: 234, name: '石家庄'&#125;,
                    &#123;value: 135, name: '北京'&#125;,
                    &#123;value: 1548, name: '深圳'&#125;
                ],
                emphasis: &#123;
                    itemStyle: &#123;
                        shadowBlur: 10,//图形阴影的模糊大小
                        shadowOffsetX: 0,//阴影水平方向上的偏移距离
                        shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色
                    &#125;
                &#125;
            &#125;
        ]
&#125;;
tab_l_2.setOption(l_2_option);    

制作留言墙

在这里插入图片描述

创建right2.js文件

导入包

html中

<div id="right2">右边的图2</div>
<script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
<script type="text/javascript" src="js/right2.js.js"></script>
function randomData() &#123;
            return Math.round(Math.random()*128);
        &#125;
        var chart = echarts.init(document.getElementById('right2'));

        var option_s=(&#123;

            title:&#123;
                text:'留言墙',
                textStyle:&#123;
                        color:'white',
                        fontSize:20,
                        fontWeight:'bolder',//字体粗细
                &#125;,
            &#125;,

            series:[&#123;
                type: 'wordCloud',
                        shape: 'circle',
                        //下面的左/顶/宽/高/右/底用于定位字云
                        //默认放置在中心,有75% x 80%的大小。

                        left: 'center',
                        top: 'center',
                        width: '70%',
                        height: '80%',
                        right: null,
                        bottom: null,

                        //数据中的值将被映射到的文本大小范围。
                        //默认最小为12px,最大为60px。
                        sizeRange: [12, 35],

                        //文本旋转范围和步进度。文本将在范围[- 90,90]中被旋转步骤45随机旋转
                        rotationRange: [-90, 90],
                        rotationStep: 45,

                        //用于标记画布可用性的网格的大小(以像素为单位)
                        //网格大小越大,字与字之间的距离越大。

                        gridSize: 8,

                        //设置为true允许部分文字在画布外绘制。false
                        //允许文字大于画布的大小被绘制
                        drawOutOfBound: true,

                        // Global text style
                        textStyle: &#123;
                            normal: &#123;
                                fontFamily: 'sans-serif',
                                fontWeight: 'bold',
                                // Color can be a callback function or a color string
                                color: function () &#123;
                                    // 随机颜色
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160)
                                    ].join(',') + ')';
                                &#125;
                            &#125;,
                            emphasis: &#123;
                                shadowBlur: 10,//文字块的背景阴影长度。
                                shadowColor: 'yellow'//文字块的背景阴影颜色。
                            &#125;
                        &#125;,

                // Data is an array. Each array item must have name and value property.
                // Data是一个数组。每个数组项必须具有名称和值属性
                data: [&#123;
                    name: '我喜欢你',
                    value: randomData(),
                    textStyle: &#123;
                        normal: &#123;&#125;,
                        emphasis: &#123;&#125;
                    &#125;
                &#125;,
                &#123;
                    name: '你在说什么',
                    value: randomData(),
                    textStyle: &#123;
                        normal: &#123;&#125;,
                        emphasis: &#123;&#125;
                    &#125;
                &#125;,
                &#123;
                    name: '妈妈咪呀',
                    value: randomData(),
                    textStyle: &#123;
                        normal: &#123;&#125;,
                        emphasis: &#123;&#125;
                    &#125;
                &#125;,&#123;
                    name: '阿西吧',
                    value: randomData(),
                    textStyle: &#123;
                        normal: &#123;&#125;,
                        emphasis: &#123;&#125;
                    &#125;
                &#125;,&#123;
                    name: '后来的我们',
                    value: randomData(),
                    textStyle: &#123;
                        normal: &#123;&#125;,
                        emphasis: &#123;&#125;
                    &#125;
                &#125;,]
            &#125;]
        &#125;);
        chart.setOption(option_s);

导入包
html中

<!-- 左边2 -->
<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

需要的js包
在这里插入图片描述

<div id="mid2"></div>
<script type="text/javascript" src="js/china.js"></script>
function getData()&#123;
    return Math.round(Math.random()*8000);
&#125;


 var data=[&#123;'name': '上海', 'value': getData()&#125;, &#123;'name': '云南', 'value': getData()&#125;,
    &#123;'name': '北京', 'value': getData()&#125;,&#123;'name': '黑龙江', 'value': getData()&#125;,
    &#123;'name': '新疆', 'value': getData()&#125;,&#123;'name': '福建', 'value': getData()&#125;,
    &#123;'name': '山西', 'value': getData()&#125;,&#123;'name': '海南', 'value': getData()&#125;,
    &#123;'name': '广西', 'value': getData()&#125;,&#123;'name': '吉林', 'value': getData()&#125;,
    &#123;'name': '四川', 'value': getData()&#125;,&#123;'name': '西藏', 'value':getData()&#125;,
    ];
var x = echarts.init(document.getElementById('mid2'),'dark');

var option = &#123;
        title:&#123;
            text:'中国疫情图',
            left:'center'    
        &#125;,
        tooltip:&#123;
            trigger:'item'
        &#125;,
        visualMap: &#123; // 左侧小导航图标
            show: true,
            x: 'left',
            y: 'bottom',
            textStyle: &#123;
                fontSize: 8,
            &#125;,
            splitList: [&#123; start: 1,end: 9 &#125;,
                &#123;start: 10, end: 99 &#125;, 
                &#123; start: 100, end: 999 &#125;,
                &#123;  start: 1000, end: 9999 &#125;,
                &#123; start: 10000 &#125;],
            color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
        &#125;,
        series: [&#123;
            name: '累计确诊人数',
            type: 'map',
            mapType: 'china',
            roam: false, // 禁用拖动和缩放
            itemStyle: &#123; // 图形样式
                normal: &#123;
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#009fe8', //区域边框颜色
                    areaColor: "#ffefd5", //区域颜色
                &#125;,
                emphasis: &#123; // 鼠标滑过地图高亮的相关设置
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor: "#fff",
                &#125;
            &#125;,
            label: &#123; // 图形上的文本标签
                normal: &#123;
                    show: true, //省份名称
                    fontSize: 8,
                &#125;,
                emphasis: &#123;
                    show: true,
                    fontSize: 8,
                &#125;
            &#125;,
            data:data
           /* data:[&#123;'name': '上海', 'value': 3418&#125;, &#123;'name': '云南', 'value': 1862&#125;,
                &#123;'name': '北京', 'value': 6418&#125;,&#123;'name': '黑龙江', 'value': 18418&#125;,
                &#123;'name': '新疆', 'value': 500&#125;,&#123;'name': '福建', 'value': 540&#125;,
                &#123;'name': '山西', 'value': 300&#125;,&#123;'name': '海南', 'value': 8&#125;,
                &#123;'name': '广西', 'value': 4&#125;,&#123;'name': '吉林', 'value': 5&#125;,
                &#123;'name': '四川', 'value': 1200&#125;,&#123;'name': '西藏', 'value':6&#125;,
                ]*/
        &#125;]
&#125;;

x.setOption(option);        

效果图

在这里插入图片描述


文章作者: RodmaChen
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 RodmaChen !
评论
 本篇
数据分析疫情图——day5 数据分析疫情图——day5
前言 好好学习,javaweb制作全国疫情展示,以下是今天学习的知识,今天疫情图的界面已经完成了,利用echarts绘制图形,官网:https://echarts.apache.org/zh/index.html 第一天:数据分析疫情图
2021-01-15 RodmaChen
下一篇 
网络工程与系统集成期末考核 网络工程与系统集成期末考核
前言: 这是我老师布置的作业,花了我半天时间(还是个小菜鸡),就写了一下笔记,记录一下学习过 本文已收录进我的小破站chenyunzhi.top 一. 划vlan 配trunk1.1 S-3700-A[Huawei]port-g
2020-12-20
  目录