<template>
<div>
<div class="line-picture" style="width: 100%">
<div id="taskRunStatusLine" style="width: 100%;height: 400px;border: 1px solid green"></div>
</div>
</div>
</template>
<script>
export default {
name: 'TaskRunStatusLine',
description: '任务运行情况折线图',
mixins: [],
components: {},
// props: {
// lineObj: Object
// },
data() {
return {
yData: [],
xData: []
}
},
//监听,解决第一次加载页面时无法渲染第一个echart图,和切换图例时,点击搜索按钮无法加载数据问题
// watch: {
// lineObj() {
// this.initFailureBarVertical()
// }
// },
mounted() {
this.initFailureBarVertical()
},
methods: {
initFailureBarVertical() {
// console.log('获取父组件的数据<----------', this.lineObj)
// this.yData = this.lineObj.yData
// this.xData = this.lineObj.xData
// this.yData = [55, 35, 62, 55, 97, 64, 44, 66, 78, 82, 33, 77]
// this.xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const that = this
let myChart = that.$echarts.init(document.getElementById('taskRunStatusLine'))
let option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['2018', '2019']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,//坐标轴两边留白
data: ['12201', '12202', '12203', '12204', '12301', '12302', '12303', '12304', '12401', '12402', '12403', '12404'],
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
// margin:15,
textStyle: {
color: '#1B253A',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12
},
formatter: function(params) {
var newParamsName = ''
var paramsNameNumber = params.length
var provideNumber = 4 //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = ''
var start = p * provideNumber
var end = start + provideNumber
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber)
} else {
tempStr = params.substring(start, end) + '\n'
}
newParamsName += tempStr
}
} else {
newParamsName = params
}
return newParamsName
}
//rotate:50,
},
axisTick: {//坐标轴刻度相关设置。
show: false
},
axisLine: {//坐标轴轴线相关设置
lineStyle: {
color: '#E5E9ED'
// opacity:0.2
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
color: '#E5E9ED'
// opacity:0.1
}
}
},
yAxis: [
{
type: 'value',
splitNumber: 5,
axisLabel: {
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#E5E9ED'
// opacity:0.1
}
}
}
],
series: [
{
name: '2018',
type: 'line',
itemStyle: {
normal: {
color: '#3A84FF',
lineStyle: {
color: '#3A84FF',
width: 1
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(58,132,255,0)'
}, {
offset: 1,
color: 'rgba(58,132,255,0.35)'
}]),
}
}
},
data: [1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4]
},
{
name: '2019',
type: 'line',
itemStyle: {
normal: {
color: 'rgba(255,80,124,1)',
lineStyle: {
color: 'rgba(255,80,124,1)',
width: 1
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(255,80,124,0)'
}, {
offset: 1,
color: 'rgba(255,80,124,0.35)'
}])
}
}
},
data: [9, 5, 7, 8, 6, 7, 8, 7, 7, 6, 8, 6]
}
]
}
that.myChart = myChart
myChart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
.line-picture {
padding: 0 10px;
}
</style>
折线图样式Demo01
最新推荐文章于 2024-03-26 09:58:04 发布