源码地址: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', //angle
data: [
{
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'
// }
// },
// },
},
],
};
首先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}
{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}
{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', // 定义为连续型 viusalMap
min: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, //两端文字主体之间的距离,单位为px
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; // 范围标签显示内容。
}
},
{
show:true, //是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在
type: 'piecewise', // 定义为分段型 visualMap
splitNumber: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, //两端文字主体之间的距离,单位为px
showLabel:true, //是否显示每项的文本标签
itemGap:10, //每两个图元之间的间隔距离,单位为px
itemSymbol:"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. 重点;强调;加强语气