Echarts 下载网址 https://echarts.baidu.com/download.html
选择需要的图表进行定制，最后会生成一个js文件，直接放到你需要的项目里。然后记得在导入这个js文件。
这是柱状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <!-- 引入 ECharts 文件 --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id // 指定图表的配置项和数据 var option = { title: { text: '爱淘二手网站用户购买记录分析' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ${catelogName} //['闲置数码','校园代步','电器日用','图书教材','美妆衣物','运动棋牌','票券小物'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: ${catelogNum} //[5, 20, 36, 10, 10, 20, 15] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>这是饼图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <!-- 引入 ECharts 文件 --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id // 指定图表的配置项和数据 var option = { title : { text: '爱淘二手网站用户新旧商品喜好分析', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['全新商品','二手商品'] }, series : [ { name: '新旧商品', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:${countNewGoodsNum}, name:'全新商品'}, {value:${countOldGoodsNum}, name:'二手商品'}, ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>最后在浏览器上访问这两个文件就行了。
效果图：
