这是我学习vue-Echarts的笔记，并不是完全品。是我，对我使用Echarts时所用到的知识进行学习，有待后面补充完善。
series使用方法
一、饼图
(1)、饼图圆圈大小的调整series.radius
series.radius是一个[],数组的第一项是内半径（%），第二项是外半径（%）。
series: [
{
name: '档案盒使用统计',
type: 'pie',
radius: ['60%', '85%'],//数组的第一项是内半径（%），第二项是外半径（%）。
}
]
(2)、完整代码配置
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
color: ['#4b77be', '#fe4848'],
series: [
{
name: '档案盒使用统计',
type: 'pie',
radius: ['60%', '85%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false
}
},
labelLine: {
show: false
},
data: [
{
value: this.list.used,
name: '已使用'
},
{
value: this.list.notUsed,
name: '未使用'
}
]
}
]
}
二、折线图
(1)、折线图的折线上标记的图形拐点常见的样式修改。
- 图形拐点的形状
series.symbol:
circle(实心○),rect(□),roundRect(边框带弧度的□),triangle（△）,diamond（◇）,pin(水滴形),arrow(箭头形),none（无） - 图形拐点大小
series.symbolSize = num, - 图形拐点的样式
series.itemStyle.normal,
series: [
{
name: '归还',
type: 'line',
stack: 'Total',
smooth: true,
symbolSize: 13, //改变折线上的圆点大小
symbol: 'circle', //拐点设置为实心圆
itemStyle: {
normal: {
color: '#3723f4',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 //拐点边框大小
}
},
data: this.list.back_week
},
{
name: '归档',
type: 'line',
stack: 'Total',
smooth: true,
symbolSize: 13, //改变折线上的圆点大小
symbol: 'arrow', //拐点设置为箭头形
itemStyle: {
normal: {
color: '#c523f4',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 //拐点边框大小
}
},
data: this.list.file_week
},
{
name: '借阅',
type: 'line',
stack: 'Total',
smooth: true,
symbolSize: 13, //改变折线上的圆点大小
symbol: 'none', //拐点不显示
itemStyle: {
normal: {
color: '#41f423',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 //拐点边框大小
}
},
data: this.list.borrow_week
},
{
name: '入库',
type: 'line',
stack: 'Total',
smooth: true,
symbolSize: 13, //改变折线上的圆点大小
symbol: 'pin', //拐点设置为水滴形
itemStyle: {
normal: {
color: '#f45e23',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 //拐点边框大小
}
},
data: this.list.storage_week
}
]
(2)、折线图的线样式修改series.lineStyle
series: [
{
name: '归还',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 4,//线条粗细
color: '#3723f4'//线条颜色
},
data: this.list.back_week
},
{
name: '归档',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 4,//线条粗细
color: '#c523f4'//线条颜色
},
data: this.list.file_week
},
{
name: '借阅',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 4,//线条粗细
color: '#41f423'//线条颜色
},
data: this.list.borrow_week
},
{
name: '入库',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 4,//线条粗细
color: '#f45e23'//线条颜色
},
data: this.list.storage_week
}
]
(3)、完整代码配置
option = {
backgroundColor: '#021736', // echarts图表的背景颜色，默认为透明
title: {
text: '进7日案件流转分析',
show: false
},
tooltip: {
trigger: 'axis'
},
legend: {
icon: 'rect',
itemHeight: 6, //修改icon图形大小
align: 'right', //修改图标和文字的前后位置
textStyle: {
color: '#c3cad9',
fontSize: 18,
fontFamily: 'SourceHanSansCN-Regular'
},
data: ['归还', '归档', '借阅', '入库']
},
color: ['#3723f4', '#c523f4', '#41f423', '#f45e23'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true, //为true时，不从圆点开始
data: [
'12/05',
'12/06',
'12/07',
'12/08',
'12/09',
'12/10',
'12/11'
],
// x轴的字体样式
axisLabel: {
show: true,
textStyle: {
color: '#657ca8',
fontSize: '14',
fontFamily: 'SourceHanSansCN - Regular'
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: '#192c4e'
}
},
// x轴的颜色和宽度
axisLine: {
lineStyle: {
color: '#192c4e',
width: 1 //这里是坐标轴的宽度,可以去掉
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#657ca8',
fontSize: '14',
fontFamily: 'SourceHanSansCN - Regular'
}
},
// y轴的颜色和宽度
axisLine: {
lineStyle: {
color: '#192c4e',
width: 1 //这里是坐标轴的宽度
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: '#192c4e'
}
}
},
series: [
{
name: '归还',
type: 'line',
stack: 'Total',
smooth: true,
symbolSize: 13, //改变折线上的圆点大小
symbol: 'circle', //拐点设置为实心⚪
itemStyle: {
normal: {
color: '#3723f4',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 //拐点边框大小
}
},
lineStyle: {
width: 4, //线条粗细
color: '#3723f4' //线条颜色
},
data: this.list.back_week
},
{
name: '归档',
type: 'line',
stack: 'Total',
smooth: true,
symbolSize: 13, //改变折线上的圆点大小
symbol: 'arrow', //拐点设置为箭头形
itemStyle: {
normal: {
color: '#c523f4',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 //拐点边框大小
}
},
lineStyle: {
width: 4, //线条粗细
color: '#c523f4' //线条颜色
},
data: this.list.file_week
},
{
name: '借阅',
type: 'line',
stack: 'Total',
smooth: true,
symbolSize: 13, //改变折线上的圆点大小
symbol: 'none', //拐点设置为不显示
itemStyle: {
normal: {
color: '#41f423',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 //拐点边框大小
}
},
lineStyle: {
width: 4, //线条粗细
color: '#41f423' //线条颜色
},
data: this.list.borrow_week
},
{
name: '入库',
type: 'line',
stack: 'Total',
smooth: true,
symbolSize: 13, //改变折线上的圆点大小
symbol: 'pin', //拐点设置为水滴形
itemStyle: {
normal: {
color: '#f45e23',
borderColor: '#fff', //拐点边框颜色
borderWidth: 1 //拐点边框大小
}
},
lineStyle: {
width: 4, //线条粗细
color: '#f45e23' //线条颜色
},
data: this.list.storage_week
}
]
}
三、柱形图
(1)、给柱形图的柱子加上背景颜色series.backgroundStyle.color
series: [
{
data: this.list.eight_year_data,
type: 'bar',
barWidth: 15,
showBackground: true,
backgroundStyle: {
color: '#0b224d'//改变柱子的背景颜色
},
}
]
(2)、柱形图的柱子颜色渐变
series: [{
data: [18, 16, 8, 10, 5, 24],
type: 'bar',
showBackground: false,
barWidth: '16px', //柱体宽度
itemStyle: {
barBorderRadius: [2, 2, 0, 0], //柱体圆角
color: new echarts.graphic.LinearGradient(
//前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
//通过修改前4个参数，可以实现不同的渐变方向
/*第五个参数则是一个数组，用于配置颜色的渐变过程。
每项为一个对象，包含offset和color两个参数
*/
0, 0, 0, 1, [{//代表渐变色从正上方开始
offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
color: '#09b0fa'
}, //柱图渐变色
{
offset: 1, //指100%处的颜色
color: '#2778ff'
}
]
),
}
]
(3)、完整代码配置
option = {
tooltip: {
trigger: 'axis'
},
title: {
text: '总流转',
top: '5%',
textStyle: {
fontSize: 17,
color: '#ffffff',
fontWeight: 'normal'
}
},
xAxis: {
type: 'category',
boundaryGap: true, //为true时，不从圆点开始
data: [
'2019/6',
'2019/7',
'2019/8',
'2019/9',
'2019/10',
'2019/11',
'2019/12'
],
// x轴的字体样式
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: '#657ca8',
fontSize: '12',
fontFamily: 'SourceHanSansCN - Regular'
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: '#192c4e'
}
},
// x轴的颜色和宽度
axisLine: {
lineStyle: {
color: '#192c4e',
width: 1 //这里是坐标轴的宽度,可以去掉
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#657ca8',
fontSize: '12',
fontFamily: 'SourceHanSansCN - Regular'
}
},
// y轴的颜色和宽度
axisLine: {
lineStyle: {
color: '#192c4e',
width: 1 //这里是坐标轴的宽度
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: '#192c4e'
}
}
},
series: [
{
data: this.list.eight_year_data,
type: 'bar',
barWidth: 15,
showBackground: true,
backgroundStyle: {
color: '#0b224d'
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#09b0fa' // 0% 处的颜色
},
{
offset: 1,
color: '#2778ff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
]
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
