2. it技术
  3. Echart实现动态线性图

Echart实现动态线性图

it2023-02-22  82

效果如下图：

效果： 1：选择数据，对把应的数据加载到 线性图。 2：取消选择数据，对应的数据从图表上消失。

代码实现（Vue）

<template> <div style="margin-top :10px;"> <el-row :gutter="20" style="vertical-align:middle;" > <el-col :span="4"><div class="maid-col" style="vertical-align: middle;">{{header.DATE_VAL}}</div></el-col> <el-col :span="3"><div class="maid-col">{{header.MEASURE_MAN}}</div></el-col> <el-col :span="3"><div class="maid-col">{{header.MEAS_STAN}}</div></el-col> <el-col :span="3"><div class="maid-col">{{header.PART_RATE}}</div></el-col> <el-col :span="3"><div class="maid-col">{{header.ALL_RATE}}</div></el-col> <el-col :span="3"><div class="">部位: <el-select v-model="condition.option" style="width:100px;" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div></el-col> <!-- <el-col :span="3"><div class="maid-col"> 标签: </div></el-col> --> <el-col :span="3"><div class=""> <el-button type="primary" round >导出</el-button> </div></el-col> </el-row> <el-divider></el-divider> <el-row > <el-col :span="23"> <transition name="el-zoom-in-top"> <div id="myChart" v-show="charts_cfg.show" class="charts" style="width: 1500px;"></div> </transition> </el-col> </el-row> <el-row :gutter="20" style="vertical-align:middle; " > <el-col > <div class="data"> <el-table :data="rptData.GRID" align="center" :max-height='table_cfg.maxHeight' @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" > </el-table-column> <el-table-column type="index" label="序号" width="50"> </el-table-column> <el-table-column prop="PART_POS" label="部位" width="120"> </el-table-column> <el-table-column prop="POS_ID" label="单点编号" width="120"> </el-table-column> <el-table-column prop="POS_NAME" label="单点名称" width="120"> </el-table-column> <el-table-column prop="RL_VAL" label="R/L" width="80"> </el-table-column> <el-table-column prop="REMARK" label="备注" width="120"> </el-table-column> <el-table-column align="center" label="检规-规格" width="150"> <el-table-column prop="CHECK_SPEC_ADD" label="+" width="50"> </el-table-column> <el-table-column prop="CHECK_SPEC_SUBTRA" label="-" width="50"> </el-table-column> <el-table-column prop="CHECK_JUDGE" label="判定" width="50"> </el-table-column> </el-table-column> <el-table-column align="center" label="内规-规格" width="150"> <el-table-column prop="INNER_SPEC_ADD" label="+" width="50"> </el-table-column> <el-table-column prop="INNER_SPEC_SUBTRA" label="-" width="50"> </el-table-column> <el-table-column prop="INNER_JUDGE" label="判定" width="50"> </el-table-column> </el-table-column> <el-table-column align="center" label="平均值" width="20"> <el-table-column prop="ERR5" label="Err" width="60"> </el-table-column> <el-table-column prop="AVGN" label="N=10" width="100"> </el-table-column> <el-table-column prop="ERRN" label="Err" width="60"> </el-table-column> </el-table-column> <el-table-column align="center" label="上一数据" width="150"> <el-table-column prop="LASTVAL" label="10/13" width="80"> </el-table-column> <el-table-column prop="ERRLAST" label="Err" width="50"> </el-table-column> </el-table-column> <el-table-column prop="AVGN" label="V" width="80"> </el-table-column> <el-table-column prop="CP" label="CP" width="80"> </el-table-column> <el-table-column prop="CPK" label="CPK" width="80"> </el-table-column> <el-table-column label="趋势图" width="120"> </el-table-column> </el-table></div> </el-col> </el-row> </div> </div> </template> <style> .maid-col { height: 20px; padding: 12px 0 0 10px; } .data { /* height: 300px; */ } .charts { width: 100%; height: 300px; } </style> <script> import axios from "axios"; import reportData from "./reportData.json"; export default { name: 'hello', data() { return { myChart: undefined, chartOption: undefined, rptData: reportData, header: {}, options: [{ "value": "左后门", "lable": "左后门" }, { "value": "右后门", "lable": "右后门" }, { "value": "左前门", "lable": "左前门" }, { "value": "右前门", "lable": "右前门" }], condition: { "option": "左前门" }, table_cfg: { maxHeight: 350 }, charts_cfg: { show: false, } } }, mounted() { this.init(); this.drawLine(); }, methods: { init: function() { if (this.rptData.BASIC_INFO.length > 0) { this.header = reportData.BASIC_INFO[0]; }; this.chartOption = { notMerge: true, title: { text: '折线图堆叠' }, // tooltip: { // trigger: 'axis' // }, // legend: { // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] // }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1'] }, yAxis: { type: 'value' }, // series: [{ // name: '', // type: 'line', // // stack: '总量', // data: [120, 132, 101, 134, 90, 230, 210] // }] }; }, drawLine() { //基于准备好的dom， 初始化echarts实例 this.myChart = this.$echarts.init(document.getElementById('myChart')); // 绘制图表 this.myChart.setOption(this.chartOption, true); }, toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; if (val.length > 0) { this.charts_cfg.show = true; this.table_cfg.maxHeight = 350; } else { this.charts_cfg.show = false; this.table_cfg.maxHeight = 750; } var chartData = []; var rptData = this.rptData; val.forEach((a, b, c) => { var iData = rptData.CHARTY.find((it) => { return it.PK == a.PK }); if (iData && iData.YValue[0].data) { var y = { name: a.PK, type: 'line', // stack: '总量', data: [] //[iData.YValue[0].data] }; iData.YValue[0].data.forEach((d, i) => { iData.YValue[0].data.forEach((d, i) => { if (d.y != undefined) { y.data.unshift({ value: d.y, itemStyle: { color: d.marker.fillColor } }); } else { y.data.unshift(d); } }); }); chartData.unshift(y); } }); this.chartOption.series = chartData; this.drawLine(); //this.syncChartData(); } } } </script>

数据JSON

{ "BASIC_INFO": [{ "DATE_VAL": "测量日期：2020-10-13", "MEASURE_MAN": "测量者：石永 侯春玲", "MEAS_STAN": "测量基准：铰链基准", "PART_RATE": "部位合格率：91.1%", "ALL_RATE": "全体合格率：79.6%", "SKETCH_PATH": "http:\/\/172.25.22.11:8888\/HD2\/e7b51932-f932-4b73-abda-96920d25af30.jpg", "PREC_DATE": "10\/13" }], "GRID": [{ "RN": "21", "PK": "7840CE56A2956DF3E0530100007F2F35", "ORDER_NO": "21", "CURVAL": "5.20", "PART_POS": "右前门", "POS_ID": "21", "POS_NAME": "4Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "5.20", "MINN": "4.20", "MAXN": "5.70", "AVGN": "5.27", "SIGMAN": "0.4547", "LASTVAL": "4.20", "CHECK_JUDGE": "OK", "INNER_JUDGE": "", "ERR5": "0", "ERRN": "-0.07", "ERRLAST": "1", "CP": "0.5132", "K": "0.3857", "CPK": "0.3152", "TOTAL_COUNT": "45" }, { "RN": "22", "PK": "7840CE56A2936DF3E0530100007F2F35", "ORDER_NO": "22", "CURVAL": "5.50", "PART_POS": "右前门", "POS_ID": "22", "POS_NAME": "5.3Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "5.38", "MINN": "4.70", "MAXN": "5.90", "AVGN": "5.47", "SIGMAN": "0.3773", "LASTVAL": "4.70", "CHECK_JUDGE": "OK", "INNER_JUDGE": "", "ERR5": "0.12", "ERRN": "0.03", "ERRLAST": "0.80", "CP": "0.6184", "K": "0.6714", "CPK": "0.2032", "TOTAL_COUNT": "45" }, { "RN": "23", "PK": "7840CE56A2916DF3E0530100007F2F35", "ORDER_NO": "23", "CURVAL": "5.60", "PART_POS": "右前门", "POS_ID": "23", "POS_NAME": "6Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "5.50", "MINN": "4.80", "MAXN": "5.90", "AVGN": "5.56", "SIGMAN": "0.3565", "LASTVAL": "4.80", "CHECK_JUDGE": "OK", "INNER_JUDGE": "", "ERR5": "0.10", "ERRN": "0.04", "ERRLAST": "0.80", "CP": "0.6545", "K": "0.80", "CPK": "0.1309", "TOTAL_COUNT": "45" }, { "RN": "24", "PK": "7840CE56A28F6DF3E0530100007F2F35", "ORDER_NO": "24", "CURVAL": "5.70", "PART_POS": "右前门", "POS_ID": "24", "POS_NAME": "6.6Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "5.52", "MINN": "4.80", "MAXN": "6", "AVGN": "5.53", "SIGMAN": "0.4057", "LASTVAL": "4.80", "CHECK_JUDGE": "OK", "INNER_JUDGE": "", "ERR5": "0.18", "ERRN": "0.17", "ERRLAST": "0.90", "CP": "0.5751", "K": "0.7571", "CPK": "0.1397", "TOTAL_COUNT": "45" }, { "RN": "25", "PK": "7840CE56A28D6DF3E0530100007F2F35", "ORDER_NO": "25", "CURVAL": "5.50", "PART_POS": "右前门", "POS_ID": "25", "POS_NAME": "6.75Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "5.50", "MINN": "4.70", "MAXN": "6", "AVGN": "5.51", "SIGMAN": "0.4067", "LASTVAL": "4.70", "CHECK_JUDGE": "OK", "INNER_JUDGE": "", "ERR5": "0", "ERRN": "-0.01", "ERRLAST": "0.80", "CP": "0.5737", "K": "0.7286", "CPK": "0.1557", "TOTAL_COUNT": "45" }, { "RN": "26", "PK": "7840CE56A28B6DF3E0530100007F2F35", "ORDER_NO": "26", "CURVAL": "5.80", "PART_POS": "右前门", "POS_ID": "26", "POS_NAME": "6.85Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "5.64", "MINN": "5", "MAXN": "6.20", "AVGN": "5.68", "SIGMAN": "0.4077", "LASTVAL": "5", "CHECK_JUDGE": "NG", "INNER_JUDGE": "", "ERR5": "0.16", "ERRN": "0.12", "ERRLAST": "0.80", "CP": "0.5723", "K": "0.9714", "CPK": "0.0164", "TOTAL_COUNT": "45" }, { "RN": "27", "PK": "7840CE56A2896DF3E0530100007F2F35", "ORDER_NO": "27", "CURVAL": "5.80", "PART_POS": "右前门", "POS_ID": "27", "POS_NAME": "7Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "5.72", "MINN": "4.90", "MAXN": "6.20", "AVGN": "5.73", "SIGMAN": "0.4057", "LASTVAL": "4.90", "CHECK_JUDGE": "NG", "INNER_JUDGE": "", "ERR5": "0.08", "ERRN": "0.07", "ERRLAST": "0.90", "CP": "0.5751", "K": "1.0429", "CPK": "-0.0246", "TOTAL_COUNT": "45" }, { "RN": "28", "PK": "7840CE56A2876DF3E0530100007F2F35", "ORDER_NO": "28", "CURVAL": "5.70", "PART_POS": "右前门", "POS_ID": "28", "POS_NAME": "棚", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "5.64", "MINN": "5", "MAXN": "6.20", "AVGN": "5.73", "SIGMAN": "0.3945", "LASTVAL": "5", "CHECK_JUDGE": "OK", "INNER_JUDGE": "", "ERR5": "0.06", "ERRN": "-0.03", "ERRLAST": "0.70", "CP": "0.5915", "K": "1.0429", "CPK": "-0.0253", "TOTAL_COUNT": "45" }, { "RN": "29", "PK": "7840CE56A2856DF3E0530100007F2F35", "ORDER_NO": "29", "CURVAL": "4.90", "PART_POS": "右前门", "POS_ID": "29", "POS_NAME": "7.3Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "4.86", "MINN": "4.40", "MAXN": "5.80", "AVGN": "5.02", "SIGMAN": "0.3795", "LASTVAL": "4.40", "CHECK_JUDGE": "OK", "INNER_JUDGE": "", "ERR5": "0.04", "ERRN": "-0.12", "ERRLAST": "0.50", "CP": "0.6148", "K": "0.0286", "CPK": "0.5973", "TOTAL_COUNT": "45" }, { "RN": "30", "PK": "7840CE56A2836DF3E0530100007F2F35", "ORDER_NO": "30", "CURVAL": "4.90", "PART_POS": "右前门", "POS_ID": "30", "POS_NAME": "8Z", "RL_VAL": "RH", "DIRECTION": "X", "REMARK": "L42P右前门", "CHECK_SPEC_ADD": "5.70", "CHECK_SPEC_SUBTRA": "4.30", "INNER_SPEC_ADD": "", "INNER_SPEC_SUBTRA": "", "AVG5": "4.66", "MINN": "4.10", "MAXN": "5.70", "AVGN": "4.85", "SIGMAN": "0.4453", "LASTVAL": "4.10", "CHECK_JUDGE": "OK", "INNER_JUDGE": "", "ERR5": "0.24", "ERRN": "0.05", "ERRLAST": "0.80", "CP": "0.5240", "K": "-0.2143", "CPK": "0.4117", "TOTAL_COUNT": "45" }], "CHARTX": { "X": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"], "XCOMMENT": ["#130：2020-10-13", "#130：2020-09-03", "#130：2020-08-12", "#130：2020-07-21", "#130：2020-05-27", "#130：2020-04-09", "#130：2020-03-27", "#130：2020-01-04", "#130：2019-12-13", "#130：2019-11-08"] }, "CHARTY": [{ "PK": "7840CE56A2636DF3E0530100007F2F35", "YValue": [{ "name": "1", "data": [5.50, 5.70, 4.60, 4.40, 5.10, 5.10, 4.80, 4.80, 4.80, 4.60], "_colorIndex": 0 }] }, { "PK": "7840CE56A2656DF3E0530100007F2F35", "YValue": [{ "name": "2", "data": [5.60, 5.00, 4.40, { "y": 3.70, "marker": { "fillColor": "#FF0000" } }, 4.50, 4.70, 5.00, 4.80, 5.00, { "y": 4.10, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 1 }] }, { "PK": "7840CE56A2676DF3E0530100007F2F35", "YValue": [{ "name": "3", "data": [5.70, 5.10, 4.70, { "y": 3.80, "marker": { "fillColor": "#FF0000" } }, 4.50, 4.90, 5.40, 4.80, 5.00, { "y": 4.00, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 2 }] }, { "PK": "7840CE56A2696DF3E0530100007F2F35", "YValue": [{ "name": "4", "data": [4.90, 5.20, 4.70, { "y": 4.10, "marker": { "fillColor": "#FF0000" } }, 5.10, 5.20, 4.80, 5.20, 5.10, 4.50], "_colorIndex": 3 }] }, { "PK": "7840CE56A26B6DF3E0530100007F2F35", "YValue": [{ "name": "5", "data": [5.00, 5.40, 4.60, { "y": 4.10, "marker": { "fillColor": "#FF0000" } }, 4.90, 5.00, 4.80, 5.10, 5.00, 4.40], "_colorIndex": 4 }] }, { "PK": "7840CE56A26D6DF3E0530100007F2F35", "YValue": [{ "name": "6", "data": [5.00, 5.60, 4.60, { "y": 4.10, "marker": { "fillColor": "#FF0000" } }, 5.00, 4.90, 4.70, 5.10, 5.10, 4.50], "_colorIndex": 5 }] }, { "PK": "7840CE56A26F6DF3E0530100007F2F35", "YValue": [{ "name": "7", "data": [5.20, 5.60, 4.90, 4.40, 5.20, 5.40, 5.10, 5.30, 5.30, 4.70], "_colorIndex": 6 }] }, { "PK": "7840CE56A2716DF3E0530100007F2F35", "YValue": [{ "name": "8", "data": [5.20, 5.60, 4.90, { "y": 4.10, "marker": { "fillColor": "#FF0000" } }, 5.30, 5.30, 5.30, 5.30, 5.40, 4.80], "_colorIndex": 7 }] }, { "PK": "7840CE56A2736DF3E0530100007F2F35", "YValue": [{ "name": "9", "data": [5.20, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 4.90, 4.40, 5.30, 5.50, 5.30, 5.30, 5.20, 4.90], "_colorIndex": 8 }] }, { "PK": "7840CE56A2756DF3E0530100007F2F35", "YValue": [{ "name": "10", "data": [5.20, 5.70, 4.80, 4.30, 5.30, 5.50, 5.30, 5.30, 5.40, 4.80], "_colorIndex": 9 }] }, { "PK": "7840CE56A2776DF3E0530100007F2F35", "YValue": [{ "name": "11", "data": [5.30, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 5.10, 4.50, 5.30, 5.60, 5.40, 5.40, 5.40, 4.90], "_colorIndex": 10 }] }, { "PK": "7840CE56A2796DF3E0530100007F2F35", "YValue": [{ "name": "12", "data": [5.40, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, 5.20, 4.90, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 5.60, 5.50, 5.70, 5.60, 5.10], "_colorIndex": 11 }] }, { "PK": "7840CE56A27B6DF3E0530100007F2F35", "YValue": [{ "name": "34", "data": [{ "y": 6.40, "marker": { "fillColor": "#FF0000" } }, 5.10, { "y": 6.00, "marker": { "fillColor": "#FF0000" } }, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, 5.20, 4.90, 5.40, 5.00, 5.50, 5.30], "_colorIndex": 12 }] }, { "PK": "7840CE56A27D6DF3E0530100007F2F35", "YValue": [{ "name": "33", "data": [5.70, { "y": 4.20, "marker": { "fillColor": "#FF0000" } }, 5.30, 5.50, { "y": 4.20, "marker": { "fillColor": "#FF0000" } }, 4.30, 4.90, 5.00, 4.60, 5.20], "_colorIndex": 13 }] }, { "PK": "7840CE56A27F6DF3E0530100007F2F35", "YValue": [{ "name": "32", "data": [5.50, { "y": 4.10, "marker": { "fillColor": "#FF0000" } }, 5.10, 5.40, { "y": 4.20, "marker": { "fillColor": "#FF0000" } }, 4.60, 5.10, 4.60, 4.70, 5.20], "_colorIndex": 14 }] }, { "PK": "7840CE56A2816DF3E0530100007F2F35", "YValue": [{ "name": "31", "data": [5.20, { "y": 4.00, "marker": { "fillColor": "#FF0000" } }, 4.90, 5.20, 4.30, 4.50, 5.30, 4.80, 4.80, 5.30], "_colorIndex": 15 }] }, { "PK": "7840CE56A2836DF3E0530100007F2F35", "YValue": [{ "name": "30", "data": [4.90, { "y": 4.10, "marker": { "fillColor": "#FF0000" } }, 4.70, 5.10, 4.50, 4.70, 5.70, 4.60, 4.90, 5.30], "_colorIndex": 16 }] }, { "PK": "7840CE56A2856DF3E0530100007F2F35", "YValue": [{ "name": "29", "data": [4.90, 4.40, 4.80, 5.40, 4.80, 5.00, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 4.90, 5.00, 5.20], "_colorIndex": 17 }] }, { "PK": "7840CE56A2876DF3E0530100007F2F35", "YValue": [{ "name": "28", "data": [5.70, 5.00, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, { "y": 6.20, "marker": { "fillColor": "#FF0000" } }, 5.20, 5.60, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, 5.60, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 18 }] }, { "PK": "7840CE56A2896DF3E0530100007F2F35", "YValue": [{ "name": "27", "data": [{ "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 4.90, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, { "y": 6.20, "marker": { "fillColor": "#FF0000" } }, 5.60, 5.60, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, 5.30, 5.70, { "y": 6.00, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 19 }] }, { "PK": "7840CE56A28B6DF3E0530100007F2F35", "YValue": [{ "name": "26", "data": [{ "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 5.00, { "y": 6.00, "marker": { "fillColor": "#FF0000" } }, { "y": 6.20, "marker": { "fillColor": "#FF0000" } }, 5.20, 5.50, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, 5.30, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 20 }] }, { "PK": "7840CE56A28D6DF3E0530100007F2F35", "YValue": [{ "name": "25", "data": [5.50, 4.70, { "y": 6.00, "marker": { "fillColor": "#FF0000" } }, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }, 5.40, 5.40, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 5.00, 5.70, 5.70], "_colorIndex": 21 }] }, { "PK": "7840CE56A28F6DF3E0530100007F2F35", "YValue": [{ "name": "24", "data": [5.70, 4.80, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }, 5.30, 5.20, { "y": 6.00, "marker": { "fillColor": "#FF0000" } }, 5.10, 5.60, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 22 }] }, { "PK": "7840CE56A2916DF3E0530100007F2F35", "YValue": [{ "name": "23", "data": [5.60, 4.80, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 5.40, 5.30, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, 5.30, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 23 }] }, { "PK": "7840CE56A2936DF3E0530100007F2F35", "YValue": [{ "name": "22", "data": [5.50, 4.70, 5.40, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }, 5.40, 5.20, 5.70, 5.20, { "y": 5.90, "marker": { "fillColor": "#FF0000" } }, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 24 }] }, { "PK": "7840CE56A2956DF3E0530100007F2F35", "YValue": [{ "name": "21", "data": [5.20, { "y": 4.20, "marker": { "fillColor": "#FF0000" } }, 5.70, 5.70, 5.20, 5.00, 5.40, 5.10, 5.60, 5.60], "_colorIndex": 25 }] }, { "PK": "7840CE56A2976DF3E0530100007F2F35", "YValue": [{ "name": "20", "data": [5.20, 4.70, 5.50, 5.60, 5.20, 5.00, 5.20, 5.00, 5.50, 5.70], "_colorIndex": 26 }] }, { "PK": "7840CE56A2996DF3E0530100007F2F35", "YValue": [{ "name": "19", "data": [5.10, 4.70, 5.50, 5.70, 5.30, 5.10, 5.00, 5.10, 5.70, 5.70], "_colorIndex": 27 }] }, { "PK": "7840CE56A29B6DF3E0530100007F2F35", "YValue": [{ "name": "18", "data": [5.10, 4.80, 5.50, 5.70, 5.50, 5.20, 5.00, 5.20, 5.70, 5.70], "_colorIndex": 28 }] }, { "PK": "7840CE56A29D6DF3E0530100007F2F35", "YValue": [{ "name": "17", "data": [4.90, 4.60, 5.40, 5.60, 5.60, 5.00, 4.90, 5.10, 5.40, 5.60], "_colorIndex": 29 }] }, { "PK": "7840CE56A29F6DF3E0530100007F2F35", "YValue": [{ "name": "16", "data": [4.90, 4.90, 5.60, 5.40, 5.50, 5.10, 4.90, 5.10, 5.60, { "y": 5.80, "marker": { "fillColor": "#FF0000" } }], "_colorIndex": 30 }] }, { "PK": "7840CE56A2A16DF3E0530100007F2F35", "YValue": [{ "name": "15", "data": [{ "y": 9.90, "marker": { "fillColor": "#FF0000" } }, 5.90, 5.80, 5.40, 5.80, 5.70, 6.00, 5.70, 5.60, 5.80], "_colorIndex": 31 }] }, { "PK": "7840CE56A2A36DF3E0530100007F2F35", "YValue": [{ "name": "14", "data": [5.30, 5.80, 5.50, 5.30, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, 5.50, 5.10, 5.60, 5.40, 5.70], "_colorIndex": 32 }] }, { "PK": "7840CE56A2A56DF3E0530100007F2F35", "YValue": [{ "name": "13", "data": [4.80, { "y": 6.40, "marker": { "fillColor": "#FF0000" } }, 5.80, 5.20, { "y": 6.30, "marker": { "fillColor": "#FF0000" } }, 5.60, 4.60, 5.70, 5.50, 5.90], "_colorIndex": 33 }] }, { "PK": "7840CE56A2A76DF3E0530100007F2F35", "YValue": [{ "name": "35", "data": [5.00, 5.10, 4.60, 4.90, 5.50, 5.30, 4.60, 5.30, 5.40, 5.00], "_colorIndex": 34 }] }, { "PK": "7840CE56A2A96DF3E0530100007F2F35", "YValue": [{ "name": "36", "data": [5.50, 5.20, 5.00, 5.60, 5.40, 5.70, 5.30, 5.30, 5.40, 5.00], "_colorIndex": 35 }] }, { "PK": "7840CE56A2AB6DF3E0530100007F2F35", "YValue": [{ "name": "37", "data": [5.60, 5.40, 4.90, 5.40, 4.80, 5.70, 5.60, 5.70, 5.30, 5.20], "_colorIndex": 36 }] }, { "PK": "7840CE56A2AD6DF3E0530100007F2F35", "YValue": [{ "name": "38", "data": [5.30, 5.40, 4.80, 5.40, 4.60, 5.50, 5.70, 5.50, 5.10, 5.10], "_colorIndex": 37 }] }, { "PK": "7840CE56A2AF6DF3E0530100007F2F35", "YValue": [{ "name": "39", "data": [5.70, 5.50, 5.20, 5.60, 4.70, 5.80, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, 5.70, 5.10, 5.30], "_colorIndex": 38 }] }, { "PK": "7840CE56A2B16DF3E0530100007F2F35", "YValue": [{ "name": "40", "data": [5.70, 5.90, 5.30, { "y": 6.20, "marker": { "fillColor": "#FF0000" } }, 4.80, 6.00, { "y": 6.30, "marker": { "fillColor": "#FF0000" } }, 5.80, 5.30, 5.20], "_colorIndex": 39 }] }, { "PK": "7840CE56A2B36DF3E0530100007F2F35", "YValue": [{ "name": "41", "data": [5.70, 5.90, 5.20, 5.40, 5.00, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, { "y": 6.30, "marker": { "fillColor": "#FF0000" } }, 5.90, 5.20, 4.90], "_colorIndex": 40 }] }, { "PK": "7840CE56A2B56DF3E0530100007F2F35", "YValue": [{ "name": "42", "data": [6.00, { "y": 6.20, "marker": { "fillColor": "#FF0000" } }, 5.50, 5.60, 5.50, { "y": 6.50, "marker": { "fillColor": "#FF0000" } }, { "y": 6.80, "marker": { "fillColor": "#FF0000" } }, { "y": 6.20, "marker": { "fillColor": "#FF0000" } }, 5.40, 5.10], "_colorIndex": 41 }] }, { "PK": "7840CE56A2B76DF3E0530100007F2F35", "YValue": [{ "name": "43", "data": [5.90, { "y": 6.10, "marker": { "fillColor": "#FF0000" } }, 5.50, 5.70, 5.70, { "y": 6.40, "marker": { "fillColor": "#FF0000" } }, { "y": 6.70, "marker": { "fillColor": "#FF0000" } }, { "y": 6.20, "marker": { "fillColor": "#FF0000" } }, 5.40, 4.80], "_colorIndex": 42 }] }, { "PK": "7840CE56A2B96DF3E0530100007F2F35", "YValue": [{ "name": "44", "data": [5.60, 5.70, 5.20, 5.60, 5.80, { "y": 6.30, "marker": { "fillColor": "#FF0000" } }, { "y": 6.60, "marker": { "fillColor": "#FF0000" } }, 5.90, 5.20, 4.70], "_colorIndex": 43 }] }, { "PK": "7840CE56A2BB6DF3E0530100007F2F35", "YValue": [{ "name": "45", "data": [5.70, 5.50, 5.30, 5.40, 5.70, { "y": 6.50, "marker": { "fillColor": "#FF0000" } }, { "y": 7.10, "marker": { "fillColor": "#FF0000" } }, { "y": 6.30, "marker": { "fillColor": "#FF0000" } }, 5.50, 5.20], "_colorIndex": 44 }] }], "COLUMN": [ [ { "field": "PART_POS", "title": "部位", "rowspan": 2, "align": "center" }, { "field": "POS_ID", "title": "单点编号", "rowspan": 2, "align": "center" }, { "field": "POS_NAME", "title": "单点名称", "rowspan": 2, "align": "center" }, { "field": "RL_VAL", "title": "R/L", "rowspan": 2, "align": "center" }, { "field": "REMARK", "title": "备注", "rowspan": 2, "align": "center" }, { "field": "CURVAL", "title": "最新值", "rowspan": 2, "align": "center" }, { "title": "检规-规格", "colspan": 3, "align": "center" }, { "title": "内规-规格", "colspan": 3, "align": "center" }, { "title": "平均值", "colspan": 4, "align": "center" }, { "title": "上一数据", "colspan": 2, "align": "center" }, { "field": "AVGN", "title": "V", "rowspan": 2, "align": "right" }, { "field": "CP", "title": "CP", "rowspan": 2, "align": "right" }, { "field": "CPK", "title": "CPK", "rowspan": 2, "align": "right" }, { "field": "cellChart", "title": "趋势图(N=10)", "rowspan": 2, "width": 120, "height": 30, "align": "center" } ], [{ "field": "CHECK_SPEC_ADD", "title": "+", "align": "right" }, { "field": "CHECK_SPEC_SUBTRA", "title": "-", "align": "right" }, { "field": "CHECK_JUDGE", "title": "判定", "align": "center" }, { "field": "INNER_SPEC_ADD", "title": "+", "align": "right" }, { "field": "INNER_SPEC_SUBTRA", "title": "-", "align": "right" }, { "field": "INNER_JUDGE", "title": "判定", "align": "center" }, { "field": "AVG5", "title": "N=5", "align": "right" }, { "field": "ERR5", "title": "Err", "align": "right" }, { "field": "AVGN", "title": "N=10", "align": "right" }, { "field": "ERRN", "title": "Err", "align": "right" }, { "field": "LASTVAL", "title": "10/13", "align": "right" }, { "field": "ERRLAST", "title": "Err", "align": "right" } ] ] }

关键

drawLine() { //基于准备好的dom， 初始化echarts实例 this.myChart = this.$echarts.init(document.getElementById('myChart')); // 绘制图表 this.myChart.setOption(this.chartOption, true); //这里的第二个参数要设置成false。表示参数不合并，当数据减法时，可以响应到数表。否则，图表的线只增加不减少。 },

以下是从官方文档找到的参数说明。

最新回复(0)