echarts 环形图 指定区域从右侧中心点展开

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ECharts 环形图不合理区域展示</title>

<!-- 引入 ECharts -->

<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>-->

<script src="https://cdn.staticfile.org/echarts/5.3.2/echarts.min.js"></script>

</head>

<body>

<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

// 初始化 echarts 实例

var myChart = echarts.init(document.getElementById('main'));

// 模拟动态数据

let reasonableData = 54; // 合理数据占比

let unreasonableData = 46; // 不合理数据占比

// 指定图表的配置项和数据

var option = {

series: [

{

type: 'pie',

radius: ['50%', '70%'], // 环形图

startAngle: unreasonableData * 1.8,

//clockwise: true, // 顺时针绘制

label: {

show: true,

position: 'center',

formatter: '{d}%\n\n{b}', // 标签格式化为名称和百分比

textStyle: {

color: '#292929', // 设置标签字体颜色

fontSize: 20 // 设置标签字体大小

}

},

labelLine: {

show: false

},

data: [

{ value: unreasonableData, name: '不合理' },

{ value: reasonableData, name: '合理' }

]

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

</body>

</html>

相关推荐
萌萌哒草头将军1 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫12 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中2 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊3 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿3 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj3 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝3 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3113 小时前
react必备JavaScript知识点(二)——类
前端·javascript
珠峰下的沙砾3 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
前端_学习之路3 小时前
javaScript--数据结构和算法
javascript·数据结构·算法