案例

注释代码

源码地址：https://www.makeapie.com/editor.html?c=x1zOZDoSxq

option = {backgroundColor: '#273454',color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'],tooltip: {trigger: 'item',formatter: '{b} : {c}个(占比{d}%)',textStyle: {fontSize: 15,},},legend: {data: ['栀子', '老竹', '茉莉红', '梧桐', '青竹'],orient: 'vertical',right: '5%',top: '13%',top: 'center',itemWidth: 20,itemHeight: 20,itemGap: 30,textStyle: {color: '#',fontSize: 16,},},grid: {containLabel: true,left: 0,right: 0,bottom: 0,top: '80px',},series: [{name: 'TITLE',type: 'pie',clockwise: false,startAngle: 90,radius: '70%',//图大小//radius: ['60%', '70%'],//设置空心饼状图//分别是图形占画布大小及中心空的程度center: ['41%', '50%'],//左右上下位置hoverAnimation: false,roseType: 'radius', //angledata: [{value: 23,name: '栀子',},{value: 22,name: '老竹',},{value: 24,name: '茉莉红',},{value: 21,name:  '梧桐', },{value: 21,name: '青竹',},],itemStyle: {//饼状图每一个项的间距normal: {borderColor: '#273454',borderWidth: '5',},},label: {show: true,position: 'outside',formatter: '{a|{b}：{d}%}\n{hr|}',//{hr|}图例组件小圆点rich: {hr: {backgroundColor: 't',//t小圆点颜色borderRadius: 100,width: 0,height: 10,padding: [3, 3, 0, -16],//？shadowColor: '#1c1b3a',//设置阴影样式shadowBlur: 1, //阴影模糊系数shadowOffsetX: '2',shadowOffsetY: '2',},a: {padding: [-35, 15, -20, 5],//？},},},labelLine: {//项标注线normal: {length: 20,length2: 30,lineStyle: {width: 1,},},},// label: {//内部标注样式//     normal: {//         show: true,//         position: 'inside',//         formatter: '{d}%',//         formatter: function(data){//             return data.percent.toFixed(0)+"%";//         },//         textStyle : {//             align : 'center',//             baseline : 'middle',//             fontFamily : '微软雅黑',//             fontSize : 15,//             fontWeight : 'bolder'//         }//     },// },},],
};

关于formatter

首先ECharts官网API提供了一些formatter格式化参数模板：

字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为’axis’ 的时候，会有多个系列的数据，此时可以通过{a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的{a}，{b}，{c}，{d}含义不一样。其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

u 折线（区域）图、柱状（条形）图、K线图: {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

u 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

u 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

u 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

回调函数

回调函数格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

饼图的类型

参考链接：echarts实用篇（一）——饼状图_BloodyMandoo的博客-CSDN博客

饼图分为：基本饼图、南丁格尔图（玫瑰图）、空心饼状图（环形图）、嵌套环形图

南丁格尔图只需设置roseType: 'angle',即可。

它有 ‘radius’ 和 ‘area’ 两种选择，意味着用半径或面积来体现数值的大小

空心饼状图设置radius: ['60%', '70%'],即可。两个参数按大小区分，一小一大分别是中心空的占比及图形占画布大小。

嵌套环形图有中心圆和外层环形组成。

option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']},series: [{name:'访问来源',type:'pie',selectedMode: 'single',//multiple多选，与下面的selected:true配合使用radius: [0, '30%'],//与'30%'等同label: {normal: {position: 'inner'//描述文字位置}},labelLine: {normal: {show: false}},data:[{value:335, name:'直达', selected:true},//默认选中{value:679, name:'营销广告'},{value:1548, name:'搜索引擎'}]},{name:'访问来源',type:'pie',radius: ['40%', '55%'],data:[{value:335, name:'直达'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1048, name:'百度'},{value:251, name:'谷歌'},{value:147, name:'必应'},{value:102, name:'其他'}]}]
};

定制饼图：

option = {backgroundColor: '#2c343c',title: {text: 'Customized Pie',left: 'center',top: 20,textStyle: {color: '#ccc',},},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)',},//根据数值大小配置颜色//这种需要跟随数据变化的通常称为定制饼状图。visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1],},},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '50%'],data: [{ value: 335, name: '直接访问' },{ value: 310, name: '邮件营销' },{ value: 274, name: '联盟广告' },{ value: 235, name: '视频广告' },{ value: 400, name: '搜索引擎' },].sort(function (a, b) {return a.value - b.value;}),//改变数据的排序方式，这里是递增roseType: 'radius',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)',},},},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)',},smooth: 0.2,length: 10,length2: 20,},},itemStyle: {normal: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)',},},//用于修改鼠标悬浮的动画方式animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;},},],
};

Echarts学习之十五：visualMap

visualMap=[                                     //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。// colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。{show:true,                              //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在type: 'continuous',                     // 定义为连续型 viusalMapmin:10,                                  //指定 visualMapContinuous 组件的允许的最小值max:100,                                 //指定 visualMapContinuous 组件的允许的最大值range:[15, 40],                          //指定手柄对应数值的位置。range 应在 min max 范围内calculable:true,                        //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）realtime:true,                          //拖拽时，是否实时更新inverse:false,                          //是否反转 visualMap 组件precision:0,                            //数据展示的小数精度，默认为0，无小数点itemWidth:20,                           //图形的宽度，即长条的宽度。itemHeight:140,                         //图形的高度，即长条的高度。align:"auto",                           //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。text:['High', 'Low'],                   //两端的文本textGap:10,                              //两端文字主体之间的距离，单位为pxdimension:2,                            //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度seriesIndex:1,                          //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列hoverLink:true,                         //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮inRange:{                               //定义 在选中范围中 的视觉元素color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],symbolSize: [30, 100]},outOfRange:{  //定义 在选中范围外 的视觉元素。color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],symbolSize: [30, 100]},zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'right:"auto",                               //组件离容器右侧的距离,'20%'bottom:"auto",                              //组件离容器下侧的距离,'20%'orient:"vertical",                         //图例排列方向padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]backgroundColor:"transparent",            //标题背景色borderColor:"#ccc",                         //边框颜色borderWidth:0,                               //边框线宽textStyle:mytextStyle,                      //文本样式formatter: function (value) {                 //标签的格式化工具。return 'aaaa' + value;                    // 范围标签显示内容。}},{show:true,                          //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在type: 'piecewise',                  // 定义为分段型 visualMapsplitNumber:5,                      //对于连续型数据，自动平均切分成几段。默认为5段pieces: [                           //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式{min: 1500},                     // 不指定 max，表示 max 为无限大（Infinity）。{min: 900, max: 1500},{min: 310, max: 1000},{min: 200, max: 300},{min: 10, max: 200, label: '10 到 200（自定义label）'},{value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。{max: 5}                        // 不指定 min，表示 min 为无限大（-Infinity）。],categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],  //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集min:10,                             //指定 visualMapContinuous 组件的允许的最小值max:100,                             //指定 visualMapContinuous 组件的允许的最大值minOpen:true,                       //界面上会额外多出一个『< min』的选块maxOpen:true,                       //界面上会额外多出一个『> max』的选块。selectedMode:"multiple",           //选择模式，可以是：'multiple'（多选）。'single'（单选）。inverse:false,                      //是否反转 visualMap 组件precision:0,                        //数据展示的小数精度，默认为0，无小数点itemWidth:20,                       //图形的宽度，即长条的宽度。itemHeight:140,                     //图形的高度，即长条的高度。align:"auto",                       //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。text:['High', 'Low'],               //两端的文本textGap:10,                          //两端文字主体之间的距离，单位为pxshowLabel:true,                     //是否显示每项的文本标签itemGap:10,                          //每两个图元之间的间隔距离，单位为pxitemSymbol:"roundRect",             //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'dimension:2,                          //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度seriesIndex:1,                        //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列hoverLink:true,                      //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮inRange:{                             //定义 在选中范围中 的视觉元素color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],symbolSize: [30, 100]},outOfRange:{                            //定义 在选中范围外 的视觉元素。color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],symbolSize: [30, 100]},zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'right:"auto",                               //组件离容器右侧的距离,'20%'bottom:"auto",                              //组件离容器下侧的距离,'20%'orient:"vertical",                        //图例排列方向padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]backgroundColor:"transparent",            //标题背景色borderColor:"#ccc",                         //边框颜色borderWidth:0,                               //边框线宽textStyle:mytextStyle,                      //文本样式formatter: function (value) {                //标签的格式化工具。return 'aaaa' + value;                   // 范围标签显示内容。}}
];

排序、加载完成显示图形的动画效果、可选范围的颜色。

英语

emphasis n. 重点；强调；加强语气

echarts(3)——饼图相关推荐

Echarts 解决饼图文字过长重叠的问题
Echarts 解决饼图文字过长重叠的问题参考文章: (1)Echarts 解决饼图文字过长重叠的问题 (2)https://www.cnblogs.com/yingsu/p/10608014.ht ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
java word 饼图_[Java教程]echarts标准饼图解读(一)——基本配置demo
[Java教程]echarts标准饼图解读(一)--基本配置demo 0 2016-11-21 17:00:18 echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title) ...
Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...
Echarts实现饼图+饼图中心文字显示
Echarts实现饼图+饼图中心文字显示描述效果源代码描述 Echarts实现饼图+中心文字显示. 在 title 内实现饼图中心文字展示. 效果源代码 let data = [{ name ...
echart饼图标签重叠_解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
echarts 3d饼图
echarts 3d饼图效果图: 第一步: 在main.js引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = ...
Echarts pie饼图的使用（入门级）
2023.1.6今天我学习了如何使用echarts pie饼图,效果如: 首先是给容器设置id,宽高然后是 var pieChart = echarts.init(document.getEleme ...
echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ...
echarts中饼图的指示线前加圆点
echarts中饼图的指示线加圆点 echart中饼图的指示线加圆点,圆点的颜色与指示线的颜色一致 let data = [{"name": "业务1",&qu ...

echarts(3)——饼图

案例

注释代码

关于formatter

饼图的类型

英语

echarts(3)——饼图相关推荐

最新文章

热门文章