<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<script src="../echarts-liquidfill-master/dist/echarts-liquidfill.js"></script>
<script>
const myChart = echarts.init(document.getElementById('chart'), 'dark')
var data = [{name:'企业总量',value:3089},{name:'诉求提出量',value:4976}]
option = {
title: {
top: '45%',
left: 'center',
text: '年诉求量',
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 14,
},
subtextStyle: {
color: '#fff',
fontSize: 12,
},
},
tooltip: {
trigger: 'item',
formatter: function(res) {
return `${ res.marker }${ res.name }:${ res.data.value }`
},
borderWidth: 0,
},
series: [ {
type: 'liquidFill',
radius: '48%',
tooltip:{show:false},
itemStyle: {
color: '#53d5ff',
opacity: 0.4,
shadowBlur: 0,
},
backgroundStyle: {
opacity: 0.04,
},
name: '今日完成进度',
data: [ 0.3, 0.3 ],
center: [ '50%', '50%' ],
label: {
formatter: '',
textStyle: {
fontSize: 12,
},
},
outline: {
itemStyle: {
borderWidth: 0,
},
borderDistance: 0,
},
},
{
type: 'pie',
radius: [ '50%', '58%' ],
color: [ '#49dff0', '#00ffb4' ],
hoverAnimation: false, 设置饼图默认的展开样式
label: {
show: true,
formatter: '{b}:{d}%',
},
labelLine: {
show: true,
length: 10,
length2: 30,
},
itemStyle: { // 此配置
borderWidth: 0,
emphasis: {
borderWidth: 0,
},
},
data: data
},
],
}
myChart.setOption(option)
</script>
</body>
</html>