zl程序教程

您现在的位置是:首页 >  大数据

当前栏目

206Echarts - 数据集(Simple Encode)

数据 Simple Encode
2023-09-11 14:15:41 时间

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
		<div id="main" style="width: 1024px;height:768px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom,初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			var option = {
			    legend: {},
			    tooltip: {},
			    dataset: {
			        source: [
			            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
			            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
			            ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
			            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
			            ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
			        ]
			    },
			    series: [{
			        type: 'pie',
			        radius: 60,
			        center: ['25%', '30%']
			        // No encode specified, by default, it is '2012'.
			    }, {
			        type: 'pie',
			        radius: 60,
			        center: ['75%', '30%'],
			        encode: {
			            itemName: 'product',
			            value: '2013'
			        }
			    }, {
			        type: 'pie',
			        radius: 60,
			        center: ['25%', '75%'],
			        encode: {
			            itemName: 'product',
			            value: '2014'
			        }
			    }, {
			        type: 'pie',
			        radius: 60,
			        center: ['75%', '75%'],
			        encode: {
			            itemName: 'product',
			            value: '2015'
			        }
			    }]
			};
			myChart.setOption(option);
		</script>
	</body>

</html>