Echarts图表绘制：南丁格尔图和饼图示例教程

"使用Echarts绘制图表。①绘制南丁格尔图，顶部居中显示主标题，底部居中显示图例。②设置饼图百分比提示功能，图形美观，无文字溢出。"\n下面是使用Echarts绘制南丁格尔图的示例代码：\n\njavascript\n// 引入Echarts\nimport echarts from 'echarts';\n\n// 初始化Echarts实例\nvar myChart = echarts.init(document.getElementById('chart'));\n\n// 配置图表\nvar option = {\n title: {\n text: '南丁格尔图', // 主标题\n top: 'top', // 顶部居中显示\n left: 'center' // 居中对齐\n },\n legend: {\n bottom: 'bottom', // 底部居中显示\n left: 'center' // 居中对齐\n },\n series: [{\n type: 'pie',\n radius: '55%',\n data: [\n {value: 335, name: '直接访问'},\n {value: 310, name: '邮件营销'},\n {value: 234, name: '联盟广告'},\n {value: 135, name: '视频广告'},\n {value: 1548, name: '搜索引擎'}\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }]\n};\n\n// 使用配置绘制图表\nmyChart.setOption(option);\n\n\n下面是使用Echarts绘制饼图并设置百分比提示的示例代码：\n\njavascript\n// 引入Echarts\nimport echarts from 'echarts';\n\n// 初始化Echarts实例\nvar myChart = echarts.init(document.getElementById('chart'));\n\n// 配置图表\nvar option = {\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b}: {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 10,\n data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n radius: ['50%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center'\n },\n emphasis: {\n label: {\n show: true,\n fontSize: '30',\n fontWeight: 'bold'\n }\n },\n labelLine: {\n show: false\n },\n data: [\n {value: 335, name: '直接访问'},\n {value: 310, name: '邮件营销'},\n {value: 234, name: '联盟广告'},\n {value: 135, name: '视频广告'},\n {value: 1548, name: '搜索引擎'}\n ]\n }\n ]\n};\n\n// 使用配置绘制图表\nmyChart.setOption(option);\n\n\n以上代码中，我们通过配置title和legend来实现主标题和图例的显示位置。在南丁格尔图中，我们使用了pie类型的系列，通过配置radius来调整饼图的大小，通过emphasis来设置鼠标悬浮时的样式。在饼图中，我们通过配置tooltip的formatter属性来设置百分比提示的格式，通过配置series的label属性来设置饼图扇形区域内的文字显示，通过配置series的labelLine属性来设置扇形区域内文字与图形的连接线是否显示。