Echarts实现数据可视化大屏

最新推荐文章于 2024-04-28 12:07:40 发布
最新推荐文章于 2024-04-28 12:07:40 发布
阅读量2.6k 收藏 25
点赞数 3
分类专栏： echarts 文章标签： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zh_1999a/article/details/108052586
版权
  1. #实例展示，使用echarts做一个电子地图，可视化大屏

最近因为工作原因，需要给销售部门做一个数据可视化大屏，显示产品的全国销售地图信息，做出来的样子就是下面这个样子。

可视化大屏

  1. 引入echarts.js模块
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://echarts.apache.org/examples/vendors/echarts/echarts-all-3.js"></script>
    <script src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js"></script>
</head>

这个地方引入了网上的echarts.js文件，还有中国地图。

  1. 创建一个Dom
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id = "id1" style="width: 1440px;height:980px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('id1'));
  1. 编写echarts可视化部分，使用var option={ }定义一个charts图表内容，backgroundColor：“ #2c343c“，表示背景颜色，title：{}后面的内容是表示标题
 var option1={
    backgroundColor: '#2c343c',
    title: {
        text: 'xx全国分布图',
        subtext: '仅个人用户',
        left: 'center',
        textStyle:{
            fontSize:25,
            color:"#fff"
        },
        subtestStyle:{
            fontSize:20,
            color:"#A68B36"}
          },
    tooltip: {
        trigger:"item",
        position:"inside",
             },
   '''
   

 5.可视化映射，

  
    visualMap: {
            min: 1,
            max: 500,
            text: ['销量Hight', '销量Low'],
            calculable: true,
            textStyle:{color:"#fff"},
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        itemSize:15,
        iconStyle:{
            color:'#fff',
            borderColor:"#666",
        },
        left:"1%",
        top: '8%',
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
                 }
            },

    grid:  [{left:"10%",
            top:"65%",
            bottom:"5%",
            right:"10%",
            show:'true',
            tooltip:{
                show:'true',
                trigger:"item",
            },
            textStyle: {color: '#fff'}
            },
            {left:"55%",
            top:"15%",
            bottom:"45%",
            right:"5%",
            textStyle:{color:"#fff"},
            tooltip:{
                show:'true',
                trigger:"item",
            }

            }],
    xAxis: [{
            data: ["0-10岁","10-20岁","20-30岁","30-40岁","40-50岁","50-60岁",
            "60-70岁","70-80岁","80岁以上","未知"],
            gridIndex:0,
            name:"年龄层（10岁每段）",
            axisLabel:{color:"#2A8339"},
            nameTextStyle: {
            color: '#fff'
        }
           },
           {
            data:['2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'],
            gridIndex:1,
            name:"时间/年",
            axisLabel:{color:"#2A8339"},
            nameTextStyle:{color:'#fff'}
           }],
    yAxis: [{name:"个人用户数量/人",
            axisLabel:{color:'#2A8339'},
            nameTextStyle: {color: '#fff'},
            gridIndex:0
           },
           {
            name:"产品年度销量/台",
            axisLabel:{color:'#2A8339'},
            nameTextStyle:{color:"#fff"},

            gridIndex:1

           }
           ],
    legend: {
        orient: 'horizontal',
        data:[{name:'A产品',icon:"circle"},
        {name:'B产品',icon:"circle"},
        {name:'C产品',icon:"circle"}],
        selectorLabel:{
            fontStyle:"normal",
            fontWeight:"bold",
            fontSize:"16"
        },
        left:"left",
        textStyle: {
            color: 'white',
            fontStyle:"normal",
        }},
    
    series: [
            {
                name: 'A产品',
                type: 'bar',
                color:'#003366',
                data: [64, 225, 241, 193, 211, 214,124,31,5,91],
                xAxisIndex:0,
                yAxisIndex:0,
            },
            {
                name:"B产品",
                type:"bar",
                color:'#006699',
                data:[24,97,128,117,97,136,70,34,3,83],
                xAxisIndex:0,
                yAxisIndex:0,
            },
            {
                name:"C产品",
                type:"bar",
                color:'#4cabce',
                data:[0,753,1041,201,17,1,1,0,1,152],
                xAxisIndex:0,
                yAxisIndex:0,
            },
            {
                name:"总数量",
                type:"line",
                color:'blue',
                data:[88,1075,1410,511,325,351,195,65,9,326],
                xAxisIndex:0,
                yAxisIndex:0,
            },
            {name:"A产品",
             type:"scatter",
             symbol:"pin",
             data:[24,77,112,176,168,68,107,127,91,166,157,96,29],
             xAxisIndex:1,
             yAxisIndex:1,
             symbolSize: function (data) {
            return Math.sqrt(data)*2;},
            color:"lightskyblue",
            },
            {name:"B产品",
             type:"scatter",
             symbol:"arrow",
             data:[0,0,1,0,99,133,81,75,74,113,101,74,38],
             xAxisIndex:1,
             yAxisIndex:1,
             symbolSize: function (data) {
            return Math.sqrt(data)*2;},
            color:"lightskyblue",
            },
            {name:"C产品",
             type:"scatter",
             symbol:"circle",
             data:[0,0,11,41,169,270,268,288,338,266,282,176,58],
             xAxisIndex:1,
             yAxisIndex:1,
             symbolSize: function (data) {
            return Math.sqrt(data)*2;},
            color:"lightskyblue",
            },
           {
                name:"三种分布",
                type:"pie",
                roseType:'angel',
                labelLine:{lineStyle:{color:"rgba(255,255,255,0.3)"}},
                center:["80%","75%"],
                radius:80,
                data:[{value:1399,name:"A产品"},
                     {value:789,name:"B产品"},
                     {value:2163,name:"C产品"}]
            },

        {
            name: 'A产品',
            type: 'map',
            layoutCenter:['25%',"35%"],
            layoutSize:700,
            tooltip:{trigger:"item"},
            mapType: 'china',
            roam: true,
            label: {
                    normal: {
                            show: true
                            },
                    emphasis: {
                             show: true
                               }
                    },
            data:[
                {name: '北京',value: 70 },
                {name: '天津',value: 21 },
                {name: '上海',value: 76 },
                {name: '重庆',value: 1 },
                {name: '河北',value:  65},
                {name: '河南',value: 88 },
                {name: '云南',value: 2 },
                {name: '辽宁',value: 146 },
                {name: '黑龙江',value:235},
                {name: '湖南',value: 2 },
                {name: '安徽',value:  6},
                {name: '山东',value:  129},
                {name: '新疆',value:  50},
                {name: '江苏',value: 64 },
                {name: '浙江',value: 16 },
                {name: '江西',value: 7 },
                {name: '湖北',value: 38 },
                {name: '广西',value:  15},
                {name: '甘肃',value: 9 },
                {name: '山西',value:  81},
                {name: '内蒙古',value: 21 },
                {name: '陕西',value: 68 },
                {name: '吉林',value: 43 },
                {name: '福建',value: 9 },
                {name: '贵州',value: 3 },
                {name: '广东',value: 69 },
                {name: '青海',value: 3 },
                {name: '西藏',value:  1},
                {name: '四川',value: 53 },
                {name: '宁夏',value: 6 },
                {name: '海南',value: 0 },
                {name: '台湾',value: 1 },
                {name: '香港',value: 1 },
                {name: '澳门',value:  0}
            ]
        },
        {
            name: 'B产品',
            type: 'map',
            layoutCenter:['25%',"35%"],
            layoutSize:700,
            tooltip:{trigger:"item"},
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: 13 },
                {name: '天津',value: 25},
                {name: '上海',value: 12 },
                {name: '重庆',value: 1 },
                {name: '河北',value: 54},
                {name: '河南',value: 103 },
                {name: '云南',value: 3},
                {name: '辽宁',value: 66 },
                {name: '黑龙江',value:82},
                {name: '湖南',value: 1 },
                {name: '安徽',value: 1},
                {name: '山东',value: 136},
                {name: '新疆',value: 30},
                {name: '江苏',value: 14 },
                {name: '浙江',value: 2 },
                {name: '江西',value: 1 },
                {name: '湖北',value: 28 },
                {name: '广西',value: 8},
                {name: '甘肃',value: 10},
                {name: '山西',value:  19},
                {name: '内蒙古',value: 6 },
                {name: '陕西',value: 74},
                {name: '吉林',value: 31 },
                {name: '福建',value: 1},
                {name: '贵州',value: 2 },
                {name: '广东',value: 26 },
                {name: '青海',value: 0},
                {name: '西藏',value: 1 },
                {name: '四川',value: 35 },
                {name: '宁夏',value: 4},
                {name: '海南',value: 0 },
                {name: '台湾',value: 0 },
                {name: '香港',value: 10 },
                {name: '澳门',value:  0}
            ]
        },
        {
            name: 'C产品',
            type: 'map',
            layoutCenter:['25%',"35%"],
            layoutSize:700,
            tooltip:{trigger:"item"},
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: 84 },
                {name: '天津',value: 23},
                {name: '上海',value: 115 },
                {name: '重庆',value: 11},
                {name: '河北',value: 81},
                {name: '河南',value: 294},
                {name: '云南',value: 9},
                {name: '辽宁',value: 64 },
                {name: '黑龙江',value:95},
                {name: '湖南',value: 70},
                {name: '安徽',value: 131},
                {name: '山东',value: 100},
                {name: '新疆',value: 11},
                {name: '江苏',value: 217},
                {name: '浙江',value: 129},
                {name: '江西',value: 56},
                {name: '湖北',value: 143},
                {name: '广西',value: 18},
                {name: '甘肃',value: 38},
                {name: '山西',value:  34},
                {name: '内蒙古',value: 32},
                {name: '陕西',value: 63},
                {name: '吉林',value: 17},
                {name: '福建',value: 33},
                {name: '贵州',value: 16},
                {name: '广东',value: 139},
                {name: '青海',value: 5},
                {name: '西藏',value: 3},
                {name: '四川',value: 129},
                {name: '宁夏',value: 5},
                {name: '海南',value: 1},
                {name: '台湾',value: 0},
                {name: '香港',value: 0},
                {name: '澳门',value: 1}
            ]
        }]
};

3.4 加载配置项及数据显示。
// 使用刚指定的配置项和数据显示图表。

    myChart1.setOption(option1);
    </script>
</body>
</html>
园游会的魔法糖
关注
  • 3
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts 实现的可视化数据大屏
05-27
收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码
ECharts 数据可视化大屏项目学习
最新发布
04-28
ECharts 数据可视化大屏项目学习
基于echarts 数据可视化大屏展示全国热点分布高亮地图特效
qq_365392777
10-23 2294
前言???? 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，...
ECharts大屏数据可视化展示项目 --- 上
weixin_53072248的博客
08-04 1075
​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等。
ECharts数据可视化项目-大屏数据可视化【持续更新中】_echarts可视化大屏开源项目
2401_84418908的博客
04-28 1982
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。▼flexible.js源码(可以直接新建一个js文件，复制粘贴过去，也可以私信我要源代码)no 模块里面上下划分 上面是数字（no-hd) 下面 是 相关文字说明(no-bd).数字模块no-hd布局完成(效果图)
Python机器学习---Pyecharts制作可视化大屏
weixin_48678602的博客
10-01 8163
文章目录Pyecharts可视化Map世界地图柱状图、饼图Pyecharts组合图表 ECharts是由百度开源的基于JS的商业级数据图表库，有很多现成的图表类型和实例，而Pyecharts则是为了方便我们使用Python实现ECharts的绘图。使用Pyecharts制作可视化大屏，可以分为两步： 1、使用分别Pyecharts分别制作各类图形； 2、使用Pyecharts中的组合图表功能，将所有图片拼接在一张html文件中进行展示。 小五认为影响大屏美观最重要的两个因素就是：配色和布局！在本文中，会特意
Vue + ECharts大屏可视化
自洽而内求
03-12 3232
大屏可视化构建工具：【阿里云的DataV】、【蚂蚁体验技术部 AntV 数据可视化】、【D3】、【G2】、【Vega】、【Vega-lite】以及常用于项目的【ECharts】
使用百度echarts制作可视化大屏
热门推荐
仅次于狼的博客
05-15 1万+
先看一下效果图（部分）我们现在就来完成这个第一个环形进度条。1、下载百度echarts和jquery，添加到你的页面中；&lt;script language="javascript" type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;&lt;script language="javascript" type
基于ECharts数据可视化大屏案例源码
12-03
基于ECharts数据可视化大屏案例源码
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
基于ECharts智慧社区数据可视化大屏源码
12-03
基于ECharts智慧社区数据可视化大屏源码
echarts数据可视化作业
01-14
echarts数据可视化 作业案例，js，html，css 帮助同学们更好的理解echarts 数据可视化 各个图表都做了案例
Echarts可视化数据展示大屏.rar
10-19
使用Echarts做的大数据展示大屏，所有样式设计在CSS中，有需要的可以看看，全部板块设计可进行二次开发。
超详细的组成原理实验报告
03-16
基于echarts的数据分析实例，可用于组成原理课设，本人已通过，分数90+
echarts-all.js下载
09-30
echarts-all.js
数据可视化课程设计大作业echarts特种设备综合监管数据可视化大屏源码.zip
06-17
数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码。数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码数据可视化大屏课程设计大作业echarts特种设备综合监管数据可视化大屏源码
echarts gallery 简单使用
我是泛滥
09-16 1万+
echarts gallery上有相应的图形对应的代码，复制即可使用。 1.html 引入echarts.js包 <script src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script> 2.选择echarts gallery中模板，只要复制echarts gallery上的代码插入到其中的位置就行。 中国地图展示 // 基于准
基echarts实现的地图，大屏数据可视化
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-07 961
基echarts实现的地图，大数据数据可视化 文章目录基echarts实现的地图，大数据数据可视化可视化项目：1、课程目标：2、项目介绍3、Echarts-介绍4、Echarts-体验5、Echarts-基础配置6、REM适配7、基础布局8、边框图片9、公用面板样式10、概览区域-布局11、监控区域-布局web前端入门到高级(视频+源码+资料+面试)一整套 (教程)源码获取更多echarts大屏数据可视化源码 可视化项目： 1、课程目标： 实践css布局相关技术 实践jquery相关技术 掌握
【16】数据可视化：基于 Echarts + Vue 实现的大屏范例 - 城市存量房大屏
YYDataV的博客
10-18 2265
❤️往期分享❤️ https://blog.csdn.net/lildkdkdkjf/article/details/120705616 文末有免费福利，喜欢的小伙伴们一键三连支持下，关注收藏点赞~ 目录 ❤️往期分享❤️ ❤️效果展示❤️ 1、首先看动态效果图 2、分片截图 一、确定需求方案 1、确定产品上线部署的屏幕LED分辨率 2、功能模块 3、部署方式 二、整体架构设计 Echarts图表 渲染图表 边框样式 三、编码实现 （基于篇幅及可读性考虑，此...
echarts员工数据可视化大屏
03-31
为了更好地展示echarts员工数据，我们可以使用大屏来进行可视化展示。以下是一个简单的大屏设计方案： 1. 大屏主题设计：选择与公司文化和特色相关的颜色和元素，例如蓝色和图表等。 2. 数据展示区域：在大屏幕中央，使用多个图表展示员工数据，如柱状图、饼图、折线图等，可以分别展示员工的性别、年龄、职位等信息。 3. 实时数据监控：在大屏幕上方或下方，添加一个实时数据监控区域，显示员工的出勤情况、绩效排名等信息。 4. 个人信息展示：在大屏幕左侧或右侧，添加一个个人信息展示区域，展示员工的照片、姓名、职位等信息，可以动态切换显示。 5. 公司信息展示：在大屏幕的底部，添加一个公司信息展示区域，展示公司的历史、文化、业务等信息。 6. 互动功能设计：为了增加用户体验，可以在大屏幕中添加一些互动功能，如翻页、投票、问答等，让员工参与其中，增强他们的参与感和归属感。 以上是一个简单的echarts员工数据可视化大屏设计方案，具体实现还需要根据实际情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值