一个echart折线图的demo及相关属性的注释

官网文档，可查看相关配置属性的参数和解释：

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、最后效果