ECharts做饼状图实例

最新推荐文章于 2024-07-22 16:21:22 发布

leo_qiu_s

最新推荐文章于 2024-07-22 16:21:22 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/qiudechao1/article/details/95334817

版权

全部代码如下：

将代码保存到 “EChartsTest.html” 文件中，

使用浏览器打开 “EChartsTest.html” ，即可查看效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));	

		// 绘制图表
		myChart.setOption({
			series : [
				{
					name: '访问来源',
					type: 'pie',
					//直径占整个div高度的多少
					radius: '55%',
					data:[
						{value:235, name:'视频广告'},
						{value:274, name:'联盟广告'},
						{value:310, name:'邮件营销'},
						{value:335, name:'直接访问'},
						{value:400, name:'搜索引擎'}
					]
				}
			],
			itemStyle: {
				normal: {
					// 设置扇形的颜色，不知道为什么没效果
					//color: '#c23531',
					// 阴影的大小
					shadowBlur: 200,
					// 阴影水平方向上的偏移
					shadowOffsetX: 0,
					// 阴影垂直方向上的偏移
					shadowOffsetY: 0,
					// 阴影颜色
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			},
			backgroundColor: '#2c343c',
			textStyle: {
				color: 'rgba(255, 255, 255, 0.3)'
			},
			lineStyle: {
				color: 'rgba(255, 255, 255, 0.3)'
			}
		})
		
    </script>
	
</body>
</html>