折线图基本配置

图片：

微信图片_20200814103115.png

1.echarts npm

npm install echarts 

2.页面内按需引入echarts

3.demo代码

<template>
    <div style="background:rgba(0,0,0,.7)">
        <div id="line_echart" style="width:345px;height:115px"></div>
    </div>
</template>
<script>
 //echarts主模块
let ECHARTS = require('echarts/lib/echarts')
//echarts折线图模块
require('echarts/lib/chart/line')
export default {
    data(){
        return {
        }
    },
    mounted(){
        this.getEcharts()
    },
    methods:{
         getEcharts(){
            this.$nextTick(()=>{
                let option = {
                    // 直角坐标系内绘图网格
                    grid: {
                        top:'8',//grid 组件离容器上侧的距离。
                        left: '5',//grid 组件离容器左侧的距离
                        right: '12',
                        bottom: '3',
                        containLabel: true//是否包含坐标轴的刻度标签(1月，2月显示)
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,  //折线图不从0刻度开始
                        //坐标轴轴线相关设置
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(256,256,256,.7)',
                            }
                        },
                        // 坐标轴刻度
                        axisTick: {
                            show:false
                        },
                        //网格线
                        splitLine: {
                            show:true,
                            lineStyle:{
                                type:'dashed',
                                color:'rgba(256,256,256,.3)'
                            }
                        },
                        data: ['5月', '6月', '7月', '8月', '9月', '10月', '11月']
                    },
                    yAxis: {
                        type: 'value',
                        //坐标轴轴线相关设置
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(256,256,256,0)',//变相隐藏
                            }
                        },
                        // 坐标轴刻度
                        axisTick: {
                            show:false
                        },
                        //网格线
                        splitLine: {
                            show:true,
                            lineStyle:{
                                type:'dashed',
                                color:'rgba(256,256,256,.3)'
                            }
                        },
                    },
                    series: [{
                        data: ['', 932, 901, 934, 1290, '', ''],//若没有数据了用''代替，这样折线图不会到0
                        type: 'line',
                            itemStyle: {
                            normal: {
                                // 小圆点颜色
                                color: "rgba(179,127,235,0.5)",
                                // 折线设置
                                lineStyle: {
                                    color: 'rgba(256,256,256,.9)',
                                    width: 1,
                                },
                                label:{//显示小圆点上方的数据
                                    show:true,
                                    color:'#fff',
                                }
                            }
                        },
                    }]
                };
                this.lineEchart = ECHARTS.init(document.getElementById('line_echart'));
                this.lineEchart.setOption(option);
            })
        },
    }
}
</script>