<template> <div> <!-- 方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布 --> <el-row :gutter="20" style="margin-bottom: 20px;"> <el-col :span="24"> <el-card shadow="always"> <el-input v-model="query.deviceId" placeholder="请输入设备编号" style="width:250px;" clearable></el-input> <el-button icon="el-icon-search" @click="getDevMeterHistoryData()">查询</el-button> <div id="myChart" style="{width:1000px; height:500px;}"></div> </el-card> </el-col> </el-row> </div> </template> <script> import { fetchGet } from "@/assets/js/api"; export default { name: "dashboard", data() { return { query: { deviceId: "884A1882E80A", fields: "", }, myChart: "", option: [], minData: 0, data_totalVoltage: [], data_electricCurrentData: [], data_activePower: [], data_powerFactor: [], data_frequency: [], data_energy: [], }; }, mounted() { this.initChart(); this.getDevMeterHistoryData(); this.getLegendSelectChanged(); }, methods: { initChart() { //echarts.init(document.getElementById("myChart")).dispose(); //销毁前一个echarts实例 //获取容器元素,初始化echarts实例 this.myChart = this.$echarts.init(document.getElementById("myChart")); this.option = { title: { text: "" }, tooltip: { trigger: "axis", textStyle: { align: "left" }, }, toolBox: { show: true, feature: { dataView:{show: true}, dataZoom:{show: true},//数据缩放视图 magicType:{type :['line','bar']}, restore:{show: true}, saveAsImage: { show: true } }, }, xAxis: { data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"], splitLine: { show: false }, //去除网格分割线（默认false） splitArea: { show: false }, //保留网格区域 axisLine: { lineStyle: { //坐标线 type: "solid", //color: '#d8d8d8',//轴的颜 色 width: "1", //坐标线宽度 }, }, axisTick: { show: false, //x轴初始化不显示 }, }, yAxis: { name: "", //y轴的名称（单位） //max: '241.0',//y轴最大刻度 min: 0, //y轴最小刻度 type: "value", axisLine: { show: false, }, }, legend: { //itemWidth: 34, //图例 //itemHeight: 14, align: "left", data: [ "电压", "电流", "有功功率", "频率", "功率因数", "用电量"], }, series: [ { name: "电压", type: "line", data: [], , smooth: true }, //smooth 是否平滑 也可以设置为 0到1 的值，表示平滑程度 { name: "电流", type: "line", data: [] }, { name: "有功功率", type: "line", data: [] }, { name: "频率", type: "line", data: [] }, { name: "功率因数", type: "line", data: [] }, { name: "用电量", type: "line", data: [] }, ], }; //重绘, 设置option window.addEventListener("resize", this.myChart.resize()); this.myChart.setOption(this.option); this.getLegendSelectChanged(); }, getDevMeterHistoryData() { fetchGet("getDevMeterHistoryData", { deviceId: this.query.deviceId, pageNo: 1, pageSize: 15, }).then((rsp) => { if (rsp.code == 0) { this.setChartData(rsp.data); } }); }, //设置图表实体数据 setChartData(rspData) { let opt = this.option; opt.xAxis.data = rspData.xAxisData; opt.legend.data = []; opt.series = []; // for (var i = 0; i < rspData.data.length; i++) { let vo = rspData.data[i]; if (rspData.size == 1) { opt.yAxis.name = vo.unit; opt.yAxis.min = vo.minData; } opt.legend.data.push(vo.name); // // 给一个对象中增加属性markPoint var markPoint = {data: [{type: 'max', name: '最大值'}]} this.$set(vo, 'markPoint', markPoint) console.log(vo) opt.series.push(vo); } this.myChart.setOption(opt); }, getLegendSelectChanged() { let opt = this.option; this.myChart.on("legendselectchanged", function (param) { var keys = Object.keys(param.selected); var values = Object.values(param.selected); // console.log(param.name); // if (keys == null || keys.length == 0 || opt.series == null) { return; } for (var i = 0; i < opt.series.length; i++) { if (param.name != keys[i]) { //根据点击的参数，如果只有一个数据展示，则动态设置y轴的最小参考数值（未处理） //this.minData = opt.series[i].minData; //console.log(opt.series[i]); } else { //console.log("1 minData:" + this.minData +", series minData:" + opt.series[i].minData); this.minData = opt.series[i].minData; console.log("2 minData:" + this.minData + ", series minData:" + opt.series[i].minData);// } } }); this.myChart.setOption(opt); } }, }; </script>//给一个对象中增加属性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], //位置偏移 }, ] },