<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--jquery 根据自己的路径引入或下载 -->
<script src="js/jquery-1.9.1.min.js"></script>
<style type="text/css"> #main{
width:50vw;height:60vh;margin-left:2vw
}
</style>
</head>
<body> <div id="main"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
// 饼状图插件的部分内容 var chart = echarts.init(document.getElementById('main'));
var optionbar = {
color:['#df6c33','#018dfe'],//饼状图每部分的颜色
tooltip: {
trigger: 'item',
// formatter: "{a} <br/>{b}: {c} ({d}%)",
formatter: "{d}%",//鼠标滑过时候的显示
// show:false,
},
series: [{
// name: '客户',
type: 'pie',
radius: ['35%', '50%'],//控制饼状图的大小
center: ['50%', '50%'],//控制饼状图所在的位置
avoidLabelOverlap: true, label: {
normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比
},
emphasis: {
show: true,
textStyle: {
fontSize: '10',//字体大小
// fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data: [20,96]//后台请求到的数据直接复制即可
}]
}; chart.setOption(optionbar)
//设置默认选中高亮部分
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
chart.on('mouseover', function(e) {
//当检测到鼠标悬停事件，取消默认选中高亮
chart.dispatchAction({
type: 'downplay',
seriesIndex: 1,
dataIndex: 0
});
//高亮显示悬停的那块
chart.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: e.dataIndex
});
});
//检测鼠标移出后显示之前默认高亮的那块
chart.on('mouseout', function(e) {
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
}); }); </script>
</body>
</html>