1、引入js
<script src="echarts.min.js"></script>
2、js
<div id="main" style="width: 600px;height: 400px;background: #F2F2F2;"></div>
<script>
// 绘制图表。
echarts.init(document.getElementById('main')).setOption({
title: { //标题
text: '饼图'
},
legend: {},//图例
tooltip: {},//鼠标hover时提示框工具
series : [
{
name: '访问来源',
roseType: 'angle', //南丁格尔玫瑰图
type: 'pie',
radius: '55%',
label:{//饼图图形上所有的文本标签
show:true,
position:'inside' //标签文本所在位置,'outside','inside','center'如圆环
},
data:[
{value:235, name:'视频广告',
itemStyle:{
color: '#ff6600',
},
label: { //label和labelLine的样式也有emphasis状态。单个文本标签
show:true,
textStyle: {//设置标签的颜色
color: 'blue'
}
},
labelLine: {
show:true,
lineStyle: {//设置引导线的颜色
color: 'green'
}
}
},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
itemStyle: { //设置样式
shadowBlur: 200,
shadowColor: 'rgba(255, 255, 255, 0.5)',
emphasis: { //鼠标hover时高亮样式
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
</script>