前端ECharts图表可视化⼤屏开发案例项⽬开源地址：
码云：
Github：
演⽰地址：
截图：
⼤屏图表前端开发案例
缘起
笔者⼊⾏前端以来，参与过⼀些⼤屏图表开发项⽬，因经常看到⼀些前端⼯作⼏年的⼩伙伴们对可视化
⼤屏的等⽐例缩放的实现不理想，也遇到过图表配置⾮常冗余导致维护繁琐的情况，所以笔者⼀直想总结相关开发经验供⼤家参考。这次正好借这个五⼀⼩长假+调休，拿出3天时间(感谢家⾥的⽀持，没让我5天都在家看孩⼦)系统的完善了⼀下常见需求，整理⼀个demo开源出来供需要的⼩伙伴们参考，后期看情况将持续维护。
由于项⽬主要为⼤屏设计，所以暂不做移动端优化，⼿机上可以通过设置⾯板中的cover模式来查看。
由于笔者⽔平有限，代码中难免有不合理不优雅的地⽅，⼤家可以通过issue或pr或邮箱  ⼀起参与建设。
如果⼤家觉得这个项⽬有帮到⾃⼰的地⽅，打个星即可，⽆需捐助^_^。
功能和特点
1. 页⾯内容适应各种⽐例的⼤屏。可以设置为⾃动等⽐例缩放(contain和cover两种模式)，也可以设置为拉伸(stretch模式)来铺满窗
⼝。
2. 图表的配置项抽取各层级公⽤部分，以对象的合并⽅式(jQuery的extend⽅法)实现最简配置。
数据可视化大屏设计3. 窗⼝缩放时图表⾃动缩放⽆需刷新，可通过拖动浏览器窗⼝⼤⼩测试。
4. 图表定时刷新重绘效果，可分别指定需要和不需要刷新的图表。这⾥仅是前端展⽰⽤，也可配合异步加载数据后重绘图表。
5. 页⾯显⽰时钟、城市定位和天⽓。
6. 除了常规图表，还引⼊geoJson和百度地图的两种平⾯地图模式、3D地球模式以及若⼲有意思的算命娱乐⼩图表。其中地图上有唐僧
取经路线和麦哲伦环球航线等等。
7. 四季（春夏秋冬）颜⾊主题更换。
8. 配置⾯板，配置内容如下：
1. 设计图尺⼨
2. 页⾯缩放模式
3. 图表⾃动刷新频率
4. 天⽓预报更新周期
5. 指定颜⾊主题
软件架构
HTML5结构
css采⽤
布局采⽤css3中的
部分js使⽤了ES6+
图表采⽤
缩放原理是通过计算页⾯和原始尺⼨的⽐例，控制html的fontSize来进⾏所有元素的尺⼨缩放，元素尺⼨单位⽤rem。
使⽤说明
1. 可以先配置设计图尺⼨、缩放模式、刷新频率、天⽓预报更新周期、主题颜⾊等参数(在common.js⾥如下代码)，也可以在页⾯设置
⾯板中配置，但后者只能存储到本地的localStorage
const Cfg = {
designW: settings.designW || 1920, //设计图宽度
designH: settings.designH || 1080, //设计图⾼度
zoomMode: Mode || (innerWidth < 768 ? 'cover' : 'contain'),
notebookOptim: [undefined, true].bookOptim),
getWeatherPeriod: WeatherPeriod || 5, //天⽓预报更新周期（分）
chartRefreshPeriod: settings.chartRefreshPeriod || 10, // 图表刷新周期（秒）
colors: lors || 'default',
colorData: {//配⾊⽅案，部分⾊彩参考 rmco.jp/coloringroom/haisyoku_rei/haisyoku_haru.html
default: ['lightskyblue', 'orange', 'greenyellow', 'limegreen',
'mediumturquoise', 'mediumpurple'],
spring: ['#BEDC6E', '#FA8C8C', '#FAAAC8', '#FAC8C8',
'#FFFFE6', '#6E6464'],
summer: ['#FFAE00', '#FF5200', '#007AFF', '#00BF05',
'#DCFFFF', '#505064'],
autumn: ['#c1ad2f',/*'#A5912D',*/ '#782323', '#783723', '#A05027',
'#FAE6DC', '#283C14'],
winter: ['#F5F5FA', '#96822D', '#6E5A19', '#BECDEB',
'#E1E1F0', '#281E1E'],
}
};
2. 开发过程中，遇到图表先⽤最简单必须的代码画出来，然后再根据设计图梳理⼀下，哪些配置是共性，哪些是个性，共性的就在
chartsCom.js⾥修改，个性的就在图表实例下修改。
let chart = echarts.init($("#ec01_line_tiobe")[0]); //初始化图表，注意命名的规范合理
01_line_tiobe = chart; //放⼊charts对象⽅便后⾯的刷新缩放以及其他操作
chart.setOption(opt_line); // 设置这个类型（折线图）图表的共性
chart.setOption({
xAxis: { // 本图表option的个性
nameLocation: 'start',
inverse: true,
data: ['2019', '2014', '2009', '2004', '1999', '1994', '1989']
},
yAxis: { // 本图表option的个性
name: '排名',
nameLocation: 'start',
min: 1,
inverse: true
},
dataZoom: { // 本图表option的个性
type: 'inside',
orient: 'vertical'
},
series: [
{"name": "Java", data: [1, 2, 1, 1, 12, '-', 0]},
{"name": "C", data: [2, 1, 2, 2, 1, 1, 1]},
{"name": "C++", data: [3, 4, 3, 3, 2, 2, 3]},
...
].map(item => {
return $.extend(true, {}, seri_line,// 折线图图表series的共性
{ // 本图表series的个性
smooth: false,
showSymbol: false,
}, item)
})
})
3. css中尺⼨单位⽤rem，js中图表配置⾥的长度数值都要乘以全局变量scale。
4. chrome浏览器中为了阅读清晰，将⼩于12px的汉字字号限制到12px，这样可能造成字号没有随页⾯等⽐例变化，可能撑坏部分布
局。解除最⼩字号限制的⽅法：浏览器设置-外观-⾃定义字体-最⼩字号(可能因版本不同路径有差别，可以在设置⾯板中搜索“最⼩字号”)，将滚动条拉到最⼩即可。
5. chrome浏览器模拟移动端界⾯的⽅法：按F12打开控制台，点击左上⾓选取元素旁边的移动端图标，然后页⾯就被放在⼀个特定尺⼨
的容器中。可以看到设备列表中已经预置了⼀些⼿机型号，点击下⾯的“”，在控制台点击“add custom device”按钮添加设备并指定尺⼨，在⼤屏上⼀般将默认的类型Mobile改为Desktop。注意，如果模拟电脑屏幕正常访问页⾯的情况，则⾼度要除去标签栏、地址栏、收藏夹等，具体尺⼨可在控制台console下输⼊window.innerHeight即可看到。
6. 有很多⼩伙伴说下载了源码后，直接⽤浏览器打开却看不到顶部的天⽓、定位以及左侧设置⾯板，这是由于这些内容⽤了jQuery的异
步请求($.get()、.load()）⽅法，⽽这些⽅法要运⾏在服务器上。如果本地开发，需要在编辑器⾥配上服务器再运⾏，如果部署，可以把⽂件直接放到像tomcat这样的容器⾥即可。
7. Have a nice day! ?

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。