官网文档,可查看相关配置属性的参数和解释:
https://www.echartsjs.com/zh/option.html#tooltip.axisPointer
1、HTML
<div id="myEchart" style="width:100%;height:350px;"></div>
2、引入相关依赖
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入折现图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
3、配置参数
mounted(){
_this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myEchart'))
// 绘制图表
myChart.setOption({
title: { text: '堆叠区域图' },
tooltip: {
trigger: 'axis',//“axis”:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
},
legend: {
//data: ['浏览量(PV)','访客数(UV)']
data: [
{name:'浏览量(PV)',textStyle:{color:'#666'}},
{name:'访客数(UV)',textStyle:{color:'#666'}}
],
},
toolbox: {
feature: {
saveAsImage: {},//保存为图片
}
},
grid: {
left: '6%',
right: '6%',
bottom: '2%',
height:'92%',
width:'88%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['04-05周日','04-06周一', '04-07周二', '04-08周三', '04-09周四', '04-10周五', '04-11周六'],
//axisPointer:{show:true},
}
],
yAxis: [
{
type: 'value',
//axisPointer:{show:false},
}
],
series: [
{
name: '浏览量(PV)',
type: 'line',
stack: '总量',
smooth: true ,//是否票平滑曲线显示
label: {
normal: {
show: true,
position: 'top'
}
},//拐点上是否显示数据
areaStyle: {
color:"rgba(24,144,255,0.2)"
},//填充区域的颜色
lineStyle:{
color:"rgb(24,144,255)"
},//折线的颜色
itemStyle:{
color:"rgb(24,144,255)",
borderType:"solid",
borderColor:"rgb(24,144,255)",
},//拐点的颜色
data: [150, 232, 201, 154, 190, 330, 410]
},{
name: '访客数(UV)',
type: 'line',
stack: '总量',
smooth: true ,//是否票平滑曲线显示
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {
color:"rgba(74,216,99,0.2)"
},//填充区域的颜色
lineStyle:{
color:"rgb(74,216,99)"
},//折线的颜色
itemStyle:{
color:"rgba(74,216,99)",
borderType:"solid",
borderColor:"rgb(74,216,99)",
},//拐点的颜色
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
});
},
}
4、最后效果