使用echarts进行画图

首先，先下载两个文件：echarts.min.js和jquery.ba-resize.js

然后定义父窗口大小：

<div class="bottom-tb" v-show="!ChartSelect">
                        <div id="main-graph" style="width:900px;height:calc(59vh - 60px);line-height: calc(49vh - 60px);position: relative;left: calc(10%);top: 0;"></div>
                    </div>

然后填充内容：

var NewPortrayGraph = echarts.init(document.getElementById("main-graph"));
            option = {
                tooltip: {
                    trigger: 'axis',  // 使用x轴为标签
                    formatter: function (params) {
                        console.log(params)
                        // 定义函数
                        var color = '#cccccc';//图例颜色
                        var htmlStr = '<div>';
                        htmlStr += params[0].name + '训练记录:<br/>';//x轴的名称
                        //为了保证和原来的效果一样，这里自己实现了一个点的效果
                        htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
                        //添加一个汉字，这里你可以格式你的数字或者自定义文本内容
                        htmlStr += params[0].seriesName + '：' + params[0].value + '<br/>';
                        htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
                        htmlStr += params[1].seriesName + '：' + params[1].value;
                        htmlStr += '</div>';
                        return htmlStr;
                    },
                    padding:40,  // 调整内边距(使方框看起来更大)
                },
                grid: {
                    // 设置大小
                    top: 100,
                    left: 50,
                    right: 50,
                    bottom:100,
                    containLabel: true
                },
                xAxis: {
                    name: '日期',
                    type: 'category',
                    boundaryGap: true,  // 是否不沾满
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']，
                    // 修改x轴标题颜色
                    nameTextStyle: {
                        color: '#666666'
                    },
                    // 修改x轴单位的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#999999'
                        }
                    }
                },
                yAxis: {
                    name: '积分',
                    type: 'value',
                    axisLine: {
                        show:false,  // 去掉y轴显示的线
                    },
                    // 修改x轴标题颜色
                    nameTextStyle: {
                        color: '#666666'
                    },
                    // 修改x轴单位的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#999999'
                        }
                    }
                    axisTick: {
                        show: false,  // 去掉y轴显示的线
                    }
                },
                series: [
                    {
                        name: '过关积分',
                        type: 'line',
                        symbolSize: 5,
                        smooth: true,
                        lineStyle: {
                            color: '#33cc99'  // 设置线条色
                        },
                        areaStyle: {
　　　　　　　　　　　　　　　　// 设置渐变色(没有显示在效果图)
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                                    offset: 0, color: '#33cc99' // 0% 处的颜色
                                }, {
                                    offset: 0.4, color: '#33cc99' // 100% 处的颜色
                                }, {
                                    offset: 1, color: '#fff' // 100% 处的颜色
                                }
                            ]),
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '训练用时',
                        type: 'line',
                        symbolSize: 0,  // 设置点大小
                        showSymbol: false,  // 不显示点
                        lineStyle: {
                            width: 0,  // 设置线的宽度
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    }
                ]
            };
            NewPortrayGraph.setOption(option);
            // 自动调整大小
            $(".main-graph").resize(function () {
                NewPortrayGraph.resize();
            });

效果：