同步操作将从 关中刀客在青岛/前端ECharts图表可视化大屏开发案例 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
笔者入行前端以来,参与过一些大屏图表开发项目,因经常看到一些前端工作几年的小伙伴们对可视化大屏的等比例缩放的实现不理想,也遇到过图表配置非常冗余导致维护繁琐的情况,所以笔者一直想总结相关开发经验供大家参考。这次正好借这个五一小长假+调休,拿出3天时间(感谢家里的支持,没让我5天都在家看孩子)系统的完善了一下常见需求,整理一个demo开源出来供需要的小伙伴们参考,后期看情况将持续维护。
由于项目主要为大屏设计,所以暂不做移动端优化,手机上可以通过设置面板中的cover模式来查看。
由于笔者水平有限,代码中难免有不合理不优雅的地方,大家可以通过issue或pr或邮箱 admin@e-art.top 一起参与建设。
如果大家觉得这个项目有帮到自己的地方,打个星即可,无需捐助^_^。
http://e-art.top/projects/bigScreenCharts
const Cfg = {
designW: settings.designW || 1920, //设计图宽度
designH: settings.designH || 1080, //设计图高度
zoomMode: settings.zoomMode || (innerWidth < 768 ? 'cover' : 'contain'),
notebookOptim: [undefined, true].includes(settings.notebookOptim),
getWeatherPeriod: settings.getWeatherPeriod || 5, //天气预报更新周期(分)
chartRefreshPeriod: settings.chartRefreshPeriod || 10, // 图表刷新周期(秒)
colors: settings.colors || 'default',
colorData: {//配色方案,部分色彩参考 http://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'],
}
};
let chart = echarts.init($("#ec01_line_tiobe")[0]); //初始化图表,注意命名的规范合理
this.charts.ec01_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)
})
})
关中刀客在青岛,男,汉族。
2008年毕业于青岛某不知名大学,随后从事过硬件电路、系统仪器、视频后期、淘宝多媒体服务、开花店、视频配乐等工作。 接触编程时已经30岁,决定学前端时31岁,也由于年龄关系,家庭琐事繁多,业余学习时间有限,但对代码的热情和生活所迫仍奋斗在编程前线上。更多介绍 >>
在这里也希望所有转行过来的IT小伙伴们能坚持下去,平时有空多学习多总结,三五年就能有小成,这些经验可以让自己着手做些喜欢的事,而不像我这样急促——很多业余时间不得不花在家里。
欢迎访问我的博客:关中刀客在青岛 http://e-art.top
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。