Hadoop Echarts
作者：Emperor_LawD
- 2022 年 5 月 11 日
本文字数：2275 字
阅读完需：约 7 分钟
新建文件
创建一个
resources文件夹用来存放js和html文件
bar.html（柱状图）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/echarts.min.js"></script> </head> <body> <!-- preparing a DOM with width and height for ECharts --> <div id="main" style="width:600px; height:400px;"></div> <script> var main = document.getElementById('main'); var myChart = echarts.init(main); // 指定图表的配置项和数据 var option = { // 标题 title: { text: 'ECharts 入门示例' }, // 工具箱 toolbox: { show: true, feature: { saveAsImage: { show: true } } }, // 图例 legend: { data: ['销量'] }, // x轴（可修改） xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, // 数据（可修改） series: [{ name: '销量', type: 'bar', // 修改图标样式 data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option); </script> </body> </html>
复制代码
bar.html（线性图）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line</title> <script src="./js/echarts.min.js"></script> </head> <body> <!-- preparing a DOM with width and height for ECharts --> <div id="main" style="width:600px; height:400px;"></div> <script> var main = document.getElementById('main'); var myChart = echarts.init(main); // 指定图表的配置项和数据 var option = { // 标题 title: { text: 'ECharts 入门示例' }, // 工具箱 toolbox: { show: true, feature: { saveAsImage: { show: true } } }, // 图例 legend: { data: ['销量'] }, // x轴（可修改） xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, // 数据（可修改） series: [{ name: '销量', type: 'line', // 修改图标样式 data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option); </script> </body> </html>
复制代码
查看结果
点击 Chrome 查看结果
显示结果（柱状图）
显示结果（线性图）
toolbox 相关配置
toolbox.html
// 工具箱 toolbox: { show: true, feature: { saveAsImage: { show: true }, dataView: { // 数据预览 show:true }, restore: { // 刷新 show:true }, dataZoom: { show:true }, magicType: { type: ['line', 'bar'] } } },
复制代码
效果
饼图
pie.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pie</title> <script src="./js/echarts.min.js"></script> </head> <body> <!-- preparing a DOM with width and height for ECharts --> <div id="main" style="width:600px; height:400px;"></div> <script> var main = document.getElementById('main'); var myChart = echarts.init(main); // 指定图表的配置项和数据 var option = { // 标题 title: { text: '某网站用户访问来源数据' }, // 显示百分比 tooltip: { trigger: 'item', formatter: "{a} <br/> {b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'right', data: ['谷歌', '火狐', 'Safari', '360', 'QQ浏览器'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '谷歌'}, {value: 310, name: '火狐'}, {value: 234, name: 'Safari'}, {value: 135, name: '360'}, {value: 1548, name: 'QQ浏览器'} ] } ] }; myChart.setOption(option); </script> </body> </html>
复制代码
显示效果
划线
评论
复制
发布于: 刚刚阅读数: 4
版权声明: 本文为 InfoQ 作者【Emperor_LawD】的原创文章。
原文链接:【http://xie.infoq.cn/article/f7f9b162220793c72edce1160】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
Emperor_LawD
关注
愿能如萤火一般，可以在黑夜里发一点光。 2021.05.19 加入
还未添加个人简介
评论