ECharts饼图-饼图5.rar资源-CSDN下载

共3个文件

js：2个

html：1个

版权申诉

echarts

统计分析

数据可视化

177 浏览量 2025-06-05 09:11:42 上传评论收藏 864KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts饼图-饼图5.rar （3个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

index.html 5KB

images

json

<!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>  <script type="text/javascript"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //图表配置。 var testData = [{ 'name': '总户数', 'value': 1234 }, { 'name': '总人口数', 'value': 4700 }, { 'name': '已覆盖户数', 'value': 1200 }, { 'name': '已覆盖人口数', 'value': 3687 } ]; var seriesData = []; var color = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)', 'rgb(43, 166, 254)']; var colorBorder = ['rgba(255, 153, 153, 0.4)', 'rgba(255, 176, 63, 0.4)', 'rgba(61, 186, 45, 0.4)', 'rgba(43, 166, 254, 0.4)']; for (var i = 0; i < testData.length; i++) { seriesData.push({ data: testData[i].value, value: 20, name: testData[i].name, itemStyle: { color: color[i], borderWidth: 20, borderColor: colorBorder[i] } }, { value: 8, label: { show: false }, labelLine: { show: false }, itemStyle: { color: 'rgba(0, 0, 0, 0)', borderWidth: 0 } }); } let option = { toolbox: { show: true, feature: { saveAsImage: {}, }, }, series: [ { type: 'pie', clockWise: false, radius: [100, 200], hoverAnimation: false, startAngle: -30, endAngle: 230, zlevel: 5, label: { show: true, position: 'inner', fontSize: 14, lineHeight: 15, formatter: function (params) { if (params.name !== '') { if (params.name.length > 4) { return params.name.slice(0, 3) + '\n' + params.name.slice(3); } else { return params.name; } } } }, data: seriesData }, { type: 'pie', clockWise: false, radius: [100, 200], hoverAnimation: false, startAngle: -30, endAngle: 230, label: { show: true, fontSize: 18, formatter: function (params) { if (params.name !== '') { return params.data.data; } else { return ''; } } }, labelLine: { length: 30, length2: 60, show: true }, data: seriesData } ], graphic: [ { type: 'group', left: 'center', top: 'middle', children: [{ type: 'text', z: 100, left: 'center', top: '0', style: { fill: '#333', text: [ '治理率(以户数计算)' ], font: '16px Microsoft YaHei' } }, { type: 'text', z: 100, left: 'center', top: '32', style: { fill: 'red', text: [ '80%' ], font: '26px Microsoft YaHei' } } ] }] } //将图表对象和图表配置进行关联。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈

版权申诉