首先引入echarts的js包
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
然后先准备一个容器,存放echarts画好的图,也就是定义一个存放canvas画布div
<div id="main" style="width:100%;height:350px;></div>
接下来路径配置和开始画之前的一些准备,
1 <script type="text/javascript"> 2 // 路径配置 3 require.config({ 4 paths: { 5 'echarts': 'js/echarts', 6 'echarts/chart/pie': 'js/echarts' 7 } 8 }); 9 10 require( 11 [ 12 'echarts', 13 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载 14 ], 15 function(ec) { 16 // 基于准备好的dom,初始化echarts图表 17 var myChart = ec.init(document.getElementById('main')); 18 19 option = { 20 //代码主要部分 21 }; 22 // 为echarts对象加载数据 23 myChart.setOption(option); 24 } 25 ); 26 </script>
接下来就在 option={}; 这里面写最重要的代码部分
下面这个链接是echarts官网的一个例子链接,http://echarts.baidu.com/demo.html#bar-stack
另外附上一段我自己写的圆环和柱状图:
1.圆环
1 option = { 2 title: { 3 text: '2017年度市级运动员统计汇总', 4 subtext: '', 5 x: 'center' 6 }, 7 tooltip: { 8 trigger: 'item', 9 formatter: "{a} <br/>{b} : {c} ({d}%)" 10 }, 11 legend: { 12 orient: 'horizontal', 13 x: 'center', 14 y: '260px', 15 data: ['普通运动员', '重点人数', '输送人数', '退役人数'] 16 }, 17 toolbox: { 18 show: true25 }, 26 calculable: true, 27 series: [{ 28 name: '访问来源', 29 type: 'pie', 30 radius: ['25%','55%'], 31 center: ['50%', '50%'], 32 data: [ 33 { value: 100, name: '普通运动员' }, 34 { value: 200, name: '重点人数' }, 35 { value: 400, name: '输送人数' }, 36 { value: 800, name: '退役人数' }, 37 ] 38 }], 39 color:['#f05a4b','#f49902','#1dab91','#0078d7'] 40 };
2.柱状图
1 option = { 2 tooltip: { 3 trigger: 'axis' 4 }, 5 toolbox: { 6 feature: { 7 dataView: {show: true, readOnly: false}, 8 magicType: {show: true, type: ['line', 'bar']}, 9 restore: {show: true}, 10 saveAsImage: {show: true} 11 } 12 }, 13 legend: { 14 x: 'center', 15 y: '320px', 16 data:['预计成绩','实际成绩'] 17 }, 18 xAxis: [ 19 { 20 type: 'category', 21 data: ['田径','游泳','举重','网球','羽毛球','乒乓球','跆拳道'] 22 } 23 ], 24 yAxis: [ 25 { 26 type: 'value', 27 name: '(奖牌数)', 28 } 29 ], 30 series: [ 31 { 32 name:'预计成绩', 33 type:'bar', 34 data:[2,5,6,7,5,2,8], 35 itemStyle: { 36 //柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多 37 normal: { 38 //柱形图圆角,初始化效果 39 barBorderRadius:[2, 2, 0, 0] 40 } 41 }, 42 barGap:'0%' 43 }, 44 { 45 name:'实际成绩', 46 type:'bar', 47 data:[5,4,10,4,5,6,4], 48 itemStyle: { 49 //柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多 50 normal: { 51 //柱形图圆角,初始化效果 52 barBorderRadius:[2,2, 0, 0] 53 } 54 }, 55 barGap:'0%' 56 } 57 ], 58 color:['#0078d7','#f49902'] 59 };
最后别忘了这一句,很重要,要不然就显示不出来了。
myChart.setOption(option);
运行效果图:
==================================================================================================================