今天，我们采用echarts数据可视化图形来做一个简单的数据可视化页面。

其中，涉及到一些css文件、js文件等等，都可以在这个博主的github上下载到，路过的小伙伴欢迎star！！

Echarts-Demo/css at master · nichan-13/Echarts-Demo · GitHub，从github上下载好文件之后，只需要放在相应位置就可以了。

如果有什么地方代码不清楚不明白的，可以看看这个老师的b站视频，强烈安利，老师讲的很详细！！！ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作-pink老师直播课更新完毕）_哔哩哔哩_bilibili

步骤：

1、先布置框架，代码文件的框架为：

2、制作echarts可视化看板的“head”头部部分：

其中包括两个部分：

整个echarts可视化看板的标题
展示当前的时间

（1）css文件中的head头部代码部分为：

// css 初始化
* {margin: 0;padding: 0;box-sizing: border-box;// overflow: hidden;
}li {list-style: none;   // 去掉前面的圆点
}// 声明字体
@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF);
}body {background: url(../images/bg.jpg) no-repeat top center;line-height: 1.15;
}header {position: relative;height: 1.25rem;background: url(../images/head_bg.png) no-repeat;background-size: 100% 100%;h1 {font-size: .475rem;color: rgba(255, 255, 255, 0.87);text-align: center;line-height: 1rem;}.show-time {position: absolute;top: 0;right: .375rem;line-height: .9375rem;color: rgba(255, 255, 255, 0.7);font-size: 0.25rem;}
}

（2）html文件中的head头部代码部分为：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数据可视化</title><link rel="stylesheet" href="css/index.css" /></head><body><!-- 头部 --><header><h1>数据可视化-ECharts</h1><div class="show-time"></div><script>// 格式：当前时间：2022年5月3日-13时20分24秒var t = null;t = setTimeout(time, 1000); //开始运行function time() {clearTimeout(t); //清除定时器dt = new Date();var y = dt.getFullYear();var mt = dt.getMonth() + 1;var day = dt.getDate();var h = dt.getHours(); //获取时var m = dt.getMinutes(); //获取分var s = dt.getSeconds(); //获取秒document.querySelector(".show-time").innerHTML = "当前时间：" + y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";t = setTimeout(time, 1000); //设定定时器，循环运行}</script></header></body>
</html>

（3）浏览器显示的页面效果：

3、布局“页面主体盒子”部分

其中包括几个部分：

左边盒子包含三个echarts可视化图
中间盒子放一个地图map
右边盒子包含三个echarts可视化图

（1）css文件中的head头部代码部分为：

// 页面主体盒子
.mainbox {display: flex;min-width: 1024px;max-height: 1920px;margin: 0 auto;padding: .125rem .125rem 0;       // 上、左右边距.column {flex: 3;  // 整个页面分为三列}.column:nth-child(2) {flex: 5;margin: 0 .125rem .1875rem;  // 外边距// 图片旋转有时会超出屏幕最大位置导致滚动条自动上下移动overflow: hidden;}.panel {position: relative;height: 3.875rem;padding: 0 .1875rem .5rem;margin-bottom: .1875rem;  // 下外边距border: 1px solid rgba(25, 186, 139, 0.17);background: url(../images/line.png) rgba(255, 255, 255, 0.03);  // 背景// 伪元素：设置小边框&::before {position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: '';}&::after {position: absolute;top: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: '';}.panel-footer {position: absolute;bottom: 0;left: 0;width: 100%;&::before {position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: '';}&::after {position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: '';}}h2 {height: .6rem;color: #fff;line-height: .6rem;text-align: center;font-size: 0.25rem;font-weight: 400;a {color: rgb(167, 167, 167);text-decoration: none;margin: 0 .125rem;}.a-active {color: #fff;}}.chart {height: 3rem;}}
}

（2）html文件中的head头部代码部分为：

<!-- 页面主体部分 --><section class="mainbox"><!-- 左侧盒子 --><div class="column"><div class="panel bar"><h2>柱形图-就业行业</h2><!-- 图表放置盒子 --><div class="chart"></div><!-- 伪元素绘制盒子下边角 --><div class="panel-footer"></div></div><div class="panel line"><h2>折线图-人员变化<a class="a-active" href="javascript:;">2020</a><a href="javascript:;">2021</a></h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie"><h2>饼形图-年龄分布</h2><div class="chart"></div><div class="panel-footer"></div></div></div><!-- 中间盒子 --><div class="column"><!-- 头部 no模块 --><div class="no"><div class="no-hd"><ul><li>12434</li><li>10983</li></ul></div><div class="no-bd"><ul><li>前端需求人数</li><li>市场供应人数</li></ul></div></div><!-- map模块 --><div class="map"><div class="map1"></div><div class="map2"></div><div class="map3"></div><div class="chart"></div></div></div><!-- 右侧盒子 --><div class="column"><div class="panel bar2"><h2>折线图-播放量</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel line2"><h2>柱形图-就业行业</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie2"><h2>饼形图-地区分布</h2><div class="chart"></div><div class="panel-footer"></div></div></div></section>

其中，要注意不要忘记引用js文件：

<script src="js/flexible.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>

（3）浏览器显示的页面效果：

4、接下来需要将echarts可视化图导入到类名为“chart”的“div”标签中

其中包括几个部分：

左边盒子中的三个echarts可视化图：柱状图1、折线图1、饼图1
中间盒子中的地图map，包括四个部分：map1、map2、map3、地图
右边盒子包含三个echarts可视化图：柱状图2、折线图2、饼图2

（1）css文件中的head头部代码部分为：

// no数字模块
.no {background-color: rgba(101, 132, 226, 0.1);padding: .1875rem;  // 边距.no-hd {position: relative;border: 1px solid rgba(25, 186, 139, 0.17);&::before {position: absolute;top: 0;left: 0;width: .375rem;height: .125rem;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;content: '';}&::after {position: absolute;bottom: 0;right: 0;width: .375rem;height: .125rem;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;content: '';}ul {display: flex;li {position: relative;flex: 1;  // 每一个小li各占一份line-height: 1rem;font-size: .875rem;color: #ffeb7b;text-align: center;font-family: electronicFont;&:first-child::after {content: '';position: absolute;top: 25%;right: 0;height: 50%;width: 1px;background-color: rgba(255, 255, 255, 0.3);}}}}.no-bd {ul {display: flex;li {flex: 1;    // 小例各占一份text-align: center;color: rgba(255, 255, 255, 0.7);font-size: .225rem;height: .5rem;line-height: .5rem;padding-top: .125rem;}}}
}.map {position: relative;height: 10.125rem;.map1 {  // 球体图片模块width: 6.475rem;height: 6.475rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(../images/map.png);background-size: 100% 100%;  // 保证缩放opacity: 0.3;}.map2 {  // 旋转球体模块position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8.0375rem;height: 8.0375rem;background: url(../images/lbx.png);background-size: 100% 100%;animation: rotate1 15s linear infinite;  // 顺时针匀速旋转，无限循环opacity: .6;}.map3 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 7.075rem;height: 7.075rem;background: url(../images/jt.png);background-size: 100% 100%;animation: rotate2 10s linear infinite;  // 逆时针匀速旋转，无限旋转}.chart {position: absolute;top: 0;left: 0;height: 10.125rem;width: 100%;}@keyframes rotate1 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(360deg);}}@keyframes rotate2 {from {transform: translate(-50%, -50%) rotate(360deg);}to {transform: translate(-50%, -50%) rotate(0deg);}}
}/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {html {font-size: 42px !important;}
}
@media screen and (min-width: 1920px) {html {font-size: 80px !important;}
}

（2）需要在index.js文件中编写这些echarts可视化图，

// 立即执行函数，防止变量污染 (function() {})();// 柱状图模块1
(function () {// 1.实例化对象var myChart = echarts.init(document.querySelector(".bar .chart"));// 2.指定配置项和数据var option = {color: ['#2f89cf'],// 提示框组件tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},// 修改图表位置大小grid: {left: '0%',top: '10px',right: '0%',bottom: '4%',containLabel: true},// x轴相关配置xAxis: [{type: 'category',data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],axisTick: {alignWithLabel: true},// 修改刻度标签，相关样式axisLabel: {color: "rgba(255,255,255,0.6)",  // 将刻度标签文字设置为白色fontSize: 10},// x轴样式不显示axisLine: {show: false}}],// y轴相关配置yAxis: [{type: 'value',// 修改刻度标签，相关样式axisLabel: {color: "rgba(255,255,255,0.6)",fontSize: 12},// y轴样式修改axisLine: {lineStyle: {color: "#fff",width: 2}},// y轴分割线的颜色splitLine: {lineStyle: {color: "rgba(255,255,255,0.1)"}}}],// 系列列表配置series: [{name: '直接访问',type: 'bar',barWidth: '35%',// ajax传动态数据data: [200, 300, 300, 900, 1500, 1200, 600],itemStyle: {// 修改柱子圆角barBorderRadius: 5}}]};// 3.把配置项给实例对象myChart.setOption(option);// 4.让图表随屏幕自适应window.addEventListener('resize', function () {myChart.resize();})
})();// 柱状图模块2
(function () {// 1.实例化对象var myChart = echarts.init(document.querySelector(".line2 .chart"));// 声明颜色数组var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];// 2.指定配置项和数据var option = {grid: {top: "10%",left: '22%',bottom: '10%',// containLabel: true},xAxis: {// 不显示x轴相关信息show: false},yAxis: [{type: 'category',// y轴数据反转，与数组的顺序一致inverse: true,// 不显示y轴线和刻度axisLine: {show: false},axisTick: {show: false},// 将刻度标签文字设置为白色axisLabel: {color: "#fff"},data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"]}, {// y轴数据反转，与数组的顺序一致inverse: true,show: true,// 不显示y轴线和刻度axisLine: {show: false},axisTick: {show: false},// 将刻度标签文字设置为白色axisLabel: {color: "#fff"},data: [702, 350, 610, 793, 664]}],series: [{// 第一组柱子（条状）name: '条',type: 'bar',// 柱子之间的距离barCategoryGap: 50,// 柱子的宽度barWidth: 10,// 层级 相当于z-indexyAxisIndex: 0,// 柱子更改样式itemStyle: {barBorderRadius: 20,// 此时的color可以修改柱子的颜色color: function (params) {// params 传进来的是柱子的对象// dataIndex 是当前柱子的索引号// console.log(params);return myColor[params.dataIndex];}},data: [70, 34, 60, 78, 69],// 显示柱子内的百分比文字label: {show: true,position: "inside",// {c} 会自动解析为数据（data内的数据）formatter: "{c}%"}},{// 第二组柱子（框状 border）name: '框',type: 'bar',// 柱子之间的距离barCategoryGap: 50,// 柱子的宽度barWidth: 14,// 层级 相当于z-indexyAxisIndex: 1,// 柱子修改样式itemStyle: {color: "none",borderColor: "#00c1de",borderWidth: 2,barBorderRadius: 15,},data: [100, 100, 100, 100, 100]}]};// 3.把配置项给实例对象myChart.setOption(option);// 4.让图表随屏幕自适应window.addEventListener('resize', function () {myChart.resize();})
})();// 折线图模块1
(function () {// 年份对应数据var yearData = [{year: "2020", // 年份data: [// 两个数组是因为有两条线[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]]},{year: "2021", // 年份data: [// 两个数组是因为有两条线[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]]}];var myChart = echarts.init(document.querySelector(".line .chart"));var option = {// 修改两条线的颜色color: ['#00f2f1', '#ed3f35'],tooltip: {trigger: 'axis'},// 图例组件legend: {// 当serise 有name值时， legend 不需要写data// 修改图例组件文字颜色textStyle: {color: '#4c9bfd'},right: '10%',},grid: {top: "20%",left: '3%',right: '4%',bottom: '3%',containLabel: true,show: true, // 显示边框borderColor: '#012f4a' // 边框颜色},xAxis: {type: 'category',boundaryGap: false, // 去除轴间距data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],// 去除刻度线axisTick: {show: false},axisLabel: {color: "#4c9bfb" // x轴文本颜色},axisLine: {show: false // 去除轴线}},yAxis: {type: 'value',// 去除刻度线axisTick: {show: false},axisLabel: {color: "#4c9bfb" // x轴文本颜色},axisLine: {show: false // 去除轴线},splitLine: {lineStyle: {color: "#012f4a"}}},series: [{type: 'line',smooth: true, // 圆滑的线name: '新增粉丝',data: yearData[0].data[0]},{type: 'line',smooth: true, // 圆滑的线name: '新增游客',data: yearData[0].data[1]}]};myChart.setOption(option);// 4.让图表随屏幕自适应window.addEventListener('resize', function () {myChart.resize();})// 5.点击切换2020 和 2021 的数据$('.line h2 a').on('click', function () {// console.log($(this).index());// 点击a 之后 根据当前a的索引号 找到对应的 yearData 相关对象// console.log(yearData[$(this).index()]);var obj = yearData[$(this).index()];option.series[0].data = obj.data[0];option.series[1].data = obj.data[1];// 选中年份高亮$('.line h2 a').removeClass('a-active');$(this).addClass('a-active');// 需要重新渲染myChart.setOption(option);})
})();// 折线图模块2
(function () {var myChart = echarts.init(document.querySelector('.bar2 .chart'));var option = {tooltip: {trigger: 'axis',},legend: {top: "0%",textStyle: {color: "rgba(255,255,255,.5)",fontSize: "12"}},grid: {top: '30',left: '10',right: '30',bottom: '10',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,// 文本颜色为rgba(255,255,255,.6)  文字大小为 12axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: 12}},// x轴线的颜色为   rgba(255,255,255,.2)axisLine: {lineStyle: {color: "rgba(255,255,255,.2)"}},data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"]}],yAxis: [{type: 'value',axisTick: {// 不显示刻度线show: false},axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},axisLabel: {textStyle: {color: "rgba(255,255,255,.6)",fontSize: 12}},// 修改分割线的颜色splitLine: {lineStyle: {color: "rgba(255,255,255,.1)"}}}],series: [{name: '邮件营销',type: 'line',smooth: true, // 圆滑的线// 单独修改当前线条的样式lineStyle: {color: "#0184d5",width: 2},// 填充区域渐变透明颜色areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色},{offset: 0.8,color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色}],false),shadowColor: "rgba(0, 0, 0, 0.1)"},// 拐点设置为小圆点symbol: 'circle',// 设置拐点大小symbolSize: 5,// 开始不显示拐点， 鼠标经过显示showSymbol: false,// 设置拐点颜色以及边框itemStyle: {color: "#0184d5",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 12},data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40]},{name: "转发量",type: "line",smooth: true,lineStyle: {normal: {color: "#00d887",width: 2}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(0, 216, 135, 0.4)"},{offset: 0.8,color: "rgba(0, 216, 135, 0.1)"}],false),shadowColor: "rgba(0, 0, 0, 0.1)"}},// 设置拐点 小圆点symbol: "circle",// 拐点大小symbolSize: 5,// 设置拐点颜色以及边框itemStyle: {color: "#00d887",borderColor: "rgba(221, 220, 107, .1)",borderWidth: 12},// 开始不显示拐点， 鼠标经过显示showSymbol: false,data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20]}]};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();})
})();// 饼形图1
(function () {var myChart = echarts.init(document.querySelector(".pie .chart"));var option = {color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {// 垂直居中,默认水平居中// orient: 'vertical',bottom: 0,left: 10,// 小图标的宽度和高度itemWidth: 10,itemHeight: 10,// 修改图例组件的文字为 12pxtextStyle: {color: "rgba(255,255,255,.5)",fontSize: "10"}},series: [{name: '年龄分布',type: 'pie',// 设置饼形图在容器中的位置center: ["50%", "42%"],// 修改饼形图大小，第一个为内圆半径，第二个为外圆半径radius: ['40%', '60%'],avoidLabelOverlap: false,// 图形上的文字label: {show: false,position: 'center'},// 链接文字和图形的线labelLine: {show: false},data: [{value: 1,name: "0岁以上"},{value: 4,name: "20-29岁"},{value: 2,name: "30-39岁"},{value: 2,name: "40-49岁"},{value: 1,name: "50岁以上"}]}]};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();})
})();// 饼形图2
(function () {var myChart = echarts.init(document.querySelector('.pie2 .chart'));var option = {color: ['#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {bottom: 0,itemWidth: 10,itemHeight: 10,textStyle: {color: "rgba(255,255,255,.5)",fontSize: 10}},series: [{name: '地区分布',type: 'pie',radius: ["10%", "60%"],center: ['50%', '40%'],// 半径模式  area面积模式roseType: 'radius',// 图形的文字标签label: {fontsize: 10},// 引导线调整labelLine: {// 连接扇形图线长(斜线)length: 6,// 连接文字线长(横线)length2: 8},data: [{value: 26,name: '北京'},{value: 24,name: '山东'},{value: 25,name: '河北'},{value: 20,name: '江苏'},{value: 25,name: '浙江'},{value: 30,name: '四川'},{value: 42,name: '湖北'}]}]};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();})
})();// 模拟飞行路线地图
(function () {var myChart = echarts.init(document.querySelector(".map .chart"));var geoCoordMap = {'上海': [121.4648, 31.2891],'东莞': [113.8953, 22.901],'东营': [118.7073, 37.5513],'中山': [113.4229, 22.478],'临汾': [111.4783, 36.1615],'临沂': [118.3118, 35.2936],'丹东': [124.541, 40.4242],'丽水': [119.5642, 28.1854],'乌鲁木齐': [87.9236, 43.5883],'佛山': [112.8955, 23.1097],'保定': [115.0488, 39.0948],'兰州': [103.5901, 36.3043],'包头': [110.3467, 41.4899],'北京': [116.4551, 40.2539],'北海': [109.314, 21.6211],'南京': [118.8062, 31.9208],'南宁': [108.479, 23.1152],'南昌': [116.0046, 28.6633],'南通': [121.1023, 32.1625],'厦门': [118.1689, 24.6478],'台州': [121.1353, 28.6688],'合肥': [117.29, 32.0581],'呼和浩特': [111.4124, 40.4901],'咸阳': [108.4131, 34.8706],'哈尔滨': [127.9688, 45.368],'唐山': [118.4766, 39.6826],'嘉兴': [120.9155, 30.6354],'大同': [113.7854, 39.8035],'大连': [122.2229, 39.4409],'天津': [117.4219, 39.4189],'太原': [112.3352, 37.9413],'威海': [121.9482, 37.1393],'宁波': [121.5967, 29.6466],'宝鸡': [107.1826, 34.3433],'宿迁': [118.5535, 33.7775],'常州': [119.4543, 31.5582],'广州': [113.5107, 23.2196],'廊坊': [116.521, 39.0509],'延安': [109.1052, 36.4252],'张家口': [115.1477, 40.8527],'徐州': [117.5208, 34.3268],'德州': [116.6858, 37.2107],'惠州': [114.6204, 23.1647],'成都': [103.9526, 30.7617],'扬州': [119.4653, 32.8162],'承德': [117.5757, 41.4075],'拉萨': [91.1865, 30.1465],'无锡': [120.3442, 31.5527],'日照': [119.2786, 35.5023],'昆明': [102.9199, 25.4663],'杭州': [119.5313, 29.8773],'枣庄': [117.323, 34.8926],'柳州': [109.3799, 24.9774],'株洲': [113.5327, 27.0319],'武汉': [114.3896, 30.6628],'汕头': [117.1692, 23.3405],'江门': [112.6318, 22.1484],'沈阳': [123.1238, 42.1216],'沧州': [116.8286, 38.2104],'河源': [114.917, 23.9722],'泉州': [118.3228, 25.1147],'泰安': [117.0264, 36.0516],'泰州': [120.0586, 32.5525],'济南': [117.1582, 36.8701],'济宁': [116.8286, 35.3375],'海口': [110.3893, 19.8516],'淄博': [118.0371, 36.6064],'淮安': [118.927, 33.4039],'深圳': [114.5435, 22.5439],'清远': [112.9175, 24.3292],'温州': [120.498, 27.8119],'渭南': [109.7864, 35.0299],'湖州': [119.8608, 30.7782],'湘潭': [112.5439, 27.7075],'滨州': [117.8174, 37.4963],'潍坊': [119.0918, 36.524],'烟台': [120.7397, 37.5128],'玉溪': [101.9312, 23.8898],'珠海': [113.7305, 22.1155],'盐城': [120.2234, 33.5577],'盘锦': [121.9482, 41.0449],'石家庄': [114.4995, 38.1006],'福州': [119.4543, 25.9222],'秦皇岛': [119.2126, 40.0232],'绍兴': [120.564, 29.7565],'聊城': [115.9167, 36.4032],'肇庆': [112.1265, 23.5822],'舟山': [122.2559, 30.2234],'苏州': [120.6519, 31.3989],'莱芜': [117.6526, 36.2714],'菏泽': [115.6201, 35.2057],'营口': [122.4316, 40.4297],'葫芦岛': [120.1575, 40.578],'衡水': [115.8838, 37.7161],'衢州': [118.6853, 28.8666],'西宁': [101.4038, 36.8207],'西安': [109.1162, 34.2004],'贵阳': [106.6992, 26.7682],'连云港': [119.1248, 34.552],'邢台': [114.8071, 37.2821],'邯郸': [114.4775, 36.535],'郑州': [113.4668, 34.6234],'鄂尔多斯': [108.9734, 39.2487],'重庆': [107.7539, 30.1904],'金华': [120.0037, 29.1028],'铜川': [109.0393, 35.1947],'银川': [106.3586, 38.1775],'镇江': [119.4763, 31.9702],'长春': [125.8154, 44.2584],'长沙': [113.0823, 28.2568],'长治': [112.8625, 36.4746],'阳泉': [113.4778, 38.0951],'青岛': [120.4651, 36.3373],'韶关': [113.7964, 24.7028]};var XAData = [[{name: '西安'}, {name: '北京',value: 100}],[{name: '西安'}, {name: '上海',value: 100}],[{name: '西安'}, {name: '广州',value: 100}],[{name: '西安'}, {name: '西宁',value: 100}],[{name: '西安'}, {name: '银川',value: 100}]];var XNData = [[{name: '西宁'}, {name: '北京',value: 100}],[{name: '西宁'}, {name: '上海',value: 100}],[{name: '西宁'}, {name: '广州',value: 100}],[{name: '西宁'}, {name: '西安',value: 100}],[{name: '西宁'}, {name: '武汉',value: 100}],[{name: '武汉'}, {name: '西宁',value: 100}],[{name: '武汉'}, {name: '哈尔滨',value: 100}],[{name: '武汉'}, {name: '乌鲁木齐',value: 100}],[{name: '西宁'}, {name: '银川',value: 100}]];var YCData = [[{name: '银川'}, {name: '北京',value: 100}],[{name: '银川'}, {name: '广州',value: 100}],[{name: '银川'}, {name: '上海',value: 100}],[{name: '银川'}, {name: '西安',value: 100}],[{name: '银川'}, {name: '西宁',value: 100}],];var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';//var planePath = 'arrow';var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord],value: dataItem[1].value});}}return res;};var color = ['#a6c84c', '#ffa022', '#46bee9']; //航线的颜色var series = [];[['西安', XAData],['西宁', XNData],['银川', YCData]].forEach(function (item, i) {series.push({name: item[0] + ' Top3',type: 'lines',zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: 'red', //arrow箭头的颜色symbolSize: 3},lineStyle: {normal: {color: color[i],width: 0,curveness: 0.2}},data: convertData(item[1])}, {name: item[0] + ' Top3',type: 'lines',zlevel: 2,symbol: ['none', 'arrow'],symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: planePath,symbolSize: 15},lineStyle: {normal: {color: color[i],width: 1,opacity: 0.6,curveness: 0.2}},data: convertData(item[1])}, {name: item[0] + ' Top3',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}'}},symbolSize: function (val) {return val[2] / 8;},itemStyle: {normal: {color: color[i],},emphasis: {areaColor: '#2B91B7'}},data: item[1].map(function (dataItem) {return {name: dataItem[1].name,value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});var option = {tooltip: {trigger: 'item',formatter: function (params, ticket, callback) {if (params.seriesType == "effectScatter") {return "线路：" + params.data.name + "" + params.data.value[2];} else if (params.seriesType == "lines") {return params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value;} else {return params.name;}}},legend: {orient: 'vertical',top: 'bottom',left: 'right',data: ['西安 Top3', '西宁 Top3', '银川 Top3'],textStyle: {color: '#fff'},selectedMode: 'multiple'},geo: {map: 'china',// 把地图放大1.2倍zoom: 1.2,label: {// 鼠标移动显示区域名称emphasis: {show: true,color: '#fff'}},roam: true,// 地图样式修改itemStyle: {normal: {areaColor: 'rgba(34, 70, 168, 0.7)',borderColor: '#0692a4'},emphasis: {areaColor: 'rgba(119, 139, 224, 0.548)'}}},series: series};myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();})
})();

其中，window.addEventListener这个函数是为了让图表随着浏览器的屏幕自适应的，随着浏览器的屏幕缩小而缩小，不会乱跑。

（3）浏览器显示的页面效果：

5、整个index.html文件的完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数据可视化</title><link rel="stylesheet" href="css/index.css" /></head><body><!-- 头部 --><header><h1>数据可视化-ECharts</h1><div class="show-time"></div><script>// 格式：当前时间：2022年5月3日-13时20分24秒var t = null;t = setTimeout(time, 1000); //开始运行function time() {clearTimeout(t); //清除定时器dt = new Date();var y = dt.getFullYear();var mt = dt.getMonth() + 1;var day = dt.getDate();var h = dt.getHours(); //获取时var m = dt.getMinutes(); //获取分var s = dt.getSeconds(); //获取秒document.querySelector(".show-time").innerHTML = "当前时间：" + y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";t = setTimeout(time, 1000); //设定定时器，循环运行}</script></header><!-- 页面主体部分 --><section class="mainbox"><!-- 左侧盒子 --><div class="column"><div class="panel bar"><h2>柱形图-就业行业</h2><!-- 图表放置盒子 --><div class="chart"></div><!-- 伪元素绘制盒子下边角 --><div class="panel-footer"></div></div><div class="panel line"><h2>折线图-人员变化<a class="a-active" href="javascript:;">2020</a><a href="javascript:;">2021</a></h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie"><h2>饼形图-年龄分布</h2><div class="chart"></div><div class="panel-footer"></div></div></div><!-- 中间盒子 --><div class="column"><!-- 头部 no模块 --><div class="no"><div class="no-hd"><ul><li>12434</li><li>10983</li></ul></div><div class="no-bd"><ul><li>前端需求人数</li><li>市场供应人数</li></ul></div></div><!-- map模块 --><div class="map"><div class="map1"></div><div class="map2"></div><div class="map3"></div><div class="chart"></div></div></div><!-- 右侧盒子 --><div class="column"><div class="panel bar2"><h2>折线图-播放量</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel line2"><h2>柱形图-就业行业</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie2"><h2>饼形图-地区分布</h2><div class="chart"></div><div class="panel-footer"></div></div></div></section><script src="js/flexible.js"></script><script src="js/echarts.min.js"></script><script src="js/jquery.js"></script><!-- 引入china.js 完成地图模块 --><script src="js/china.js"></script><script src="js/index.js"></script></body>
</html>

浏览器的显示效果：

echarts之数据可视化简单页面模板相关推荐

Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
基于java web和echarts的数据可视化项目
EchartDemo 项目介绍基于java web和echarts的数据可视化项目主要分析浙江省各市区的gdp和固定资产投资.以及房产数据,数据源浙江省经济社会发展统计,数据经过整理后插入数据库中 ...
Hadoop+hive+flask+echarts大数据可视化之系统数据收集
Hadoop+hive+flask+echarts大数据可视化项目(一) --------------系统数据收集---------------- 谈到大数据的项目,一般以数据可视化为主体,收集大数据 ...
Vue使用Echarts实现数据可视化
Vue使用Echarts实现数据可视化一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Ech ...
ECharts实现数据可视化超详细基础入门教程
ECharts实现数据可视化超详细基础入门教程 ECharts介绍 ECharts官网:https://echarts.apache.org/zh/index.html ECharts是一款基于Jav ...
Hadoop+hive+flask+echarts大数据可视化项目之系统数据整合和hadoop环境搭建
Hadoop+hive+flask+echarts大数据可视化项目(二) --------------系统数据整合和hadoop环境搭建---------------- 关注Hadoop+Hive+F ...

echarts之数据可视化简单页面模板

步骤：

1、先布置框架，代码文件的框架为：

2、制作echarts可视化看板的“head”头部部分：

（1）css文件中的head头部代码部分为：

（2）html文件中的head头部代码部分为：

（3）浏览器显示的页面效果：

3、布局“页面主体盒子”部分

（1）css文件中的head头部代码部分为：

（2）html文件中的head头部代码部分为：

（3）浏览器显示的页面效果：

（1）css文件中的head头部代码部分为：

（2）需要在index.js文件中编写这些echarts可视化图，

（3）浏览器显示的页面效果：

5、整个index.html文件的完整代码

echarts之数据可视化简单页面模板相关推荐

最新文章

热门文章

echarts之 数据可视化简单页面模板

步骤：

1、先布置框架，代码文件的框架为：

2、制作echarts可视化看板的“head”头部部分：

（1）css文件中的head头部代码部分为：

（2）html文件中的head头部代码部分为：

（3）浏览器显示的页面效果：

3、布局“页面主体盒子”部分

（1）css文件中的head头部代码部分为：

（2）html文件中的head头部代码部分为：

（3）浏览器显示的页面效果：

（1）css文件中的head头部代码部分为：

（2）需要在index.js文件中编写这些echarts可视化图，

（3）浏览器显示的页面效果：

5、整个index.html文件的完整代码

echarts之 数据可视化简单页面模板相关推荐

最新文章

热门文章

echarts之数据可视化简单页面模板

echarts之数据可视化简单页面模板相关推荐