引语：echarts.js是百度团队推出的一款用于图表可视化的插件，用于以图表的形式展现数据，功能强大，上手简单
1、从**官方网站**中下载所需的echarts.js文件，该文件因功能广泛，包体较大，可自行决定按需打包下载。
2、从前端页面引入echarts.js，后即可使用
<script src="js/echarts.min.js"></script>
3、请查看完整使用案例
介绍：series里面的type值表示使用哪种类型的图表，'bar'表示柱状图，'pie'表示饼图等，更多实例请移驾官网，文末有链接！
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>echarts入门</title> 6 </head> 7 8 <script src="js/jquery-2.2.4.js"></script> 9 <script src="js/echarts.min.js"></script> 10 <style> 11 12 .box{ 13 width:900px; 14 height: 900px; 15 border:4px double seagreen; 16 margin: auto; 17 float: left; 18 } 19 20 21 </style> 22 23 24 <body> 25 26 <div class="box"></div> 27 <div class="box"></div> 28 <div class="box"></div> 29 <div class="box"></div> 30 <div class="box"></div> 31 <div class="box"></div> 32 <div class="box"></div> 33 <div class="box"></div> 34 35 </body> 36 37 <script> 38 39 var myChart1 = echarts.init(document.getElementsByClassName('box')[0]); 40 41 var myChart2 = echarts.init(document.getElementsByClassName('box')[1]); 42 43 var myChart3 = echarts.init(document.getElementsByClassName('box')[2]); 44 45 var myChart4 = echarts.init(document.getElementsByClassName('box')[3]); 46 47 var myChart5 = echarts.init(document.getElementsByClassName('box')[4]); 48 49 //指定图表的配置项和数据 50 var option1 = { 51 title: {text:'商户营业状态'}, 52 53 tooltip : { 54 trigger: 'item', 55 formatter: "{a} <br/>{b} : {c} ({d}%)" 56 }, 57 legend: { 58 orient : 'vertical', 59 x : 'right', 60 y:'bottom', 61 data:['营业中','未营业'] 62 }, 63 calculable : true, 64 series : [ 65 { 66 name:'访问来源', 67 type:'pie', 68 radius : ['30%', '40%'], 69 itemStyle : { 70 normal : { 71 label : { 72 show : false 73 }, 74 labelLine : { 75 show : false 76 } 77 }, 78 emphasis : { 79 label : { 80 show : true, 81 position : 'center', 82 textStyle : { 83 fontSize : '20', 84 fontWeight : 'bold' 85 } 86 } 87 } 88 }, 89 data:[ 90 {value:635, name:'营业中'}, 91 {value:310, name:'未营业'}, 92 ] 93 } 94 ] 95 }; 96 97 98 var option2 = { 99 title:{ 100 text:'服装店销售统计' 101 }, 102 //提示框组件 103 tooltip:{ 104 //坐标轴触发，主要用于柱状图，折线图等 105 trigger:'axis' 106 }, 107 //图例 108 legend:{ 109 data:['销量'], 110 x:'right' 111 }, 112 //横轴 113 yAxis:{ 114 data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] 115 }, 116 //纵轴 117 xAxis:{}, 118 //系列列表。每个系列通过type决定自己的图表类型 119 series:[{ 120 name:'销量', 121 //折线图 122 type:'bar', 123 data:[5, 20, 36, 10, 10, 20] 124 }] 125 }; 126 127 128 myChart1.setOption(option1); 129 130 myChart2.setOption(option2); 131 132 </script> 133 134 135</html>
4、上图创有六个DIV，其中两个配置了Echarts显示参数，运行如下图：
可以看到，前两个DIV已经有图表展示，剩下的四个DIV都是没有数据的，各位可以拷贝运行下，别忘了先下载echarts.js。
接下来，就是真正入门教程了，提供一波网站快速学习：
从各大教程网站的案例中直接练习，结合API调整样式，能在最快的时间上手！
祝大家学习愉快~