新建文件
- 创建一个
resources文件夹用来存放js和html文件
bar.html（柱状图）
<htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/echarts.min.js"></script></head><body><!-- preparing a DOM with width and height for ECharts --><divid="main"style="width:600px; height:400px;"></div><script>varmain=document.getElementById('main'); varmyChart=echarts.init(main); // 指定图表的配置项和数据varoption= { // 标题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（线性图）
<htmllang="en"><head><metacharset="UTF-8"><title>line</title><scriptsrc="./js/echarts.min.js"></script></head><body><!-- preparing a DOM with width and height for ECharts --><divid="main"style="width:600px; height:400px;"></div><script>varmain=document.getElementById('main'); varmyChart=echarts.init(main); // 指定图表的配置项和数据varoption= { // 标题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
<htmllang="en"><head><metacharset="UTF-8"><title>pie</title><scriptsrc="./js/echarts.min.js"></script></head><body><!-- preparing a DOM with width and height for ECharts --><divid="main"style="width:600px; height:400px;"></div><script>varmain=document.getElementById('main'); varmyChart=echarts.init(main); // 指定图表的配置项和数据varoption= { // 标题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>
- 显示效果
