<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">
//初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//图表配置。
let option = {
toolbox: {
show: true,
feature: {
saveAsImage: {},
},
},
tooltip: {
trigger: 'item',
formatter: "{b}: {c} ({d}%)"
},
series: [
{
type: 'pie',
color: ['#00b2ec', '#05d8df', '#e68ea6', '#ff9c7f'],
selectedMode: 'single',
radius: [0, '35%'],
label: {
position: 'inner'
},
data: [
{ value: 70, name: '农业' },
{ value: 10, name: '城镇' },
{ value: 10, name: '农村' },
{ value: 10, name: '工业' }
]
},
{
type: 'pie',
color: ['#6ac9ff', '#42acff', '#0c84fc', '#3666ee', '#7978fa', '#00dbe3', '#f97da1', '#ff9e85'],
radius: ['40%', '55%'],
label: {
formatter: '{b}: {d}% ',
},
data: [
{ value: 30, name: '数据1' },
{ value: 10, name: '数据2' },
{ value: 10, name: '数据3' },
{ value: 10, name: '数据4' },
{ value: 10, name: '数据5' },
{ value: 10, name: '数据6' },
{ value: 10, name: '数据7' },
{ value: 10, name: '数据8' }
]
}
]
};
//将图表对象和图表配置进行关联。
myChart.setOption(option);
</script>
</body>
</html>
