echarts属性提示
属性太多了,根本记不住,每次写了又要查,好烦,自己记录下吧
饼图
自定义label-加图片
效果
image: e1
这个e1是自己定义的图片
series: [
{
name: '构成',
type: 'pie',
radius: '60%',
itemStyle: {
borderRadius: '50%',
borderColor: '#fff',
borderWidth: 2
},
data: [
{
value: 1048,
name: '测试1',
label: {
formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
rich: {
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: e1
}
},
value: {
width: 10,
padding: [0, 20, 0, 10],
align: 'left'
},
rate: {
width: 20,
align: 'right',
padding: [0, 10, 0, 0]
}
}
}
},
{
value: 735,
name: '测试2',
label: {
formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
rich: {
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: e2
}
},
value: {
width: 10,
padding: [0, 20, 0, 10],
align: 'left'
},
rate: {
width: 20,
align: 'right',
padding: [0, 10, 0, 0]
}
}
}
},
{
value: 580,
name: '测试3',
label: {
formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
rich: {
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: e3
}
},
value: {
width: 10,
padding: [0, 20, 0, 10],
align: 'left'
},
rate: {
width: 20,
align: 'right',
padding: [0, 10, 0, 0]
}
}
}
},
{
value: 484,
name: '测试4',
label: {
formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
rich: {
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: e4
}
},
value: {
width: 10,
padding: [0, 20, 0, 10],
align: 'left'
},
rate: {
width: 20,
align: 'right',
padding: [0, 10, 0, 0]
}
}
}
},
{
value: 300,
name: '测试5',
label: {
formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
rich: {
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: e5
}
},
value: {
width: 10,
padding: [0, 20, 0, 10],
align: 'left'
},
rate: {
width: 20,
align: 'right',
padding: [0, 10, 0, 0]
}
}
}
}
]
}
]
饼图标题水平垂直居中
效果
title: {
text: '当年',
x: 'center',
y: 'center',
left: '28%',
textAlign: 'center',
textStyle: {
color: '#FFF'
}
},
饼图展示百分比
效果
label: {
show: true,
formatter: '{b}:{d}%', // \n 可以换行
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '100',
color: '#FFFFFF'
},
},
饼图图案显示距离
效果
series: [{
label: {
show: true,
position: 'insideBottom', // inside内部中央,insideBottom内部靠下方
formatter: '{b}',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '100',
color: '#FFFFFF'
},
},
labelLine: {
smooth: true,
length: 1, // 第一段的长度
length2: 1, // 第二段的长度
lineStyle: {
width: 1.5
}
}
}]
饼图的位置啊,内圈缩放啊
效果
series: [
{
type: 'pie',
radius: ['60%', '70%'], // 圆环效果的
center: ['50%', '60%'], // 摆放位置的
color:['rgba(29, 101, 210, 1)', 'rgba(77, 201, 206, 1)'],// 设置属性颜色的
label: {// 设置选中框效果的
show: true,
color: '#FFFFFF',
formatter: '{d} %\n{b}',
fontSize: 14,
},
data: [
{ value: 1048, name: '今日用电量' },
{ value: 735, name: '今日发电量' },
]
}
]
修改legend图例带百分比
效果
代码
legend: {
orient: 'middle',
x:'right', //可设定图例在左、右、居中
y:'center', //可设定图例在上、下、居中
itemWidth:16, //图例的宽度
itemHeight:10, //图例的高度
textStyle:{ //图例文字的样式
color:'#FFFFFF',
},
formatter(name:any) {// 图例带百分比
// console.log(Propecharts);
const than = eOptions1.value.series[0].data; //获取series中的data
let total = 0;
let tarValue = 0;
for (let i = 0, l = than.length; i < l; i++) {
total += than[i].value;
console.log(total);
if (than[i].name == name) {
tarValue = than[i].value;
}
}
const p = ((tarValue / total) * 100).toFixed(1);
return name + " " + " " + p + "%";
}
},
柱状图
堆叠图 tooltip显示百分比
效果
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
},
formatter: function(params) {//这里就是控制显示的样式
let relVal = params[0].name;
let value = 0;
for (let i = 0, l = params.length; i < l; i++) {
value += params[i].value;
}
for (let i = 0, l = params.length; i < l; i++) {
//marker 就是带颜色的小圆圈 seriesName x轴名称 value y轴值 后面就是计算百分比
relVal += '<br/>'+ params[i].marker + params[i].seriesName + ' : 数量 : '+ parseFloat(params[i].value) +', 百分比 : ' + (100 *
parseFloat(params[i].value) / parseFloat(value)).toFixed(2) + "%";
}
return relVal;
},
},
柱状图单柱变色-纵向渐变
效果
series: [
{
data: [],
barWidth : 15,//柱图宽度
showSymbol: false,
type: 'bar',
smooth: true,
itemStyle: {
// 定制显示(按顺序)
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#CF5831" // 0% 处的颜色
}, {
offset: 0.6,
color: "#4AE0D3" // 60% 处的颜色
}, {
offset: 1,
color: "#3ADC88" // 100% 处的颜色
}], false)
}
}
]
柱状图顺序展示指定颜色
效果
series: [
{
data: [],
barWidth : 15,//柱图宽度
showSymbol: false,
type: 'bar',
smooth: true,
itemStyle: {
// 定制显示(按顺序)
color: function(params) {
let colorList = ['#19B8AE','#FFD701','#F55B23'];
return colorList[params.dataIndex]
}
}
}
]
设置柱状图颜色-横向变色
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
itemStyle: {
color: new echarts.graphic.LinearGradient (
0, 0, 0, 1,
[
{offset: 0, color: '#7469EC'},
{offset: 0.5, color: '#7469EC'},
{offset: 1, color: '#7469EC'}
]
)
},
type: 'bar'
}]
设置柱状图形状和大小
效果
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
barWidth : 10,//柱图宽度
itemStyle: { // 圆角样式
barBorderRadius: [10, 10, 0, 0],
},
type: 'bar'
}]
折线图
左右两组数据
{
legend: {
// top: '5%',
left: 'center',
icon: 'rect',
itemWidth:6, //图例的宽度
itemHeight:6, //图例的高度
textStyle:{ //图例文字的样式
color:'#FFFFFF',
fontSize: '12px'
},
},
grid: {
left: '5px',
right: '5px',
bottom: '5px',
top: '20px',
containLabel: true
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#fff'
},
backgroundColor: 'rgba(16, 32, 40, 0.88)',
borderRadius: 4,
borderColor: '#20749e',
formatter: '{b}<br/>{a0}: {c0}℃<br/>{a1}: {c1}%'
},
xAxis: {
type: 'category',
axisLabel: {
textStyle: {
color: '#ffffff'
}
},
axisLine:{ //刻度
lineStyle: {
color: "rgba(219,225,255,.3)",
// width: 1,
type: "solid",
},
},
data: []
},
yAxis: [
{
name: '℃',
type: 'value',
min: 0,
max: 50,
interval: 10,
nameGap: 4, // --与y轴距离
nameTextStyle: {
fontSize: 12,
color: '#ffffff'
},
axisLabel: {
textStyle: {
color: '#ffffff'
}
},
//坐标轴线样式
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //solid实线;dashed虚线
color: 'rgba(255,255,255,0.1)'
}
},
},
{
name: '%',
type: 'value',
min: 0,
max: 100,
interval: 20,
nameGap: 4, // --与y轴距离
nameTextStyle: {
fontSize: 12,
color: '#ffffff'
},
axisLabel: {
textStyle: {
color: '#ffffff'
}
},
//坐标轴线样式
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //solid实线;dashed虚线
color: 'rgba(255,255,255,0.1)'
}
},
},
],
series: [
{
name:'温度',
data: [],
showSymbol: false,
type: 'line',
smooth: true,
itemStyle: {
// 定制显示(按顺序)
color: 'rgba(20, 247, 233, 1)'
},
areaStyle: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(20, 247, 233, .39)'
}, {
offset: .34,
color: 'rgba(20, 247, 233,0.25)'
},{
offset: 1,
color: 'rgba(20, 247, 233,0.00)'
}])
}
},
{
name:'湿度',
data: [],
showSymbol: false,
type: 'line',
smooth: true,
itemStyle: {
// 定制显示(按顺序)
color: 'rgba(82, 185, 239, 1)'
},
yAxisIndex: 1,
areaStyle: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(82, 185, 239, .39)'
}, {
offset: .34,
color: 'rgba(82, 185, 239,0.25)'
},{
offset: 1,
color: 'rgba(82, 185, 239,0.00)'
}])
}
}
]
}
效果
顶点和低点
效果
series: [
{
markPoint: {
symbolSize: 30,
data: [
{ type: 'max', name: 'Max', itemStyle: {
color: {
type: 'radial',
x: 0.4,
y: 0.4,
r: 0.9,
colorStops: [{
offset: 0,
color: '#fb3b40'
}, {
offset: 1,
color: 'rgb(246, 47, 78)'
}],
globalCoord: false
},
shadowColor: 'rgba(255,0,70,0.5)',
shadowBlur: 10,
}, label: {color: '#FFFFFF', position: 'top'} },
{ type: 'min', name: 'Min', itemStyle: {
color: {
type: 'radial',
x: 0.4,
y: 0.4,
r: 0.9,
colorStops: [{
offset: 0,
color: '#3bfba7'
}, {
offset: 1,
color: 'rgb(48, 183, 129)'
}],
globalCoord: false
},
shadowColor: 'rgba(48, 183, 129, 0.5)',
shadowBlur: 10,
}, label: {color: '#5a5a5a', position: 'top'}} }
]
},
},
]
折线图分段显示
效果
visualMap: {
show: false,
// type: 'continuous',
pieces: [
{
gt: 1,// 对应y轴刻度起始值
lte: 2, // 对应y轴刻度结束值
color: '#01655f'
}, {
gt: 2,
lte: 3,
color: '#5aa539'
}, {
gt: 3,
lte: 4,
color: '#fba100'
},
{
gt: 4,
lte: 5,
color: '#ca5227'
},
{
gt: 5,
color: '#f55b23'
},
],
},
xAxis: {
type: 'category',
data: []
},
取消折线图小圆点
效果
series: [
{
data: [],
showSymbol: false,
type: 'line',
smooth: true
}
]
y轴刻度虚线
效果
yAxis: {
type: 'value',
//坐标轴线样式
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //solid实线;dashed虚线
color: 'rgba(255,255,255,0.2)'
}
},
},
修改线型图阴影
效果
series: [
{
name: 'xx',
data: [],
type: 'line',
smooth: true,
symbol: "none",
areaStyle: {
normal:{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(118, 252, 187, .39)'
}, {
offset: .34,
color: 'rgba(52,255,168,0.25)'
},{
offset: 1,
color: 'rgba(38,197,254,0.00)'
}])
}
},
},
]
设置线条颜色的
效果
series: [
{
name: '电流',
type: 'line',
showSymbol: false,
itemStyle: { // 设置线条颜色
color: 'rgba(50, 125, 234, 1)'
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
}]
修改数据图节点文字样式,文字位置
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
label: {
show: true, // 展示文字
position: 'right', // 文字位置(top(正上方)/bottom(正下方)/left(左边)/right(右边))
textStyle: { // 文字颜色
color: 'rgba(0,0,0,0.22)'
}
},
emphasis: {
focus: 'series'
},
itemStyle: {
color: new echarts.graphic.LinearGradient (
0, 0, 0, 1,
[
{offset: 0, color: '#509EBE'},
{offset: 0.5, color: '#509EBE'},
{offset: 1, color: '#509EBE'}
]
)
},
data: []
},
]
通用
地图标点图片
const kqPointUrl = ''
series: [{
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'image://' + kqPointUrl,
symbolSize: [28, 33],
legendHoverLink: true,
data: [{
name: '动物园',
value: [121.681409, 29.809711],
pm: '优',
fylz: '一级',
upDate: '11-09 11:45',
}, ],
}]
y轴单位超出修改显示
效果
yAxis: [
{
name: '单位:123123111',
// nameGap: 50, // y轴name与横纵坐标轴线的间距
nameLocation: 'left',
nameTextStyle: {
padding: [0, 0, 0, 30, 0], // 加上padding可以调整其位置
// y轴name的样式调整
color: '#8A8F91'
}
}
],
文字提示换行
效果
tooltip: {
trigger: 'item',
textStyle: {
color: '#fff'
},
backgroundColor: 'rgba(16, 32, 40, 0.88)',
borderRadius: 4,
borderColor: '#20749e',
formatter: '{a}<br/>{b}: {c}家'
},
修改title提示的
效果
legend: {
icon: "roundRect",// 字段控制形状 类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none`
textStyle: {// 字体颜色的
color: 'rgba(163, 163, 163, 1)',
},
itemWidth: 16,// 宽啊
itemHeight: 6,// 高啊
left: 'center',// 摆放位置的
},
修改选中高亮框的
效果
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, .8)', // 背景框的
borderColor: 'rgba(0, 0, 0, 0)',// 设置边框的
textStyle: { // 字体效果
color: '#FFFFFF',
fontSize: 15,
fontStyle: 'italic',
fontWeight: 'bold'
}
},
设置横向线条的,取消y轴,取消网格线
yAxis: [
{
type: 'value',
name: '电压',
axisLine: {
show: false,// 取消y轴的
lineStyle: {
color: '#A3A3A3'
}
},
splitLine: { //网格线
show: false,
lineStyle:{
color: '#e0e6f1'
}
},
},
],
label提示换行
效果
series:[
{
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
}
}
]
改变legend样式
legend: {
top: '5%',
left: 'center',
itemWidth: 20,
itemHeight: 20,
data: [
{icon: 'circle', name: '搜索引擎'},
{icon: 'rect', name: '直接访问'},
{icon: 'roundRect', name: '邮件营销'},
{icon: 'triangle', name: '联盟广告'},
{icon: 'diamond', name: '视频广告'},
{icon: 'pin', name: 'SEO'},
{icon: 'arrow', name: '定点投放'}
]
}
none
就是没有的意思
修改x轴,y轴文字颜色
xAxis : [
{
type : 'category',
data : [],
axisLabel: {
show: true,
textStyle: {
color: '#ffffff'
}
}
}
]
yAxis : [
{
type : 'value',
data : [],
axisLabel: {
show: true,
textStyle: {
color: '#ffffff'
}
}
}
]
修改刻度线颜色
axisLine:{ //刻度
show:false, // 隐藏刻度
lineStyle: {
color: "rgba(219,225,255,.3)", //
width: 0, //
type: "solid", //
},
},
双轴tooltip提示修改
tooltip: {
trigger: 'axis',
textStyle: {
color: '#fff'
},
backgroundColor: 'rgba(16, 32, 40, 0.88)',
borderRadius: 4,
borderColor: '#20749e',
formatter: '{b}点<br/>{a0}: {c0}℃<br/>{a1}: {c1}%'
},
y轴刻度标题样式修改
yAxis: [{
name: '℃',
type: 'value',
nameTextStyle: {
fontSize: 14
},
axisLabel : {
formatter: '{value} A'
},
gridIndex: 0,
splitLine: {
lineStyle: {
type: 'dashed'
}
},
position: 'left',--位置靠左
nameLocation: 'middle', --位置居中
nameTextStyle: { // y轴name的样式调整
padding: [0,50,0,0], // 上右下左
color: '#FFFFFF'
},
nameGap: 60, --与y轴距离
nameRotate: 90 --角度
}]