vue+echarts使用的一些设置（记录一下）

努力不够偷懒来凑

于 2023-09-01 10:37:15 发布

阅读量153

点赞数

文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/qq_32166301/article/details/132617504

版权

1.折线图

（1）Y轴设置：

yAxis: {

type: 'value',

name: "数量（次）", //单位

nameTextStyle: {

color: "#91B0CD", //单位字体颜色

nameLocation: "start", //单位位置

},

axisLine: { //Y轴颜色

lineStyle: {

color: '#FFFFFF'

}

},

axisTick: { //Y轴刻度控制 true显示 false隐藏

show: false

},

splitLine: { //内坐标线设置颜色

lineStyle: {

color: 'rgba(255, 255, 255, 0.05)',

}

}

},

（x轴设置）

xAxis: {

type: 'category',

axisLine: {//坐标线

lineStyle: {

color: '#FFFFFF'

}

},

axisLabel: { //x轴字体倾斜

interval: 0,

rotate:25

},

axisTick: {//刻度

show: false

},

boundaryGap: false,

data: legend, //数据

},

字体颜色x与y轴相同时设置在option里面

textStyle: {

color: '#91B0CD'

},

series: [

{

data: series,

type: 'line',

itemStyle: { //折现颜色设置

color: '#00D7E9'

},

areaStyle: { //折现区域颜色渐变

color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

{

offset: 0,

color: 'rgba(26, 114, 230, 0.4)'

},

{

offset: 1,

color: 'rgba(0, 215, 233, 0.4)'

}

])

},

emphasis: {

focus: "series",

},

}

]

2.柱状图

series: [

{

name: '产品申请总数',

type: 'bar',

barWidth: '15', //柱状图的宽度

data: series,//数据

color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [ //颜色设置-渐变

{

offset: 1,

color: '#2E9F96'

},

{

offset: 0,

color: '#1C2DFE'

}

])

}

]