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>

相关推荐
-代号95275 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据23 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
三翼鸟数字化技术团队2 小时前
Vue自定义指令最佳实践教程
前端·vue.js
猿榜2 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队2 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2382 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia3 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia3 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js