vue 使用echarts绘制折线图

使用$set 给一个对象中增加属性

//给一个对象中增加属性markPoint var markPoint = {data: [{type: 'max', name: '最大值'}]} this.$set(vo, 'markPoint', markPoint) console.log(vo) opt.series.push(vo);

接口实体参数

{     "result":"SUCCESS",     "code":"0",     "msg":"ok",     "data":{         "xAxisData":["17:46:20","17:46:40","17:46:50","17:47:00","17:47:10","17:47:20","17:47:40", "17:47:50","17:48:00","17:48:10","17:48:20","17:48:30","17:48:50","17:49:00","17:49:10"],         "data":[{                 "field":"voltage",                 "id":"voltage",                 "name":"电压",                 "unit":"V",                 "minData":240,                 "type":"line",                 "data":[236.71,236.7,236.82,236.62,236.75,236.58,236.6,236.53,236.68,236.52,236.65,236.44,236.95,236.84,236.81]             },{                 "field":"electricCurrent",                 "id":"electricCurrent",                 "name":"电流",                 "unit":"mA",                 "minData":5,                 "type":"line",                 "data":[0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002,0.002]             },{                 "field":"activePower",                 "id":"activePower",                 "name":"有功功率",                 "unit":"KW",                 "minData":0,                 "type":"line",                 "data":[0.537,0.534,0.53,0.531,0.53,0.529,0.533, 0.527,0.525, 0.537,0.532,0.535,0.526, 0.53,0.528]             },{                 "field":"frequency",                 "id":"frequency",                 "name":"频率",                 "unit":"Hz",                 "minData":51,                 "type":"line",                 "data":[49.9,49.92,49.94,49.92,49.88,49.88,49.88,49.88,49.82,49.9,49.9,49.88,49.92,49.96,49.9]             },{                 "field":"powerFactor",                 "id":"powerFactor",                 "name":"功率因数",                 "unit":"λ",                 "minData":0,                 "type":"line",                 "data":[0.88,0.87,0.87,0.86,0.87,0.87,0.87,0.86,0.87,0.88,0.87,0.87,0.86,0.87,0.88 ]             },{                 "field":"energy",                 "id":"energy",                 "name":"用电量",                 "unit":"千瓦·时(度)",                 "minData":0,                 "type":"line",                 "data":[1.784, 1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784,1.784]             }         ]     } }

参考资料

vue中绘制echarts折线图
https://www.cnblogs.com/yanl55555/p/12544109.html

echarts 改变折线图曲线颜色、区域颜色
https://www.cnblogs.com/justyouadmin/p/11421680.html

echarts中设置markPoint
https://www.cnblogs.com/aixuexi-504682107/p/13575733.html

markPoint: {     data: [         {             type: "max",             name: "最大值",             color: "pink",             itemStyle: {                 color: "rgba(115, 159, 250, .5)"                 },                 symbol: "rect",                 symbolSize: [25, 25], // 容器大小                 symbolOffset: [0, -15], //位置偏移         },         {                 type: "min",                 name: "最小值",                 color: "rgba(255, 148, 77, 1)",                 itemStyle: {                     color: "rgba(255, 148, 77, .5)"                     },                     symbol: "rect",                     symbolSize: [25, 25], // 容器大小                     symbolOffset: [0, -15], //位置偏移         },     ] },