精华内容
下载资源
问答
  • echarts数据可视化案例
    2022-02-28 16:28:58

    echarts官网:点击跳转

    npm安装

    npm install echarts@5.2.0 --save
    

    注意

    • 不要直接安装

      npm install echarts --save
      

      这样安装默认会安装最新版本,最新版本会有一些莫名其妙的bug,@5.2.0是前一个版本,5.2.0会稳定一些

    引入echarts

    main.js全局引入

    //踩过坑 import echarts from 'echarts' 会报错
    import * as echarts from 'echarts';
    
    // 起别名
    Vue.prototype.$echarts = echarts;
    

    创建一个容器

    <!-- 一个带宽高和id的div就可以了 
    	 *注意需要设置宽高 不然图表显示不出来 -->
    <div id="zhu" style="width: 100%;height: 400px;"></div>
    

    初始化

    //柱状图
    getZhu() {
          let myEchart = this.$echarts.init(document.getElementById("zhu"));
          myEchart.setOption({
            xAxis: {  //x轴
                //  数据条目名称
              data: ['90分以上', '70分-90分', '及格', '不及格']
            },
            yAxis: {}, //y轴
            series: [
              {
                type: 'bar',    //图表类别: bar :柱状图
                  //  值
                data: [8,15,36,19]
              }
            ]
          })
        }
    

    调用初始化方法

    //  *注意不要写在creatd()里  会出现dom元素未加载报错
    //  推荐写在mounted()里
    mounted() {
          this.getZhu()
      },
    

    效果图:
    柱状图

    折线图

    其他图表步骤大致相同,只有初始化的区别

    折线图初始化:

    series 中的 type 换成 line 就会绘制折线图

    getZhe() {
          let myEchart = this.$echarts.init(document.getElementById("zhu"));
          myEchart.setOption({
            xAxis: {
              data: ['90分以上', '70分-90分', '及格', '不及格']
            },
            yAxis: {},
            series: [
              {
                data: [8, 15, 36, 19],
                type: 'line'    //图表类别: line :折线图
              }
            ]
          })
        },
    

    效果图:

    在这里插入图片描述

    饼图

    饼图初始化:

    getBin() {
          let myEchart = this.$echarts.init(document.getElementById("zhu"));
          myEchart.setOption({
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '第二学期期末成绩',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 8, name: '90分以上' },
                  { value: 15, name: '70分-90分' },
                  { value: 36, name: '及格' },
                  { value: 19, name: '不及格' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        },
    

    效果图:

    在这里插入图片描述

    有更详细更高阶的需求可以查阅官方文档应用篇实例

    更多相关内容
  • 18个Echarts数据可视化图表案例:柱形图、饼图、折线图、雷达图、嵌套饼图、中国地图、世界地图、玫瑰图、散点图、漏斗图、仪表盘、热力图、桑基图、旭日图、K线图、柱形折线堆叠图、柱形饼图堆叠图、折线面积图。...
  • 基于ECharts数据可视化大屏案例源码
  • Echarts的大屏数据可视化集合数据可视化集合案例源码,包含会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。(75+24套)数据可视化集合,75套数据可视化源码,24套数据可视化源码。Echarts的...
  • Echarts数据可视化图表案例:包括柱图,饼图,折线图,地图等数据展示图表;案例下载后直接使用webstrom或idea打开,在编辑器内打开html
  • python echarts数据可视化实战

    千次阅读 2021-11-21 16:16:04
    python echarts数据可视化python echarts数据可视化引言词云分析柱状图分析饼图分析 python echarts数据可视化 引言 引言 上一章我给大家用一个简单的例子讲解了如何爬取特定网页上的大量数据看,并狗造成数据集,...

    python echarts数据可视化实战

    引言

    引言
    上一章我给大家用一个简单的例子讲解了如何爬取特定网页上的大量岗位数据,并构造成数据集,那么有了数据集之后我们就可以对其做一些可视化的指标分析。
    我们上一章爬取的就业岗位数据是存放在excel中的罗列的一条条数据:
    在这里插入图片描述
    那么对excel使用不熟悉的同学可能就面临难题了,怎么将这些数据进行不同维度的可视化分析,得到我们想要的结果呢,别急,我们慢慢来看。
    可视化有很多工具可选择,它们都可以做到绚酷的可视化效果,例如市面上常见的echarts、tableau等,这么多工具我们往往会使用其中一两种就足矣应付日常工作需要解决的可视化任务,这里我们给大家使用一个简单好用的方法来展现可视化,那就是用python自带的pyecharts包,我们无需安装更多的可视化工具软件,即可轻松做到数据可视化分析。

    词云分析

    我们有了大量岗位数据之后,怎么对这些岗位有一个最直观的认识呢,词云就是一个不错的办法,“词云”的概念就是通过形成“关键词云层”或“关键词渲染”,对网络文本中出现频率较高的“关键词”的视觉上的突出。词云图过滤掉大量的文本信息,使浏览网页者只要一眼扫过文本就可以领略文本的主旨,那么我们来看一下如何对岗位名称这一字段来做词云可视化,具体的python代码如下:

    # 引入pyecharts相关的包,并引入构建词云需要的包、引入读取csv文件需要的pandas包
    from pyecharts import options as opts
    from pyecharts.charts import WordCloud
    from pyecharts.globals import SymbolType
    import pandas as pd
    # 读取岗位数据,统计不同岗位名称的词频
    res = pd.read_csv('./test.csv')
    a_name = list(res.岗位信息.value_counts().index)
    a_count = res.岗位信息.value_counts().to_list()
    # 将词频数据转换成构建词云需要的格式
    a = zip(a_name,a_count)
    words = []
    for i in a:
        words.append(i)
    # 使用WordCloud词云模块,链式调用配置,最终生成html文件
    c = (
        WordCloud()
        .add("", words, word_size_range=[20, 100], shape=SymbolType.DIAMOND)
       .set_global_opts(title_opts=opts.TitleOpts(title="WordCloud-shape-diamond"))
    )
    c.render_notebook()
    

    我们来看一下得到的岗位名称词云图:
    在这里插入图片描述
    从图中可以看出,客服、销售、储备类岗位比较多,我们爬取的网站其实是一所经贸学校的就业网站,可以词云图的结果也是符合经贸学校的定位的。

    柱状图分析

    分析岗位信息肯定要关注的一个指标就是薪资分布,那么我们来看一下如何通过柱状图观察一下不同薪资范围的分布情况,使用pyecharts做柱状图可视化的方法如下:

    # 引入需要的pyecharts包
    from pyecharts import options as opts
    from pyecharts.charts import *
    import pandas as pd
    res = pd.read_csv('./test.csv')
    # 薪资频率统计
    x_index = list(res.薪资.value_counts().index)
    y_value1 = res.薪资.value_counts().to_list()
    # 设置柱状图
    bar = (
        Bar()
        .add_xaxis(x_index)
        .add_yaxis("薪资", y_value1) # y轴设置
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-薪资", subtitle="数量"))
        )
    bar.render_notebook()
    

    得到的柱状薪资分布图如下:
    在这里插入图片描述
    从图中可以看出,薪资区间在4500-5499范围等岗位数量是最多的,有300个。

    饼图分析

    刚刚我们通过词频可以分析出,数据集中数量最多的岗位是哪些,也通过柱状图可以得到不同薪资范围的岗位分布,那么我们如果想看不同类别岗位的占比呢,用上述两种图就不是很合适了,饼图可以很好的展现出不同类别的占比百分比情况,具有很强的直观性,饼图展示岗位占比的实现代码:

    # 引入相关包
    from pyecharts import options as opts
    from pyecharts.charts import Page, Pie
    import pandas as pd
    # 读取数据并统计不同职位类别的频率
    res = pd.read_csv('./test.csv')
    x_index = list(res.职位类别.value_counts().index)
    y_value1 = res.职位类别.value_counts().to_list()
    # 作饼图
    pie=(
             Pie()
            .add("", [list(z) for z in zip(x_index, y_value1)])
             .set_global_opts(title_opts=opts.TitleOpts(title="饼"))
            .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
             )
    pie.render_notebook()
    

    作出的饼图效果:
    在这里插入图片描述
    可以看出销售客服类的占比最多。

    总结

    本章我们通过pyeharts工具包教大家如何做一些基本的可视化分析图表,当然这些都是可视化分析的开始,更复杂的场景和可视化还需要更深入的探究。
    感谢您的阅读,如果您对博客内容的源码感兴趣,或者希望持续获得后续关于大数据分析的系列干货知识,可微信搜索“数据分析师进阶”或扫描以下二维码关注即可,公众号私信即可获取源码信息。
    在这里插入图片描述

    展开全文
  • 写者的毕业论文中没有涉及该部分实现,因此使用博客的方式记录案例或者功能的实现。 世界疫情实时展示和之前的中国疫情实时展示差不多,同样是使用了官方的地图插件,此外使用了Gallery社区的模板。重点一如既往的...

    前言

    本案例,如之前的几篇博客一样,依旧是使用ECharts来实现图表的展示。世界疫情的展示使用了世界地图和南丁格尔玫瑰图的形式来展示。使用Ajax和js后台处理数据和引入。
    ECharts参考官网:ECharts官网地址

    1.项目展示与示意图

    该项目目前已经上传gitee。点击访问

    以下是项目截图:
    世界疫情实时展示

    2.页面布局

    页面布局比之前中国实时展示的要简单许多。由于篇幅原因(可视化大屏建议宽高100%),只能使用两个图,于是页面布局非常简单。主要三部分,标题、全球地区累计确诊分布地图、海外疫情前二十玫瑰图。
    页面布局图此处省略。

    3.实现

    3.1 插件引入
    世界地图需要引入ECharts 4.8或者4.0以上的map插件支持,这些插件都可以去官方下载(注意ECharts5.0最新版本中不支持map地图插件,最好下载4.x版本的,写着使用的是4.8版本的)。Ajax请求需要使用JQuery.js插件支持。
    可以使用vs.code也可以直接使用IDEA组织代码管理。
    插件引入代码:

    <script src="./js/echarts.min.js"></script>
         <script src="./js/world.js"></script>   
    	<script src="./js/jquery.min.js"></script>	
        <link rel="stylesheet" href="./css/world01.css">
    

    3.2 前端布局
    前端布局非常简单,直接贴代码:

    <body>
        <div id="title">
            <span class="time"></span>
            <span class="author">作者:Krystal1(秀秀)</span>
            世界疫情实时展示
            <a class="link01" href="http://krystaljungen.gitee.io/my-krystal2/" target="_blank">| 中国疫情展示</a>
            <a class="link02" href="https://news.qq.com/zt2020/page/feiyan.htm?from=timeline&isappinstalled=0#/" target="_blank" >数据来源:腾讯新闻</a>
        </div>
    
        <div id="left1" ></div>
        <div id="left2" ></div>
         
    <script src="./js/world01.js"></script>
    </body>
    

    3.3 世界地区确诊分布地图的实现
    该功能先使用ECharts的世界地图插件,生成后,在js代码中注入数据,设置数据渲染,图例,颜色块等。下面将会讲解和贴该部分的代码,数据的渲染和处理将会在第四章中描述。
    注意:由于地图数据来源于官方,所以国家的name都会是英文的。需要配置国家别名转换,将英文名转换成中文。(这一步比较复杂,部分国家翻译可能不准确,写者将会上传自己转换集)
    实现示意图:
    世界地区确诊分布地图
    js代码:

    function getWorldMap(data){
    var myChart = echarts.init(
        document.getElementById('left1'), 'white', {renderer: 'canvas'});
    
    let  nameComparison = {
        'Canada':'加拿大',
        'Russia':'俄罗斯',
        'China':'中国',
        'United States':'美国',
        'Singapore Rep.':'新加坡',
        'Dominican Rep.':'多米尼加',
        'Palestine':'巴勒斯坦',
        'Bahamas':'巴哈马',
        'Timor-Leste':'东帝汶',
        'Afghanistan':'阿富汗',
        'Guinea-Bissau':'几内亚比绍',
        "Côted'Ivoire":'科特迪瓦',
        'Siachen Glacier':'锡亚琴冰川',
        "Br. Indian Ocean Ter.":'英属印度洋领土',
        'Angola':'安哥拉',
        'Albania':'阿尔巴尼亚',
        'United Arab Emirates':'阿联酋',
        'Argentina':'阿根廷',
        'Armenia':'亚美尼亚',
        'French Southern and Antarctic Lands':'法属南半球和南极领地',
        'Australia':'澳大利亚',
        'Austria':'奥地利',
        'Azerbaijan':'阿塞拜疆',
        'Burundi':'布隆迪',
        'Belgium':'比利时',
        'Benin':'贝宁',
        'Burkina Faso':'布基纳法索',
        'Bangladesh':'孟加拉',
        'Bulgaria':'保加利亚',
        'The Bahamas':'巴哈马',
        'Bosnia and Herz.':'波斯尼亚和黑塞哥维那',
        'Belarus':'白俄罗斯',
        'Belize':'伯利兹',
        'Bermuda':'百慕大',
        'Bolivia':'玻利维亚',
        'Brazil':'巴西',
        'Brunei':'文莱',
        'Bhutan':'不丹',
        'Botswana':'博茨瓦纳',
        'Central African Rep.':'中非共和国',
        'Switzerland':'瑞士',
        'Chile':'智利',
        'Ivory Coast':'象牙海岸',
        'Cameroon':'喀麦隆',
        'Dem. Rep. Congo':'刚果(金)',
        'Congo':'刚果(布)',
        'Colombia':'哥伦比亚',
        'Costa Rica':'哥斯达黎加',
        'Cuba':'古巴',
        'N. Cyprus':'北塞浦路斯',
        'Cyprus':'塞浦路斯',
        'Czech Rep.':'捷克',
        'Germany':'德国',
        'Djibouti':'吉布提',
        'Denmark':'丹麦',
        'Algeria':'阿尔及利亚',
        'Ecuador':'厄瓜多尔',
        'Egypt':'埃及',
        'Eritrea':'厄立特里亚',
        'Spain':'西班牙',
        'Estonia':'爱沙尼亚',
        'Ethiopia':'埃塞俄比亚',
        'Finland':'芬兰',
        'Fiji':'斐济',
        'Falkland Islands':'福克兰群岛',
        'France':'法国',
        'Gabon':'加蓬',
        'United Kingdom':'英国',
        'Georgia':'格鲁吉亚',
        'Ghana':'加纳',
        'Guinea':'几内亚',
        'Gambia':'冈比亚',
        'Guinea Bissau':'几内亚比绍',
        'Eq. Guinea':'赤道几内亚',
        'Greece':'希腊',
        'Greenland':'格林纳达',
        'Guatemala':'危地马拉',
        'French Guiana':'法属圭亚那',
        'Guyana':'圭亚那',
        'Honduras':'洪都拉斯',
        'Croatia':'克罗地亚',
        'Haiti':'海地',
        'Hungary':'匈牙利',
        'Indonesia':'印度尼西亚',
        'India':'印度',
        'Ireland':'爱尔兰',
        'Iran':'伊朗',
        'Iraq':'伊拉克',
        'Iceland':'冰岛',
        'Israel':'以色列',
        'Italy':'意大利',
        'Jamaica':'牙买加',
        'Jordan':'约旦',
        'Japan':'日本本土',
        'Kazakhstan':'哈萨克斯坦',
        'Kenya':'肯尼亚',
        'Kyrgyzstan':'吉尔吉斯斯坦',
        'Cambodia':'柬埔寨',
        'Korea':'韩国',
        'Kosovo':'科索沃',
        'Kuwait':'科威特',
        'Lao PDR':'老挝',
        'Lebanon':'黎巴嫩',
        'Liberia':'利比里亚',
        'Libya':'利比亚',
        'Sri Lanka':'斯里兰卡',
        'Lesotho':'莱索托',
        'Lithuania':'立陶宛',
        'Luxembourg':'卢森堡',
        'Latvia':'拉脱维亚',
        'Morocco':'摩洛哥',
        'Moldova':'摩尔多瓦',
        'Madagascar':'马达加斯加',
        'Mexico':'墨西哥',
        'Macedonia':'马其顿',
        'Mali':'马里',
        'Myanmar':'缅甸',
        'Montenegro':'黑山',
        'Mongolia':'蒙古',
        'Mozambique':'莫桑比克',
        'Mauritania':'毛里塔尼亚',
        'Malawi':'马拉维',
        'Malaysia':'马来西亚',
        'Namibia':'纳米比亚',
        'New Caledonia':'新喀里多尼亚',
        'Niger':'尼日尔',
        'Nigeria':'尼日利亚',
        'Nicaragua':'尼加拉瓜',
        'Netherlands':'荷兰',
        'Norway':'挪威',
        'Nepal':'尼泊尔',
        'New Zealand':'新西兰',
        'Oman':'阿曼',
        'Pakistan':'巴基斯坦',
        'Panama':'巴拿马',
        'Peru':'秘鲁',
        'Philippines':'菲律宾',
        'Papua New Guinea':'巴布亚新几内亚',
        'Poland':'波兰',
        'Puerto Rico':'波多黎各',
        'Dem. Rep. Korea':'朝鲜',
        'Portugal':'葡萄牙',
        'Paraguay':'巴拉圭',
        'Qatar':'卡塔尔',
        'Romania':'罗马尼亚',
        'Rwanda':'卢旺达',
        'W. Sahara':'西撒哈拉',
        'Saudi Arabia':'沙特阿拉伯',
        'Sudan':'苏丹',
        'S. Sudan':'苏丹',
        'Senegal':'塞内加尔',
        'Solomon Is.':'所罗门群岛',
        'Sierra Leone':'塞拉利昂',
        'El Salvador':'萨尔瓦多',
        'Somaliland':'索马里兰',
        'Somalia':'索马里',
        'Serbia':'塞尔维亚',
        'Suriname':'苏里南',
        'Slovakia':'斯洛伐克',
        'Slovenia':'斯洛文尼亚',
        'Sweden':'瑞典',
        'Swaziland':'斯威士兰',
        'Syria':'叙利亚',
        'Chad':'乍得',
        'Togo':'多哥',
        'Thailand':'泰国',
        'Tajikistan':'塔吉克斯坦',
        'Turkmenistan':'土库曼斯坦',
        'East Timor':'东帝汶',
        'Trinidad and Tobago':'特里尼达和多巴哥',
        'Tunisia':'突尼斯',
        'Turkey':'土耳其',
        'Tanzania':'坦桑尼亚',
        'Uganda':'乌干达',
        'Ukraine':'乌克兰',
        'Uruguay':'乌拉圭',
        'Uzbekistan':'乌兹别克斯坦',
        'Venezuela':'委内瑞拉',
        'Vietnam':'越南',
        'Vanuatu':'瓦努阿图',
        'West Bank':'西岸',
        'Yemen':'也门',
        'South Africa':'南非',
        'Zambia':'赞比亚',
        'Zimbabwe':'津巴布韦',
        'Côte d\'\Ivoire':'科特迪瓦'
    };
    // var option代表定义一个名为option的变量,后面花括号里的代表我们需要作图的参数设置
    var option = {
    // 默认的颜色数组 (如果不明确设置每个数据项的颜色,则会采用默认的数组
    // 此处的颜色为十六进制表示,也可以使用rgb来表示。简单地理解就是一串字符就代表一个颜色,挑选喜欢的颜色可以自行搜索颜色
    //"color": ["#ac6767","#1d953f","#6950a1","#918597"],
        title:{
            text:'\n\n全球地区累计确诊分布',
    			left:'center',
    			textStyle: {
    				fontSize: 27,
    				color: 'black'
    			  },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        }, 
        visualMap:{ //左侧小导航图标
            show:true,
            x:'left',
            y:'bottom',
            textStyle:{
                fontSize:15,
            },
            splitList:[
                {start:1,end: 9},
                {start:10,end:99},
                {start:100,end:999},
                {start:1000,end:9999},
                {start:10000,end:99999},
                {start:100000,end:999999},
                {start:1000000,end:9999999},
                {start:10000000}],
            
            color:['#2F0000','#4D0000','#600000','#750000','#930000','#AE0000','#CE0000','#FF9797']	
        },
        tooltip: {// 鼠标悬浮,单击产生的效果(在网页上可以动态显示)
            show: true,
            trigger: "item",
            triggerOn: "mousemove|click",
            axisPointer: {
                type: "line"
            },
            textStyle: {
                "fontSize": 14
            },
            "borderWidth": 0
        },
    
        series: [{
                // 图标类型为 地图
                type:'map',
                name:'累计确诊人数',
                nameMap: nameComparison,
                roam:false,		//禁用拖动和缩放
                label: {
                    show: false,
                    position: "top",
                    margin: 8
                },
                mapType: 'world',  // 地图类型为 世界地图
                // data里的每一个{}中,是一项数据整体,标明了该项数据的名称,值,以及颜色等参数。注意:此处的字符串需要加双引号""(输入法切换至英文状态)
              
                
                "zoom": 1,
                // 去除各个国家上的小红点
                showLegendSymbol: false,
                itemStyle:{		//图形样式
    				normal:{
    					borderWidth: .3,//区域边框宽度
    					borderColor:'#009fe8',//区域边框颜色
    					areaColor:'#ffefd5',       //区域颜色
    				},
    				emphasis:{      //鼠标滑过地图高亮的相关设置
    				borderWidth: .5,
    				borderColor:'#4b0082',
    				areaColor:'#fff',
    				}
    			},  
                data: [{name:'中国',value:chinaConfirm}], //数据  ***关键***
        }],
        };
        //世界个国家数据注入
        var countries = data;
        for(var country of countries){
            //console.log(country);
            option.series[0].data.push({
                name:country.name,
                value:country.confirm
            })
        }
    
        myChart.setOption(option);
    }
    

    3.4 海外疫情前二十南丁格尔玫瑰图实现
    该部分使用了Gallery社区的开源作品。由于更换了网站名,没有找到以前引用的作者。该社区链接:Gallery开源社区 该社区内有许多基于ECharts实现的图表,复制即可实现,开箱食用,注入数据即可完成渲染。

    海外疫情前二十玫瑰图主要摘取了世界疫情确诊前二十的国家,以半径为判定标准(半径值取决于该国家确诊人数),该国家的确诊人数越多则半径越长。此外每片扇区的颜色不同,以红色衰减。图例则显示这二十个国家的确诊人数和死亡人数,这部分是使用了echarts的formatter回调函数写的。

    该功能数据的引入使用的是Array数组引入,部分代码冗余,有待优化。关于数据爬取和处理,在下面的第四章中描述。

    海外疫情前二十的效果图:
    海外疫情前二十玫瑰图
    js实现:

    function getNightingaleRose(countryName,countryConfirm,countryDead){  //南丁格尔玫瑰图
        var myChart = echarts.init(document.getElementById('left2'),'white');
        var legenddata = [
            {name:countryName[0],Confirmed:countryConfirm[0],Dead:countryDead[0]},
            {name:countryName[1],Confirmed:countryConfirm[1],Dead:countryDead[1]},
            {name:countryName[2],Confirmed:countryConfirm[2],Dead:countryDead[2]},
            {name:countryName[3],Confirmed:countryConfirm[3],Dead:countryDead[3]},
            {name:countryName[4],Confirmed:countryConfirm[4],Dead:countryDead[4]},
            {name:countryName[5],Confirmed:countryConfirm[5],Dead:countryDead[5]},
            {name:countryName[6],Confirmed:countryConfirm[6],Dead:countryDead[6]},
            {name:countryName[7],Confirmed:countryConfirm[7],Dead:countryDead[7]},
            {name:countryName[8],Confirmed:countryConfirm[8],Dead:countryDead[8]},
            {name:countryName[9],Confirmed:countryConfirm[9],Dead:countryDead[9]},
            {name:countryName[10],Confirmed:countryConfirm[10],Dead:countryDead[10]},
            {name:countryName[11],Confirmed:countryConfirm[11],Dead:countryDead[11]},
            {name:countryName[12],Confirmed:countryConfirm[12],Dead:countryDead[12]},
            {name:countryName[13],Confirmed:countryConfirm[13],Dead:countryDead[13]},
            {name:countryName[14],Confirmed:countryConfirm[14],Dead:countryDead[14]},
            {name:countryName[15],Confirmed:countryConfirm[15],Dead:countryDead[15]},
            {name:countryName[16],Confirmed:countryConfirm[16],Dead:countryDead[16]},
            {name:countryName[17],Confirmed:countryConfirm[17],Dead:countryDead[17]},
            {name:countryName[18],Confirmed:countryConfirm[18],Dead:countryDead[18]},
            {name:countryName[19],Confirmed:countryConfirm[19],Dead:countryDead[19]},        
        ],
             
            option = {
             dataset: {
                source: [
                   
                    ['Country','Confirmed','SQRT','Dead'],
                    [countryName[0],countryConfirm[0],Math.sqrt(countryConfirm[0]),countryDead[0]],
                    [countryName[1],countryConfirm[1],Math.sqrt(countryConfirm[1]),countryDead[1]],
                    [countryName[2],countryConfirm[2],Math.sqrt(countryConfirm[2]),countryDead[2]],
                    [countryName[3],countryConfirm[3],Math.sqrt(countryConfirm[3]),countryDead[3]],
                    [countryName[4],countryConfirm[4],Math.sqrt(countryConfirm[4]),countryDead[4]],
                    [countryName[5],countryConfirm[5],Math.sqrt(countryConfirm[5]),countryDead[5]],
                    [countryName[6],countryConfirm[6],Math.sqrt(countryConfirm[6]),countryDead[6]],
                    [countryName[7],countryConfirm[7],Math.sqrt(countryConfirm[7]),countryDead[7]],
                    [countryName[8],countryConfirm[8],Math.sqrt(countryConfirm[8]),countryDead[8]],
                    [countryName[9],countryConfirm[9],Math.sqrt(countryConfirm[9]),countryDead[9]],
                    [countryName[10],countryConfirm[10],Math.sqrt(countryConfirm[10]),countryDead[10]],
                    [countryName[11],countryConfirm[11],Math.sqrt(countryConfirm[11]),countryDead[11]],
                    [countryName[12],countryConfirm[12],Math.sqrt(countryConfirm[12]),countryDead[12]],
                    [countryName[13],countryConfirm[13],Math.sqrt(countryConfirm[13]),countryDead[13]],
                    [countryName[14],countryConfirm[14],Math.sqrt(countryConfirm[14]),countryDead[14]],
                    [countryName[15],countryConfirm[15],Math.sqrt(countryConfirm[15]),countryDead[15]],
                    [countryName[16],countryConfirm[16],Math.sqrt(countryConfirm[16]),countryDead[16]],
                    [countryName[17],countryConfirm[17],Math.sqrt(countryConfirm[17]),countryDead[17]],
                    [countryName[18],countryConfirm[18],Math.sqrt(countryConfirm[18]),countryDead[18]],
                    [countryName[19],countryConfirm[19],Math.sqrt(countryConfirm[19]),countryDead[19]],              
                ]
             },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    //restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
                title: {
                    text: '海外疫情前二十玫瑰图',
                    //subtext: '\n\t\t\t\t\t\t使用秀秀的数据\n\n——by Krystal1',
                    x: '50%',
                    y: '50',
                    textStyle:{
                        fontSize:27,
                        fontWeight:'bold',
                        fontFamily:'Microsoft YaHei',
                        color:'#000'
                    },
                    subtextStyle:
                    {
                        fontStyle:'italic',
                        fontSize:14
                    }
                },
                legend: {
                    x: 'right',//水平位置,【left\center\right\数字】
                    y: '150',//垂直位置,【top\center\bottom\数字】
                    align:'left',//字在图例的左边或右边【left/right】
                    orient:'vertical',//图例方向【horizontal/vertical】
                    icon: "circle",   //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
                    textStyle://图例文字
                    {
                        fontFamily:'微软雅黑',
                        color:'#000',
                        
                    },
                    data: countryName,
                    formatter: function(params)  {
                        //console.log('图例参数',params) 
                        for (var i=0;i<legenddata.length;i++){
                              if (legenddata[i].name== params){
                                  return params+"\t确诊:"+legenddata[i].Confirmed+"\t死亡:"+legenddata[i].Dead;
                                 }
                        }
                    }
                },
             
                calculable: true,
                series: [
                    {
                        name: '半径模式',
                        type: 'pie',
                        clockWise: false ,
                        radius: [20, 400],
                        center: ['35%', '65%'],
                        roseType: 'area',          //指定南丁格尔玫瑰图
                        encode: {
                        itemName: 'Country',
                        value: 'SQRT'
                                },
                        itemStyle: {
                            normal: {
                            color: function(params) {
                                   var colorList = [
                        "#a71a4f","#bc1540","#c71b1b","#d93824","#ce4018","#d15122","#e7741b","#e58b3d","#e59524","#dc9e31","#da9c2d",
                        "#d2b130","#bbd337","#8cc13f","#67b52d","#53b440","#48af54","#479c7f","#48a698","#57868c"
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    position: 'inside',
                                    textStyle:
                                    {   
                                        fontWeight:'bold',
                                        fontFamily:'Microsoft YaHei',
                                        color:'#FAFAFA',
                                        fontSize:10
                                    },
                                    formatter:'{b} \n{@Confirmed}例 \n死亡{@Dead}',//注意这里大小写敏感
                                    formatter : function(params) 
                                    {  //console.log('参数列表',params) 
                                        if(params.data[1]>3000000)
                                        {return params.data[0]+'\n'+params.data[1]+"例"+'\n'+"死亡"+params.data[3]+"例";}
                                        else{return "";}
                                    },       
                                },
                            },
                },
                    },
                    {
                        name:'透明圆圈',
                        type:'pie',
                        radius: [10,27],
                        center: ['35%', '65%'],
                        itemStyle: {
                                color: 'rgba(250, 250, 250, 0.3)',
                        },
                        data:[
                            {value:10,name:''}
                        ]
                    },
                    {
                        name:'透明圆圈',
                        type:'pie',
                        radius: [10,35],
                        center: ['35%', '65%'],
                        itemStyle: {
                                color: 'rgba(250, 250, 250, 0.3)',
                        },
                        data:[
                            {value:10,name:''}
                        ]
                    }
                        ]
            };
           myChart.setOption(option); 
    }
    

    4.数据爬取与处理

    该部分采用Ajax实现。数据的获取函数以每秒钟执行一次来实现实时获取。数据主要来源于腾讯。网址:腾讯新闻

    js代码:

    function getData(){
        $.ajax({  //中国数据单独获取,获取后直接赋值
    		url:'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
    		data:{
    			name:'disease_h5'
    		},
    		dataType:'jsonp',
    		success:function(res){
    			var data = JSON.parse(res.data);
    			var chinaArray = data.areaTree[0];
                chinaConfirm = chinaArray.total.confirm;
                //console.log("中国人数"+chinaConfirm)
    		}
    	});
    
    	$.ajax({  //全球各国数据获取,存入data传入函数
    		type:'post',
    		url:'https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist',
    		dataType:'json',
    		success:function(res){
    			var data = res.data;
    			getWorldMap(data);
                var countries = data;
                var count=0;          //计数,取前20个国家
                 //存储前20个国家的数据(name,confirm,dead)
                var countryName = [];
                var countryConfirm = [];
                var countryDead = [];
                for(var country of countries){
                    //console.log(country);
                    if(count==20){
                        break;
                    }else{
                    countryName[count]=country.name
                    countryConfirm[count]=country.confirm
                    countryDead[count]=country.dead
                    count++
                }
                }
                 getNightingaleRose(countryName,countryConfirm,countryDead);
    		}
    	});
    }
    getData();                      //执行数据获取
    setInterval(getData,1000);   //每1s查询获取一次数据
    

    后记

    该案例实现在写者的毕业设计中,只因论文中实现篇幅较大不足以添加,故记录于此。其中,海外疫情前二十的实现借助了开源社区Gallery的大神作品,其余皆为原创,部分代码有待优化,欢迎指出。
    欢迎大家指点学习,欢迎私信写者。

    展开全文
  • Vue3/ECharts5数据可视化(大屏展示)项目案例源码,一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化(大屏展示)项目。此项目使用'.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,全局...
  • 主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Echats可视化大屏经典案例

    收集整理一些ECharts实现可视化大屏效果的一些经典案例,方便在工作的时候及时的响应客户,及修改展示,根据业务需求在此基础修改即可。

    第一篇为Echarts入门文档,如果没有Echarts基础,理解起来比较费劲,这个需要建立在有一定的编程基础的前端开发人员,最起码要掌握html+css+javascript.

    简单看一下第一篇文章里面专有词汇是什么意思,一些创建Dom空间,配置数据的规则和方法,怎么展示数据,如果是后台传过来的数据,直接先获取,按照同样的规则展示即可。

    目录

    【ECharts系列|01入门】 从入门到天黑【入门级教程实战】 

    基于Echats实现的可视化大屏展示【人口分析】

    基于Echats实现可视化大屏大数据管理平台的实现

    基于Echats的可视化大屏通用大数据可视化展示模版

    基于Echats的可视化大屏物流汇总看板

    基于Echats的可视化大屏智慧物流服务中心

    基于Echats的可视化大屏数据可视化demo

    基于Echats的可视化大屏新能源车联网综合大数据平台

    基于Echarts的可视化大屏可视化监控管理

    基于Echarts的可视化大屏智慧社区内网数据比对信息系统

    基于Echarts的可视化大屏物联网平台数据统计

    基于Echats的可视化大屏设备环境监测平台大数据

    基于Echats的可视化大屏数据概览

    基于Echarts的可视化大屏散点图

    基于Echats的可视化大屏大数据运维总览图

    基于Echats的可视化大屏大数据智慧能力 - 网络能力展示

    基于Echarts的可视化大屏Et使用示例网页demo

    基于Echarts的可视化大屏理工云

    基于Echarts的可视化大屏物流大数据平台

    基于Echats的可视化大屏WEATHER STATION

    基于Echarts的可视化大屏湖南省大数据可视化平台

     


    【ECharts系列|01入门】 从入门到天黑【入门级教程实战】 

    基于Echats实现的可视化大屏展示【人口分析】

    基于Echats实现可视化大屏大数据管理平台的实现

    基于Echats的可视化大屏通用大数据可视化展示模版

    基于Echats的可视化大屏物流汇总看板

    测试username/password

    username:admin

    pw:admin

    基于Echats的可视化大屏智慧物流服务中心

    基于Echats的可视化大屏数据可视化demo

    百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥,或此密钥未对本应用的百度地图JavaScriptAPI授权。您可以访问如下网址了解如何获取有效的密钥:http://lbsyun.baidu.com/apiconsole/key#。

    基于Echats的可视化大屏新能源车联网综合大数据平台

     

     

    基于Echarts的可视化大屏可视化监控管理

    百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥,或此密钥未对本应用的百度地图JavaScriptAPI授权。您可以访问如下网址了解如何获取有效的密钥:http://lbsyun.baidu.com/apiconsole/key#。

    基于Echarts的可视化大屏智慧社区内网数据比对信息系统

    基于Echarts的可视化大屏物联网平台数据统计

    基于Echats的可视化大屏设备环境监测平台大数据

    基于Echats的可视化大屏数据概览

    基于Echarts的可视化大屏散点图

    基于Echats的可视化大屏大数据运维总览图

    基于Echats的可视化大屏大数据智慧能力 - 网络能力展示

    基于Echarts的可视化大屏Et使用示例网页demo

    基于Echarts的可视化大屏理工云

    基于Echarts的可视化大屏物流大数据平台

    基于Echats的可视化大屏WEATHER STATION

    基于Echarts的可视化大屏湖南省大数据可视化平台

    展开全文
  • vue+echarts数据可视化大屏毕业人员分析统计大屏数据可视化,Echarts图表直接进入 ​​components/​​下的文件修改成你想要的 echarts 图表,可以去echars官网里面查看案例
  • 数据可视化-echarts入门、常见图表案例及项目案例 一、简介 一、数据可视化简介 什么是数据可视化数据可视化是将数据库中每一个数据项作为单个图元元素表示,大量的数据集构成数据图像,同时将数据的各个属性值...
  • Vue中使用ECharts数据可视化
  • Echarts绘制各种图表案例,饼图、雷达图、柱形图、折线图、中国地图、世界地图、玫瑰图、嵌套饼图、漏斗图、仪表盘、K线图、热力图、桑基图、旭日图、柱形堆叠图
  • 【1-10】套Python+Echarts数据可视化大屏案例(共10套).zip,【源码】数据可视化:基于 Echarts + Python 实现的动态实时大屏范例8-旅游服务,httpserver.py,templates,index,index.html,echart,common.html,dataset....
  • 【11-20】套Python+Echarts数据可视化大屏案例(共10套).zip,【源码】数据可视化:基于 Echarts + Vue 实现的大屏范例15-世界人口统计大屏,.gitignore,README.md,public,index.html,favicon.ico,package.json,src,...
  • 实验报告-Echarts数据可视化

    千次阅读 2021-10-27 21:07:23
    实训题目:Echarts数据可视化 实训目的: 一、软件Hbuilder 的安装与基本使用 二、创建项目:HTML文件、JS文件、CSS文件基本使用 三、新建项目、Web可视化项目 输入项目名称后继续 四、Echarts资源下载 五、Echarts...
  • echarts数据可视化作业

    2021-01-14 11:44:09
    echarts数据可视化 作业案例,js,html,css 帮助同学们更好的理解echarts 数据可视化 各个图表都做了案例
  • 文章目录DAY01-可视化项目01-项目介绍02-使用技术03-Echarts-介绍04-Echarts-体验初始化echarts实例对象05-Echarts-基础配置06-REM适配07-基础布局08-边框图片09-公用面板样式10-概览区域(overview)-布局11-监控区域...
  • 本文章主要使用echart 和 jQuery实现酷炫的数据可视化项目,对初学者来说,能快速上手数据可视话,编程小白也能根据复制粘贴实现项目哦!!!
  • 基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址)前言演示地址下载地址Demo示例(部分)1、总览2、物流信息展示3、车辆综合管控平台4、农业监测大数据指挥舱5、水质...
  • ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识: div ...
  • ECharts数据可视化项目

    2022-04-04 18:33:20
    ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识: div ...
  • (文末查看送书规则)Apache ECharts (incubating),下文简称ECharts,是由百度捐献给Apache开源软件基金会的一个开源可视化工具,目前广泛应用于PC端和移...
  • 注:数据均保存在app.js中 打开页面前 请在终端使用 node .\app.js。
  • 前端echarts图表可视化大屏开发案例,内含三个小案例,每个案例本地可运行
  • 分析一下我们的项目的布局情况我们的项目分成两个大的盒子,上下各一个,下面的盒子又...首先要进行css的初始在index.less里面我们这个页面采取的是rem+flexible.js适配方案来做,所以我们先来说一下案例的适配方案。
  • ECharts实现数据可视化入门教程(超详细)

    万次阅读 多人点赞 2021-02-20 16:46:34
    ECharts实现数据可视化入门教程(超详细)ECharts介绍ECharts入门教程第一步:下载并引入scharts.js文件第二步:编写代码目录结构编写index.html代码效果展示ECharts的基础配置主要配置(常用的)案例讲解 ECharts...
  • Echarts数据可视化图表案例(拿来即用)
  • 本项目中使用的是echarts图表库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,927
精华内容 1,570
关键字:

echarts数据可视化案例

友情链接: vb-zuobiao.rar