【echarts】折线图

1.折线图实现步骤

 //1.初始化图表
        let myCharts = echarts.init(document.getElementById('charts'))
        //2.准备x轴数据
        let xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        //3.准备y轴数据
        let yDataArr =  [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
        let option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'line', //4.type指定为line 为折线图
                    data: yDataArr,
                },
            ]
        }
        //5.渲染图表
        myCharts.setOption(option)

折线图常见效果

    let option = {
            xAxis: {
                type: 'category',
                data: xDataArr,
                boundaryGap:false, //紧挨边缘
            },
            yAxis: {
                type: 'value',
                scale:true //脱离0值范围
            },
            series: [
                {
                    type: 'line', //4.type指定为line 为折线图
                    data: yDataArr,
                    markPoint: { //最大值 最小值
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: { //平均值
                        data: [
                            { type: 'average', name: '平均值' },
                        ]
                    },
                    markArea: {  //标注区间
                        data: [
                            [
                                { xAxis: '1月' },
                                { xAxis: '2月' }
                            ],
                            [
                                { xAxis: '7月' },
                                { xAxis: '8月' }
                            ]
                        ]
                    },
                    smooth: true,  //平滑线条
                    lineStyle: { //线条样式
                        color: 'pink',
                        type: 'dashed' // 可选值还有 dotted solid 虚线  实线 点线
                    },
                    areaStyle: { //填充风格
                        color: 'blue'
                    }
                },
            ]
        }