Echarts的折线图

<template>
<div> 
<h2>折线图</h2>
    <div id="canvas4" style="width: 1000px;height:400px;"></div>
</div>

</template>

<script>
export default {
    data() {
        return {
        }
    },
    mounted() {
        //柱状图：
        var mcharts = this.$echarts.init(document.getElementById('canvas4'))
        let xDataArr = ['张三', '李四', '王五', '小明', '小米', '大锤']
        let yDataArr = [10, 20, 30, 40, 50, 60]
        let option = {
            xAxis: {
                // type: 'value',//设置从左向右
                type: 'category',//默认从上到下
                data: xDataArr,
            },
            yAxis: {
                // type: 'category',//设置从左向右
                // data: xDataArr,
                type: 'value',//默认从上到下
            },
            grid: {//为直角坐标系内绘图网格
                // left: "3%",
                // right: "4%",
                // bottom: "3%",
                // width:800,
                // height:400,
                // show:true,
                // containLabel: true,//是否包含坐标轴刻度标签
            },
            toolbox: {//提供了工具栏：导出图片，数据视图，动态类型切换，数据区域缩放，重置
                //都是不用写东西的，除了最后一个图表切换
                feature: {//对图表的扩展设置
                    magicType: {//可以在不同的图表之间来进行切换
                        type: ['bar', 'line'],//图表的类型，柱状图或折线图,可以写多个不同的图表
                    },
                    saveAsImage: {},//可以将图表变成图片并导出
                    dataView: {},//将图表变成视图，并且可以直接修改里面的数据
                    restore: {},//重置按钮，将所有数据回复原状
                    dataZoom: {},//可以对区域进行缩放

                }
            },
            series: [
            {
                name: '语文',
                type: 'bar',
                markPoint: {//设置最大值和最小值
                    data: [
                        // {type:'max',name:'最大值'},{type:'min',name:'最小值'}
                    ],
                },
                markLine: {//设置平均值
                    data: [
                        {type:'average',name:'平均值'}
                    ]
                },
                markArea: {//标注区间,适用于折线图
                    data: [
                        [{xAxis:'张三'},{xAxis:'王五'}],//标注的范围,开始,结束
                        [{xAxis:'小明'},{xAxis:'小米'}],
                    ]
                },

                label: {//对每条数据的显示设置
                    show: true,//显示每一条的数据
                    rotate: 60,//显示数据文字倾斜角度
                    position: 'top',//标签的位置，通过相对的百分比或像素值表示，例：[x,y],或[10,20],[50% ,50%],也可以inside（默认），top(顶部)等
                },
                barWidth: '30%',//设置每条数据的宽度
                data: yDataArr,
                itemStyle: {
                    color: {
                        type: 'linear',//线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            //只能从0到1
                            {
                                offset: 0, color: 'red',//颜色为0时是红色，也可以设置百分比和小数
                            },
                            {
                                offset: 1, color: 'blue',//颜色为1时是蓝色，也可以设置百分比
                            },
                           
                        ]
                    }
                }
            },

            ],
        }
        mcharts.setOption(option)
    }
}
</script>

<style scoped>
#canvas4 {
    margin-top: 50px;
}
</style>

添加加载动画和自适应大小的折线图

<template>
    <div>
        <h2>折线图效果</h2>
        <div id="canvas1"></div>
    </div>
</template>

<script>
//自适应的话不能设置宽，但要设置高
export default {
    data() {
        return {

        }
    },
    mounted() {
        let mcharts = this.$echarts.init(document.getElementById('canvas1'))
        mcharts.showLoading() //显示加载动画
        //获取数据后再隐藏
        mcharts.hideLoading() //隐藏加载动画
        let option = {
            title: {
                text: '折线图效果',
                link: '',
                textStyle: { color: 'red', fontSize: 16 },
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['大锤', '小美', '叫兽', '小米', '小黑', '枫溪', '无限']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '语文',
                    type: 'line',
                    data: [96, 89, 70, 95, 50, 20, 60],
                    smooth: true,//平滑
                    areaStyle: {},//填充,可以在里面设置颜色样式
                },
            ]
        }
        mcharts.setOption(option)
        //监听windom窗口大小变化事件
        window.onresize = function(){
            //调用echarts实例对象的resize方法
            mcharts.resize()
        }
        //也可以写：window.onresize = mcharts.resize //注意不能加括号
    },
}
</script>

<style scoped>
#canvas1 {
    /* width: 1000px; */
    height: 400px;
}
</style>