echars 南丁格尔图构建与配置

效果图

完整页面
不要diss我说这个可视化界面多low，我只是个无辜的前端，我也觉得low，但是大佬们喜欢，我有啥办法，嘿嘿

引入

<script type="text/javascript" src="js/echarts.js"></script>

html部分

 <div id="channelPie" style="height:100%;"></div>

js部分

 function channelPie() {var myChartbottom = echarts.init(document.getElementById('channelPie')); option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'     //配置标签的文字   比如  ---  电话（33.77%）},legend: {left: 'center',top: 'bottom',textStyle: { //图例文字的样式color: '#8090BC',fontSize: 12,},data: ['电话', '邮件', '自动', '其他']},toolbox: {show: false,  //隐藏头部工具栏feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: {show: true,type: ['pie', 'funnel']},restore: { show: true },saveAsImage: { show: true }}},series: [{name: '渠道',   //鼠标移上去后显示的名字type: 'pie',    //定义为 南丁格尔饼状图radius: [30, 110],center: ['50%', '50%'],roseType: 'area',   // 重点, 设置这个就是南丁格尔图 , 不设就是普通饼图data: [{ value: 20, name: '电话' },{ value: 15, name: '邮件' },{ value: 18, name: '自动' },{ value: 12, name: '其他' },],itemStyle: {normal: {color: function (params) {//自定义-----每一块图的颜色var colorList = ['#5F5FFF', '#FF1A9E', '#01FEE9', '#FF4917'    ];return colorList[params.dataIndex]}}},label: {            //饼图图形上的文本标签normal: {show: true,position: 'top', //标签的位置textStyle: {fontWeight: 300,fontSize: 12,    //文字的字体大小color:'#fff'   //标签的文字颜色},formatter: "{b}\n({d}%)"}},}]};myChartbottom.setOption(option);}channelPie()

echars 南丁格尔图构建与配置相关推荐

python_绘制玫瑰图_南丁格尔图
python_绘制玫瑰图_南丁格尔图通过加载execel文件绘制通过直接造数看这: https://blog.csdn.net/kaikai_sk/article/details/10495430 ...
Echarts南丁格尔图.
项目场景: 通过Echarts修改南丁格尔图js文件,修改轮盘颜色.使项目更加美观文本标签自定义问题描述不知道为什么自定义函数使饼图图形上的文本标签label标签显示在内部且,获得对应标签的数据 ...
从南丁格尔图到医学发展史
可视化中,前端用于表现不同类目的数据在总和中的占比的场景,往往会采用饼图. 针对数据大小相近,南丁格尔图的呈现会更加美观. 南丁格尔图,又称玫瑰图,是由弗罗伦斯·南丁格尔发明. 弗洛伦斯·南丁格尔开 ...
Python数据可视化之南丁格尔玫瑰图(亲测)
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
Python数据可视化之南丁格尔玫瑰图
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
【Python数据分析——使用matplotlib制作南丁格尔玫瑰图】
目录一.介绍二.相关库三.数据准备四.pyecahrts代码实现五.matplotlib代码实现一.介绍玫瑰图是弗罗伦斯·南丁格尔所发明的.又名为极坐标面积图,是一种圆形的直方图. 南丁 ...
教你做超惊艳的南丁格尔玫瑰图
其实早在今年初,疫情还很严重的时候,人民日报发布的这个图就吸引了广大数据分析者的注意. 今天我们就把这个图的前因后果以及怎么做一次性讲清楚. 玫瑰图的前世今生这个图学名:南丁格尔玫瑰图,是弗罗伦斯· ...
echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
文末附带github本文所有源代码,以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图先来看看效果啦重要代码如下所示,必须引入e ...
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置
❤echarts 南丁格尔玫瑰图的使用以及南丁格尔玫瑰图详细配置 1.认识使用可以参考之前文章,会使用直接跳过1 引入官网的南丁格尔玫瑰图效果如下: 使用函数配置分为三个部分:初始化=> 设置 ...
python画玫瑰图_央视都在用的“南丁格尔玫瑰图”，原来Python也可以画
前一阵子,我看到央视新闻中,有一张比较好看数据图,如下: 后来才知道这叫"南丁格尔玫瑰图",是南丁格尔护士在克里米亚战争期间提交的一份关于士兵死伤报告时发明的一种图表. 我心想能不 ...

echars 南丁格尔图构建与配置

echars 南丁格尔图构建与配置相关推荐

最新文章

热门文章

echars 南丁格尔图 构建与配置

echars 南丁格尔图 构建与配置相关推荐

最新文章

热门文章

echars 南丁格尔图构建与配置

echars 南丁格尔图构建与配置相关推荐