每日总结
今天的内容：
学习Echarts的折线图。
主要是将series中的type设为line
代码示例（数据有点长）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>折线图学习</title> <script src="./JS/Echarts/echarts.min.js"></script> </head> <body> <div style="width: 1400px; height: 400px;"></div> <script> var mCharts = echarts.init(document.querySelector('div')); var mdata = { "min": [ ["2020/7/8", "7098"], ["2020/7/9", "6765.43"], ["2020/7/10", "6989.26"], ["2020/7/11", "5884.24"], ["2020/7/12", "5211.94"], ["2020/7/13", "6727.19"], ["2020/7/14", "6280.86"], ["2020/7/15", "6561.56"], ["2020/7/16", "6174.58"], ["2020/7/17", "6635.3"], ["2020/7/18", "5492.75"], ["2020/7/19", "5628.38"], ["2020/7/20", "6392.05"], ["2020/7/21", "6380.17"], ["2020/7/22", "6116.01"], ["2020/7/23", "6669.12"], ["2020/7/24", "6353.32"], ["2020/7/25", "5273.96"], ["2020/7/26", "5132.97"], ["2020/7/27", "6056.64"], ["2020/7/28", "5812.33"], ["2020/7/29", "6180.82"], ["2020/7/30", "6202.2"], ["2020/7/31", "6510.54"], ["2020/8/1", "5467.84"], ["2020/8/2", "4845.24"], ["2020/8/3", "6401.87"], ["2020/8/4", "5990.96"], ["2020/8/5", "6302.57"], ["2020/8/6", "5942.96"], ["2020/8/7", "6428.2"], ["2020/8/8", "5307.81"], ["2020/8/9", "5463.63"], ["2020/8/10", "6245.8"], ["2020/8/11", "6250.96"], ["2020/8/12", "6002.59"], ["2020/8/13", "6570.37"], ["2020/8/14", "6268.26"], ["2020/8/15", "5201.73"], ["2020/8/16", "5072.78"] ], "data": [ ["2020/4/1", "3763"], ["2020/4/2", "3835"], ["2020/4/3", "4032"], ["2020/4/4", "2740"], ["2020/4/5", "2481"], ["2020/4/6", "3211"], ["2020/4/7", "4529"], ["2020/4/8", "4447"], ["2020/4/9", "4526"], ["2020/4/10", "4601"], ["2020/4/11", "3711"], ["2020/4/12", "3827"], ["2020/4/13", "4955"], ["2020/4/14", "4906"], ["2020/4/15", "4845"], ["2020/4/16", "4831"], ["2020/4/17", "5076"], ["2020/4/18", "3744"], ["2020/4/19", "3760"], ["2020/4/20", "5044"], ["2020/4/21", "4714"], ["2020/4/22", "4699"], ["2020/4/23", "4749"], ["2020/4/24", "5396"], ["2020/4/25", "4169"], ["2020/4/26", "5162"], ["2020/4/27", "5534"], ["2020/4/28", "5607"], ["2020/4/29", "5473"], ["2020/4/30", "6191"], ["2020/5/1", "5018"], ["2020/5/2", "5153"], ["2020/5/3", "5053"], ["2020/5/4", "4743"], ["2020/5/5", "4668"], ["2020/5/6", "5866"], ["2020/5/7", "5933"], ["2020/5/8", "6065"], ["2020/5/9", "6225"], ["2020/5/10", "4625"], ["2020/5/11", "6012"], ["2020/5/12", "6202"], ["2020/5/13", "6297"], ["2020/5/14", "6162"], ["2020/5/15", "6908"], ["2020/5/16", "5542"], ["2020/5/17", "5196"], ["2020/5/18", "6523"], ["2020/5/19", "6388"], ["2020/5/20", "6842"], ["2020/5/21", "6411"], ["2020/5/22", "6894"], ["2020/5/23", "5396"], ["2020/5/24", "4969"], ["2020/5/25", "6525"], ["2020/5/26", "6665"], ["2020/5/27", "6696"], ["2020/5/28", "6750"], ["2020/5/29", "7379"], ["2020/5/30", "5753"], ["2020/5/31", "5258"], ["2020/6/1", "7463"], ["2020/6/2", "6305"], ["2020/6/3", "7021"], ["2020/6/4", "6995"], ["2020/6/5", "6942"], ["2020/6/6", "6379"], ["2020/6/7", "5090"], ["2020/6/8", "6918"], ["2020/6/9", "7103"], ["2020/6/10", "6892"], ["2020/6/11", "7434"], ["2020/6/12", "7640"], ["2020/6/13", "6132"], ["2020/6/14", "5954"], ["2020/6/15", "7461"], ["2020/6/16", "6981"], ["2020/6/17", "6889"], ["2020/6/18", "7139"], ["2020/6/19", "7726"], ["2020/6/20", "6015"], ["2020/6/21", "5717"], ["2020/6/22", "7036"], ["2020/6/23", "7126"], ["2020/6/24", "8457"], ["2020/6/25", "6027"], ["2020/6/26", "5575"], ["2020/6/27", "5261"], ["2020/6/28", "7367"], ["2020/6/29", "7521"], ["2020/6/30", "7154"], ["2020/7/1", "3648"], ["2020/7/2", "5654"], ["2020/7/3", "6488"], ["2020/7/4", "5226"], ["2020/7/5", "5041"], ["2020/7/6", "6931"], ["2020/7/7", "6461"], ["2020/7/8", "7098"], ["2020/7/9", "6873"], ["2020/7/10", "7644"], ["2020/7/11", "6292"], ["2020/7/12", "6224"], ["2020/7/13", "7524"], ["2020/7/14", "7630"], ["2020/7/15", "7494"], ["2020/7/16", "7477"] ], "max": [ ["2020/7/8", "7098"], ["2020/7/9", "7561.73"], ["2020/7/10", "8026.33"], ["2020/7/11", "7116.3"], ["2020/7/12", "6612.47"], ["2020/7/13", "8278.34"], ["2020/7/14", "7969.56"], ["2020/7/15", "8377.71"], ["2020/7/16", "8110.08"], ["2020/7/17", "8683.47"], ["2020/7/18", "7647.95"], ["2020/7/19", "7885.79"], ["2020/7/20", "8747.46"], ["2020/7/21", "8829.88"], ["2020/7/22", "8656.73"], ["2020/7/23", "9297.91"], ["2020/7/24", "9067.51"], ["2020/7/25", "8071.15"], ["2020/7/26", "8010.95"], ["2020/7/27", "9013.39"], ["2020/7/28", "8845.97"], ["2020/7/29", "9289.64"], ["2020/7/30", "9399.42"], ["2020/7/31", "9779.51"], ["2020/8/1", "8807.17"], ["2020/8/2", "8253.63"], ["2020/8/3", "9878.12"], ["2020/8/4", "9533.92"], ["2020/8/5", "9911.16"], ["2020/8/6", "9616.16"], ["2020/8/7", "10165.03"], ["2020/8/8", "9107.35"], ["2020/8/9", "9325"], ["2020/8/10", "10168.17"], ["2020/8/11", "10233.54"], ["2020/8/12", "10044.61"], ["2020/8/13", "10671.11"], ["2020/8/14", "10427.02"], ["2020/8/15", "9417.85"], ["2020/8/16", "9345.6"] ], "model": [ ["2020/7/8", "7098"], ["2020/7/9", "7163.578925"], ["2020/7/10", "7507.794384"], ["2020/7/11", "6500.271169"], ["2020/7/12", "5912.204873"], ["2020/7/13", "7502.763253"], ["2020/7/14", "7125.209753"], ["2020/7/15", "7469.632771"], ["2020/7/16", "7142.330655"], ["2020/7/17", "7659.385342"], ["2020/7/18", "6570.350439"], ["2020/7/19", "6757.08334"], ["2020/7/20", "7569.754467"], ["2020/7/21", "7605.023759"], ["2020/7/22", "7386.372711"], ["2020/7/23", "7983.514128"], ["2020/7/24", "7710.414369"], ["2020/7/25", "6672.559685"], ["2020/7/26", "6571.956018"], ["2020/7/27", "7535.013224"], ["2020/7/28", "7329.146382"], ["2020/7/29", "7735.230053"], ["2020/7/30", "7800.808978"], ["2020/7/31", "8145.024436"], ["2020/8/1", "7137.501221"], ["2020/8/2", "6549.434926"], ["2020/8/3", "8139.993305"], ["2020/8/4", "7762.439806"], ["2020/8/5", "8106.862824"], ["2020/8/6", "7779.560708"], ["2020/8/7", "8296.615394"], ["2020/8/8", "7207.580491"], ["2020/8/9", "7394.313393"], ["2020/8/10", "8206.984519"], ["2020/8/11", "8242.253811"], ["2020/8/12", "8023.602764"], ["2020/8/13", "8620.74418"], ["2020/8/14", "8347.644421"], ["2020/8/15", "7309.789737"], ["2020/8/16", "7209.18607"] ] }; console.log(mdata); var option = { dataZoom: { show: true, }, toolbox: { feature: { dataZoom: {}, } }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, }, // 边框的设置,控制直角坐标系的布局和大小, // x轴和y轴都是再grid的基础上进行绘制的,一个grid中最多有两种位置的x轴和y轴 grid: { show: true, borderWidth: 2, borderColor: 'red', // 间距 // left: 100, // top: 20, // 设置宽度 // width: 300, // 设置长度 // height: 30, }, xAxis: { // 紧挨边缘(紧挨y轴) boundaryGap: false, type: 'category', //类目轴,必须通过data设置 // data: [], // 显示位置,position,x轴可以取值为top,bottom. // position: 'top', }, yAxis: { // 设置y轴的开始值为给出值的最小值,脱离o值比例 scale: true, type: 'value', //数值轴,自动从目标数据中读取数据 position: 'right', //显示位置,position,y轴可以取值为left,right. }, series: [{ type: 'line', data: mdata.data, type: 'line', }, { type: 'line', data: mdata.model }, { type: 'line', data: mdata.max }, { type: 'line', data: mdata.min }] } mCharts.setOption(option); </script> </body> </html>
运行实例：
遇到的问题：同一张图中显示多条折线图。
解决方案：option中的series是一个对象数组。依照series中第一个元素继续添加并将新的元素的data修改成预期的数据。
明天的打算：
学习Echarts的地图绘制
浙公网安备 33010602011771号