第一步准备一个json文件echarts.json(名字无所谓),用来模拟从后台获取数据 javascript
{ "name":["直达","营销广告","搜索引擎","邮件营销","联盟广告","视频广告","百度","谷歌","必应","其余"], "data":[ {"value":335, "name":"直达"}, {"value":310, "name":"邮件营销"}, {"value":234, "name":"联盟广告"}, {"value":135, "name":"视频广告"}, {"value":1048, "name":"百度"}, {"value":251, "name":"谷歌"}, {"value":147, "name":"必应"}, {"value":102, "name":"其余"} ], "little":[ {"value":335, "name":"直达","selected":"true"}, {"value":679, "name":"营销广告"}, {"value":1548, "name":"搜索引擎"} ] }
第二步在页面直接引用JS文件java
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"src="js/jquery.min.js"></script>
第三步在body中准备一个容器,写好样式,用来显示图表jquery
<div id="container"></div> <style> #container{ width: 800px; height: 600px; border: 1px solid #ccc; margin: 0 auto; } </style>
最后一步在js中初始化echarts对象,实现动态加载数据。json
<script type="text/javascript"> var container = document.getElementById('container'); // 初始化加载对象myContainer var myContainer = echarts.init(container); //未获取数据前,显示loading加载动画 myContainer.showLoading(); function bindData() { //为了效果明显,咱们作了延迟读取数据 setTimeout(function() { //异步加载数据,get请求咱们刚刚准备的json文件,正式开发中调用相应的接口 $.get('echarts.json', function(res) { console.log(res) //获取数据后,隐藏loading动画 myContainer.hideLoading(); myContainer.setOption( option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'horizontal', x: 'left', data:res.name }, series: [ { name:'访问来源', type:'pie', selectedMode: 'single', radius: ['0', '30%'], label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, data:res.little }, { name:'访问来源', type:'pie', radius: ['40%', '55%'], label: { normal: { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ', backgroundColor: '#eee', borderColor: '#aaa', borderWidth: 1, borderRadius: 4, // shadowBlur:3, // shadowOffsetX: 2, // shadowOffsetY: 2, // shadowColor: '#999', // padding: [0, 7], rich: { a: { color: '#999', lineHeight: 22, align: 'center' }, abg: { backgroundColor: '#333', width: '100%', align: 'right', height: 22, borderRadius: [4, 4, 0, 0] }, hr: { borderColor: '#aaa', width: '100%', borderWidth: 0.5, height: 0 }, b: { fontSize: 16, lineHeight: 33 }, per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 } } } }, data:res.data } ] }); }) }, 1000); } bindData(); </script>