getMultiBarChart = function (datatable) { var colors = ['#0099CC', '#FF9933', '#99CC33', '#393939', '#f50001', '#fad797', '#59ccf7', '#c3b4df']; var myChart = echarts.init(document.getElementById('chart')); var option = { legend: { bottom: "bottom" ,textStyle:{ color: '#fff' }}, dataset: { source: datatable }, xAxis: [ { type: 'category', gridIndex: 0, axisLine:{ lineStyle:{ color: '#fff' }}} ], yAxis: [ { gridIndex: 0,axisLine:{ lineStyle:{ color: '#fff' }}} ], series: [] }; for (var i = 0; i < datatable.length - 1; i++) { option.series[i] = { type: 'bar', seriesLayoutBy: 'row', label: { normal: { show: true, position: 'top' } }, itemStyle: { normal: { color: colors[i], } }, }; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }
讲的这里，我设计的导入EXCEL文件生成图表的功能的全部实现了，关于css 的样式设计，可以参考下面的代码进行设计，不过每个人都有自己的想法，界面如何做的友好，也是前端工程师的一项技能。
body { background-color: #383838; font-family: Arial, sans-serif; line-height: 1.5; color: #464646; } .barner { margin:0 auto; height: 80px; width: 70%; max-width:1100px; } .left{ float: left; color: #00A2D4; } .right{ float: left; margin: 30px 0 0 250px; } #select_text { padding:3px 6px; padding-left:10px; border:1px solid #E7EAEC; width:230px; height:25px; line-height:25px; border-left:3px solid #3FB7EB; background:#FAFAFB; border-radius:2px; } #select_file{ border:0px;display:none; } #select_btn{ color:#00A2D4; padding:4px 6px; border:1px solid #00A2D4; border-radius:2px; text-decoration: none; } .content { margin:50px auto; height: 80px; width: 70%; max-width:1100px; } table { border-collapse :collapse ; margin:0 auto; } th { width:100px; height:25px; border :1px solid white; font-size:12px; text-align :center; color: white; background-color: #00A2D4; } td { width:200px; border :1px solid white; color: white; font-size:12px; text-align :left; } #column { background-color: #00A2D4; } #chart { border-collapse :collapse ; margin:0 auto; }
总结
以上所述是小编给大家介绍的Javascript 实现 Excel 导入生成图表功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: