一.引入JS文件，echarts.min.js
二.在body中创建div，这个div也就是用来显示的位置
<div id="main" style="width: 600px;height:400px;"></div>
三.写入js代码
扫描二维码关注公众号，回复：
297506 查看本文章
<script type="text/javascript">
option = {
title:{
text:'共XXX单',
left:'center',
top:'center',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name:'访问来源11',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
// 使用数据线
label:{
normal:{
formatter: '{b} 占{d}% \n 共{c}单' // 模板变量有 {a}, {b}，{c}, {d}，分别表示系列名，数据名，数据值，百分比。
}
},
labelLine: {
normal: {
show: true,
position: 'outside',
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
</script>
四.在div之后，再次写入js代码，用来引用
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
//异步加载数据
/* $.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
}); */
</script>
