数据可视化ECharts:饼形图 1年龄分布模块制作

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

- 根据需求定制图表

定制图表需求1：

- 修改图例组件在底部并且居中显示。

- 每个小图标的宽度和高度修改为 10px

- 文字大小为12 颜色 rgba(255,255,255,.5)

 legend: {// 距离底部为0%bottom: "0%",// 小图标的宽度和高度itemWidth: 10,itemHeight: 10,data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],// 修改图例组件的文字为 12pxtextStyle: {color: "rgba(255,255,255,.5)",fontSize: "12"}},

定制需求2：

- 修改水平居中垂直居中

- 修改内圆半径和外圆半径为 ["40%", "60%"] 带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而我们饼形图是通过 radius 修改大小

series: [{name: "年龄分布",type: "pie",// 设置饼形图在容器中的位置center: ["50%", "50%"],//  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的radius: ["40%", "60%"],// 不显示标签文字label: { show: false },// 不显示连接线labelLine: { show: false },}]

定制需求3：更换数据

// legend 中的data  可省略
data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
//  series 中的数据data: [{ value: 1, name: "0岁以下" },{ value: 4, name: "20-29岁" },{ value: 2, name: "30-39岁" },{ value: 2, name: "40-49岁" },{ value: 1, name: "50岁以上" }] ,

定制需求4：更换颜色

color: ["#065aab","#066eab","#0682ab","#0696ab","#06a0ab",],

4. 让图表跟随屏幕自动的去适应

  window.addEventListener("resize", function() {myChart.resize();});

完整代码

// 饼图1(function() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.querySelector(".pie .chart"));option = {tooltip: {trigger: "item",formatter: "{a} <br/>{b}: {c} ({d}%)",position: function(p) {//其中p为当前鼠标的位置return [p[0] + 10, p[1] - 10];}},legend: {top: "90%",itemWidth: 10,itemHeight: 10,data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],textStyle: {color: "rgba(255,255,255,.5)",fontSize: "12"}},series: [{name: "年龄分布",type: "pie",center: ["50%", "42%"],radius: ["40%", "60%"],color: ["#065aab","#066eab","#0682ab","#0696ab","#06a0ab","#06b4ab","#06c8ab","#06dcab","#06f0ab"],label: { show: false },labelLine: { show: false },data: [{ value: 1, name: "0岁以下" },{ value: 4, name: "20-29岁" },{ value: 2, name: "30-39岁" },{ value: 2, name: "40-49岁" },{ value: 1, name: "50岁以上" }]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});})();

数据可视化ECharts:饼形图 1年龄分布模块制作相关推荐

数据可视化ECharts:饼形图2 地区分布模块制作（南丁格尔玫瑰图）
- 官网找到类似实例, 适当分析,并且引入到HTML页面中 - 根据需求定制图表 - 需求1:颜色设置 color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7 ...
数据可视化ECharts:中国地图模拟飞行模块
原先是用ECharts自带的社区做的,但是现在在新版已经没有了,然后我又找到了一个相似的Echarts - ChartLib (datains.cn) 实现步骤: - 第一需要下载china.js提供 ...
数据可视化——echarts
目录一.可视化面板介绍二.可视化库介绍三.Echarts-体验 1.引入echarts 插件文件到html页面中 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置 ...
数据可视化Echarts学习指南
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术完成该项目 ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
数据可视化ECharts的七大常用图表，看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录数据可视化什么是数据可视化? 数据可视化的好处数据可视化的实现方式 ECharts ECharts的特性一个ECh ...
数据可视化(ECharts)
DAY01-可视化项目 01-项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们 ...

数据可视化ECharts:饼形图 1年龄分布模块制作

数据可视化ECharts:饼形图 1年龄分布模块制作相关推荐

最新文章

热门文章