echarts绘制折线图__纵坐标为虚线__折线下方区域有阴影__折线下方渐变色__调整折线颜色__提示框内容自定义设置__提示框文字前显示小圆点

效果图：

下面直接上代码：

<template>
 <el-container>
    <el-main>
      <div id="lineChart" :style="{width:'400px',height:'260px'}"></div>
    </el-main>
 </el-container>
</template>

<script>
export default {
 data () {
 return {
 };
 },

 components: {},

 computed: {},

 mounted(){
   this.drawLine();
 },

 methods: {
   drawLine(){
     //基于准备好的dom，初始化echarts实例
     let mychart=this.$echarts.init(document.getElementById('lineChart'))
     let option={
      //  title:{//标题
      //    text:'人口流动',
      //    textStyle:{
      //      color:'#ffffff'
      //    }
      //  },
       //绘制坐标轴
       xAxis:{
         type: 'category',
         axisLabel:{
            interval:0
         },
         axisTick: {//横坐标数据显示位置(起始位置向后移半格)
          alignWithLabel: true
        },
         data: ['10.27','10.28','10.29','10.30','10.31','11.1','11.2'],
         axisLine:{
           lineStyle:{
             type:'solid',
             color:'#aea7ac',//坐标线的颜色及横坐标值的颜色
             width:'2',//坐标线的宽度
           }
         },
        //  axisLable:{
        //    textStyle:{
        //      color:'#fff'//坐标值的具体颜色
        //    }
        //  }
       },
       yAxis:{
         name:'人口流动',
         nameTextStyle:{
           color:'#fff'
         },
         type:'value',
         splitLine:{
           lineStyle:{
             type:'dashed',//y轴分割线类型
             color:'#aea7ac',
           }
         },
        //  axisLine:{
        //    lineStyle:{
        //      type:'dashed',
        //      color:'#aea7ac',//坐标线的颜色及横坐标值的颜色
        //      width:'1',//坐标线的宽度
        //    }
        //  },
       },
       series:[{
         data:[150,230,234,435,543,213,111],
         type:'line',         
         //自定义线条颜色，
         lineStyle:{
           normal:{
             color:'#FFCC00'
           }
          },
         //设置线条上点的颜色
         itemStyle:{
          normal:{
            color:'#FFCC00'
          }
         },
         //设置折线图线下面颜色渐变
         areaStyle:{
           color:{
             type:'linear',
             x:0,
             y:0,
             x2:0,
             y2:1,
             colorStops:[{//渐变颜色
               offset:0,
               color:'rgba(234,151,27,0.52)'
             },
             {
               offset:1,
               color:'rgba(230,162,60,0.09)'
             }],
             global:false,
           }
         },
        }],
       //提示框
       tooltip:{
         trigger:'axis',
         backgroundColor:'#afd9ba',
         borderColor:'#afd9ba',
         textStyle: {
           align:'left',
           color:'#fff'
         },
         //自定义提示框显示内容函数
         formatter:function(params){
           console.log("params"+JSON.stringify(params))
           let marker='<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FFCC99;\"></span>'
           var res='<div>'+marker+'<span>月份：'+params[0].name+'</span></div>'
           for(var i=0;i<params.length;i++){
             res+='<div>'+marker+'<span>流动人数: '+params[i].data+'</span></div>'
           }
           return res;
         },
       },
      //自定义线条颜色，所描绘的线条会在这里选颜色渲染
      // color:['#FFCC00']
     }
     //绘制图表
     mychart.setOption(option)
   }
 }
}

</script>
<style lang='less' scoped>
.el-container{
  background-color:#284c8d;
}
</style>