<!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'), "dark");
//图表配置。
let option = {
toolbox: {
show: true,
feature: {
saveAsImage: {},
},
},
series: [
{
type: "pie",
radius: ["65%", "66%"],
label: {
show: false,
},
data: [
{
value: 56.2,
name: "数据",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,255,255,1)",
},
{
offset: 1,
color: "rgba(5,244,131,1)",
},
],
},
},
},
{
value: 44.8,
name: "配色",
itemStyle: {
color: "#ffffff",
opacity: 0.1,
},
},
],
},
{
type: "gauge",
radius: "90%",
startAngle: 90,
endAngle: -270,
splitNumber: 18,
axisLine: {
show: false,
lineStyle: {
width: 1,
color: [[1, "#FFFFFF"]],
},
},
splitLine: {
show: true,
length: 20,
lineStyle: {
color: "auto",
width: 1,
},
},
axisTick: {
show: true,
lineStyle: {
color: "auto",
},
length: 20,
splitNumber: 10,
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
data: [
{
value: 56.2,
name: "数据占比",
},
],
detail: {
show: true,
color: "#09f284",
fontSize: 80,
offsetCenter: ["0", "-20"],
fontWeight: 500,
},
title: {
show: true,
fontSize: 30,
},
},
],
};
//将图表对象和图表配置进行关联。
myChart.setOption(option);
</script>
</body>
</html>
ECharts饼图-饼图18.rar （3个子文件） 
图表 lib 5.5.0 
echarts.js 3.21MB echarts.min.js 1005KB svg geo 
index.html 4KB images json 资源评论
图表制作解说(目标1000个图表)
- 粉丝: 1878
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
