vue项目使用echarts,背景透明,隐藏坐标轴和刻度线,自定义网格线样式
因为页面多处用到,所以选择封装:commonLine(echart, seriesName, dataX, dataY) {// 基于准备好的dom,初始化echarts实例const echarts = require('echarts')// 基于准备好的dom,初始化echarts实例const myChart = echarts.init(echart)// 绘制图表myChart.set
·
因为页面多处用到,所以选择封装
来,都让开!上代码:
commonLine(echart, seriesName, dataX, dataY) {
// 基于准备好的dom,初始化echarts实例
const echarts = require('echarts')
// 基于准备好的dom,初始化echarts实例
const myChart = echarts.init(echart)
// 绘制图表
myChart.setOption({
backgroundColor: '', // 背景颜色透明
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 40,
x2: 0,
y2: 15,
containLabel: true
},
xAxis: {
data: dataX,
axisLabel: {
// interval: 0, // 强制文字产生间隔
rotate: 45,
textStyle: { // 文字样式
color: '#FFF',
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: 'rgba(191, 191, 191, 0.2)' // 更改坐标轴颜色
}
}
},
yAxis: {
// max: 150,
// interval: 50, // 每次增加几个
axisLine: { // 隐藏y轴
show: false
},
axisTick: { // 隐藏y轴刻度线
show: false
},
splitLine: { // 自定义网格线样式
lineStyle: {
type: 'dashed',
color: 'rgba(233, 233, 233, 0.2)'
}
},
axisLabel: {
interval: 1,
textStyle: { // 自定义文字样式
color: '#FFF',
fontSize: 12
}
}
},
series: [
{
name: seriesName,
type: 'line',
// smooth: true,
symbol: 'circle', // 折线点设置为实心点
symbolSize: 8, // 折线点的大小
data: dataY,
itemStyle: {
normal: {
color: '#1890FF',
lineStyle: {
color: '#1890FF'
}
}
}
}
]
})
this.resizeEcharts(echart, myChart) // 调用封装的自适应echarts函数
},
更多推荐
已为社区贡献2条内容
所有评论(0)