ECharts实现扇形图和环形图
ECharts官网
https://echarts.apache.org/zh/index.html
ECharts扇形图前台代码
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Pie</title>
<script src="~/js/jquery.min.js"></script>
<script src="~/lib/echarts/dist/echarts.min.js"></script>
<style type="text/css">
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="main" style=" 100%;height:100%;"></div>
</body>
</html>
JS代码
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.get('/json/Pie.json', function (data) {
myChart.setOption({
title: {
text: '某站点用户访问来源',
subtext: '测试数据',
left: 'center'
},//标题
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},//鼠标移入属性
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},//工具栏
legend: {
orient: 'vertical',//横竖显示
left: 'left',//标签位置
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']//标签名
},//标签
series: [
{
name: '访问来源',//pie名称
type: 'pie',//形状类型
//radius: ['55%', '70%'],//环形
radius: '55%',//扇形
center: ['50%', '60%'],//图形位置
data: data.data_pie,//数据源
//[
// { value: 335, name: '直接访问' },
// { value: 310, name: '邮件营销' },
// { value: 234, name: '联盟广告' },
// { value: 135, name: '视频广告' },
// { value: 1548, name: '搜索引擎' }
//],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(1, 22,22, 22)'
}
}//鼠标移入阴影特效
}
]
//series : [
// {
// name: '访问来源',
// type: 'pie', // 设置图表类型为饼图
// radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
// data:data.data_pie
// }
//]
})
}, 'json')
</script>
返回的json数据
{
"data_pie" : [
{"value":200, "name":"视频广告"},
{"value":300, "name":"联盟广告"},
{"value":400, "name":"邮件营销"},
{"value":500, "name":"直接访问"},
{"value":600, "name":"搜索引擎"}
]
}
实现效果如下
