echarts|Echarts饼图常用效果
文章图片
基本实现
饼图 - 锐客网
src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js">
>
var myCharts = echarts.init(document.querySelector('div'))
var pieData = https://www.it610.com/article/[
{name:'shanghai',
value: 157279
},
{name: 'hefei',
value: 115623
},
{name: 'wuxi',
value: 180044
},
{name: 'nanjing',
value: 165681
},
{name: 'hangzhou',
value: 152465
},
{name: 'suzhou',
value: 179174
},
]var option = {series: [
{type: 'pie',
data: pieData
}
]
}myCharts.setOption(option)
文章图片
常用特效 1.显示文字
文章图片
看一下这里面是什么：
文章图片
好了，现在我们可以自定义显示文字了：
饼图 - 锐客网
src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js">
>
var myCharts = echarts.init(document.querySelector('div'))
var pieData = https://www.it610.com/article/[
{name:'shanghai',
value: 157279
},
{name: 'hefei',
value: 115623
},
{name: 'wuxi',
value: 180044
},
{name: 'nanjing',
value: 165681
},
{name: 'hangzhou',
value: 152465
},
{name: 'suzhou',
value: 179174
},
]var option = {series: [
{type: 'pie',
data: pieData,
label: {show: true,
formatter: function (args) {return `${ args.name}\n\n人均GDP: ${ args.value}`
}
}
}
]
}myCharts.setOption(option)
效果：
文章图片
核心代码：
文章图片
注意，
\n表示换行2. 饼图如果想控制半径：
文章图片
现在半径就只有20像素了：
文章图片
如果半径设置为百分比：
文章图片
会以容器的较小的一边的一半为基准去计算，如下图，20%就是以容器的较小的高400px的一半为基准，400px / 2 * 20% =40px
文章图片
3. 饼图设置样式为圆环
文章图片
文章图片
4. 南丁格尔图效果
roseType 【echarts|Echarts饼图常用效果】
文章图片
文章图片
文章图片
推荐阅读
- 开始你的第一个Echarts图表（分享自知乎网）
- echarts插件-从后台请求的数据在页面显示空白的问题
- Pyecharts|Pyecharts 猎聘招聘数据可视化
- 《横向领导力》Day.3（系统思考工具——饼图）
- 可视化图形制作之关系图
- pyecharts可视化大屏
- Echarts 学习
- 我是如何控制1000|我是如何控制1000 个 Echarts 实例同时渲染 最大并发的
- 数据转pdf（包含echarts图表）
- Vue传数据到ECharts时，数据响应式更新了，但地图没渲染（？？）