echarts折线图

最新推荐文章于 2023-08-15 14:43:52 发布

长安城中一市民

最新推荐文章于 2023-08-15 14:43:52 发布

阅读量323

点赞数 1

分类专栏：笔记文章标签： echarts 折线

本文链接：https://blog.csdn.net/WmingCSDN/article/details/88661751

版权

笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用Echarts在Vue应用中创建一个展示近半年内一级、二级和三级事件发生趋势的折线图。通过配置Echarts的选项，包括标题、坐标轴、网格、数据系列等，实现了一个美观且具有交互性的图表。

摘要由CSDN通过智能技术生成

近半年积累

{{oneValue}}
一级事件 {{twoValue}}
二级事件 {{threeValue}}
三级事件

说明：

一级事件二级事件三级事件

{{addTime}} 更新

Vue.component(Slider.name, Slider)
export default {
name: ‘YearData’,
data() {
return {
name: ‘近半年内各级别事件发生趋势’,
addTime: null,
loadingTimeImg: LoadingTime,
maxValue: 100,
oneValue: 43,
twoValue: 68,
threeValue: 96,
option: {
title: {
text: ‘近半年内各级别事件发生趋势’,
x: ‘left’,
left: 12,
textStyle: {
color: ‘#09AAF3’,
fontSize: 18
}
},
tooltip: {
trigger: ‘axis’
},
textStyle: {
color: ‘rgba(218, 218, 218, 0.6)’,
fontSize: 12
},
grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: ‘category’,
boundaryGap: false,
data: [‘五月’, ‘六月’, ‘七月’, ‘八月’, ‘九月’, ‘十月’, ‘十一月’],
splitLine: { // 去除网格
show: true,
lineStyle: {
color: ‘gray’,
}
},
axisLine: {
symbol: [‘none’, ‘path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20’],
symbolOffset: 5,
symbolSize: [15, 25],
onZero: false,
lineStyle: {
color: ‘#5F9DD1’,
width: 1
}
},
axisTick: {
show: false
}
},
yAxis: {
type: ‘value’,
splitLine: { // 去除网格
show: true,
lineStyle: {
color: ‘gray’,
}
},
axisLine: {
symbol: [‘none’, ‘path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20’],
symbolOffset: 5,
symbolSize: [15, 25],
onZero: false,
lineStyle: {
color: ‘#5F9DD1’,
width: 1
}
},
axisTick: {
show: false
}
},
color: [‘red’, ‘#FF6242’, ‘#1AB394’],
series: [
{
name: ‘一级事件’,
type: ‘line’,
stack: ‘一级事件’,
data: [2, 5, 8, 10, 8, 15, 18]
},
{
name: ‘二级事件’,
type: ‘line’,
stack: ‘二级事件’,
data: [5, 3, 10, 15, 11, 12, 13]
},
{
name: ‘三级事件’,
type: ‘line’,
stack: ‘三级事件’,
data: [8, 10, 5, 3, 5, 4, 2]
}
]
}
}
},
mounted() {
this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsarts.init(this.$ refs.lineChart).setOption(this.option)
this.getTime()
})
},
destroyed() { // 离开此组件的操作
window.removeEventListener(‘resize’, function () {
echarts.init(document.getElementById(‘lineChartYear’)).resize()
}, 20)
},
methods: {
getTime: function () {
let now = new Date()
let years = now.getFullYear() // 获取系统的年
let methods = now.getMonth() + 1 // 获取系统月份，由于月份是从0开始计算，所以要加1
let days = now.getDate() // 获取系统日，
if (methods.toString().length < 2) {
methods = ‘0’ + methods
}
if (days.toString().length < 2) {
days = ‘0’ + days
}
this.addTime = years + ‘-’ + methods + ‘-’ + days
}
}
}