数据可视化ECharts:饼形图2 地区分布模块制作（南丁格尔玫瑰图）

- 官网找到类似实例，适当分析，并且引入到HTML页面中

- 根据需求定制图表

- 需求1：颜色设置

color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

- 需求2：修改饼形图大小 ( series对象)

radius: ['10%', '70%'],

- 需求3：把饼形图的显示模式改为半径模式

 roseType: "radius",

- 需求4：数据使用更换（series对象里面 data对象）

          { value: 20, name: '云南' },{ value: 26, name: '北京' },{ value: 24, name: '山东' },{ value: 25, name: '河北' },{ value: 20, name: '江苏' },{ value: 25, name: '浙江' },{ value: 30, name: '四川' },{ value: 42, name: '湖北' }

- 需求5：字体略小些 10 px ( series对象里面设置 )

饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

series: [{name: "面积模式",type: "pie",radius: [30, 110],center: ["50%", "50%"],roseType: "radius",// 文本标签控制饼形图文字的相关样式， 注意它是一个对象label: {fontSize: 10},}]};

- 需求6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )

- 连接图表 6 px

- 连接文字 8 px

+        // 文字调整
+        label:{
+          fontSize: 10
+        },
+        // 引导线调整
+        labelLine: {
+          // 连接扇形图线长
+          length: 6,
+          // 连接文字线长
+          length2: 8
+        }
+      }
+    ],

length是链接图形那条线

length2是链接文字那条线

完整代码

// 点位分布统计模块
(function() {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".pie2  .chart"));// 2. 指定配置项和数据var option = {legend: {bottom:'0%',itemWidth: 10,itemHeight: 10,textStyle: {color: "rgba(255,255,255,.5)",fontSize: "12"}},tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {c} ({d}%)"},// 注意颜色写的位置color: ["#006cff","#60cda0","#ed8884","#ff9f7f","#0096ff","#9fe6b8","#32c5e9","#1d9dff"],series: [{name: "点位统计",type: "pie",// 如果radius是百分比则必须加引号radius: ["10%", "70%"],center: ["50%", "42%"],roseType: "radius",data: [{ value: 20, name: "云南" },{ value: 26, name: "北京" },{ value: 24, name: "山东" },{ value: 25, name: "河北" },{ value: 20, name: "江苏" },{ value: 25, name: "浙江" },{ value: 30, name: "深圳" },{ value: 42, name: "广东" }],// 修饰饼形图文字相关的样式 label对象label: {fontSize: 10},// 修饰引导线样式labelLine: {// 连接到图形的线长度length: 10,// 连接到文字的线长度length2: 10}}]};// 3. 配置项和数据给我们的实例化对象myChart.setOption(option);// 4. 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function() {// 让我们的图表调用 resize这个方法myChart.resize();});
})();

数据可视化ECharts:饼形图2 地区分布模块制作（南丁格尔玫瑰图）相关推荐

数据可视化ECharts:饼形图 1年龄分布模块制作
- 官网找到类似实例, 适当分析,并且引入到HTML页面中 - 根据需求定制图表定制图表需求1: - 修改图例组件在底部并且居中显示. - 每个小图标的宽度和高度修改为 10px - 文字大小为12 ...
利用Python实现新冠疫情数据可视化（获取疫情历史数据，制作南丁格尔玫瑰图、疫情地图、动态疫情组合图、词云）
文章目录前言 1.获取疫情历史数据 2.制作南丁格尔玫瑰图 2.1 全球各国确诊人数玫瑰图 2.2 全国各省市零新增天数玫瑰图 3.制作疫情地图 3.1全国各省市目前确诊总人数疫情地图 3.2全球各 ...
性感的数据可视化 —— 桑基图、气泡图、南丁格尔玫瑰图
阿里云数据中台官网 https://dp.alibaba.com/index (作者:常成) 2019年的"凯度信息之美奖"揭晓了,有很多很有意思的信息可视化作品.很多作品看到的时 ...
性感的数据可视化 —— 精讲桑基图、气泡图、南丁格尔玫瑰图
作者:常成 2019年的"凯度信息之美奖"揭晓了,有很多很有意思的信息可视化作品.很多作品看到的时候都被感动到,数据/信息不再是冷冰冰的,而是立体的,通过可视化可以让人们更清晰的看 ...
Python数据可视化之南丁格尔玫瑰图(亲测)
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
Python数据可视化之南丁格尔玫瑰图
文章目录 1. 什么是南丁格尔玫瑰图 2. 南丁格尔玫瑰图的绘制 1. 什么是南丁格尔玫瑰图央视新闻用来展示疫情0增长天数的图就是南丁格尔玫瑰图. 南丁格尔玫瑰图(Nightingale rose ...
关于Echarts南丁格尔玫瑰图的部分解释
<template><div id="easyEcharts" style="height: 600px;width: 800px">& ...
echarts绘制嵌套环形图(南丁格尔玫瑰图)
根据专业总人数和学院总人数绘制嵌套环形图首先,echarts的基本步骤引入js,准备容器,初始化实例, <script src="lib/echarts.min.js"& ...
echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...

数据可视化ECharts:饼形图2 地区分布模块制作（南丁格尔玫瑰图）

数据可视化ECharts:饼形图2 地区分布模块制作（南丁格尔玫瑰图）相关推荐

最新文章

热门文章