使用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();
            });

效果：