先放成品图
这里只能展示出来,鼠标悬浮没有数据显示。
因为我用的vue3.0.所以用3.0的方式来说。
第一步先安装依赖,// 直接上图
点进去
继续点
这个选择运行依赖,因为你打包好上线的肯定也需要用,所以安装到运行依赖里面。在查找插件里面输入echarts。搜索
选择echarts安装。然后就去项目里面。就可以引用了,用import引入echarts。
在你的代码里面要写上一个初始化的容器,可以用css调节这个图表的大小。
准备就绪了就可以上初始化的代码了,
初始化图表的两句话。前提你得先把下面的option给定义了。
this.myChart = echarts.init(document.getElementById('echars'))
this.myChart.setOption(this.option)
要在mounted钩子里面获取容器实例化图表。在data里面定义一个null,用来接收dom对象。然后我把option数据贴出来,研究一下。这个option定义在data函数return出去的对象里面.
你可以改里面的颜色。xAxis下面的data数组是你的x轴的数据,yAxis的东西都隐藏了,也不需要啥。
主要就是 series数组里面的data,你从后台请求过来数据,只替换这两个data的数据就行了。别的都不变。
option: {
xAxis: {
show: false,
axisTick: {
show: false
},
boundaryGap: false,
data: ['01', '02', '03', '04', '05', '06', '02'] // x轴的下标数据
},
yAxis: {
type: 'value',
axisTick: {
show: false // 不显示y轴横刻度线
},
axisLabel: {
show: false // 不显示y轴上的刻度数
},
axisLine: {
show: false // 不显示y轴竖线
},
splitLine: {
show: false // 不显示分割线
}
},
series: [
{
type: 'line',
symbol: 'none', // 不显示曲线上的数据点
smooth: true, // 是否开启曲线,true为开启
itemStyle: {
normal: {
color: '#00d9ff' // 曲线的颜色
}
},
areaStyle: {
// 曲线下的渐变色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#d7f9ff'
},
{
offset: 1,
color: '#f9feff'
}
])
}
},
data: [10, 20, 25, 100, 40, 10, 20] // 对应的x轴数据
}
]