|
2417
|
1 import debug from "debug";
|
|
|
2 import * as echarts from "echarts";
|
|
|
3 import { css, html, LitElement, PropertyValueMap } from "lit";
|
|
|
4 import { customElement, property } from "lit/decorators.js";
|
|
|
5 debug.enable("*");
|
|
|
6 const log = debug("calibrate");
|
|
|
7
|
|
|
8 @customElement("xy-plot")
|
|
|
9 export class XyPlot extends LitElement {
|
|
|
10 static styles = [
|
|
|
11 css`
|
|
|
12 #chart {
|
|
|
13 width: 800px;
|
|
|
14 height: 300px;
|
|
|
15 }
|
|
|
16 `,
|
|
|
17 ];
|
|
|
18 chart!: echarts.ECharts;
|
|
|
19 @property() label: string = "";
|
|
|
20 @property() data: number[][] = [];
|
|
2419
|
21
|
|
2417
|
22 render() {
|
|
|
23 return html`
|
|
|
24 <fieldset>
|
|
|
25 <legend>${this.label}</legend>
|
|
|
26 <div id="chart"></div>
|
|
|
27 </fieldset>
|
|
|
28 `;
|
|
|
29 }
|
|
|
30
|
|
|
31 protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
|
|
|
32 var chartDom = this.shadowRoot!.getElementById("chart")!;
|
|
|
33 this.chart = echarts.init(chartDom);
|
|
|
34 this.chart.setOption({
|
|
|
35 animation: false,
|
|
|
36 xAxis: {
|
|
|
37 type: "value",
|
|
|
38 },
|
|
|
39 yAxis: {
|
|
|
40 type: "value",
|
|
|
41 },
|
|
|
42 series: [
|
|
|
43 {
|
|
|
44 name: "d",
|
|
|
45 data: [],
|
|
|
46 type: "line",
|
|
|
47 },
|
|
|
48 ],
|
|
|
49 });
|
|
|
50 }
|
|
|
51
|
|
|
52 clear() {
|
|
|
53 this.data.length = 0;
|
|
|
54 }
|
|
2419
|
55
|
|
2417
|
56 insertPoint(x: number, y: number) {
|
|
|
57 this.data.push([x, y]);
|
|
|
58 this.data.sort((a, b) => a[0] - b[0]);
|
|
|
59 this.chart.setOption({ series: [{ name: "d", data: this.data }] });
|
|
|
60 }
|
|
2419
|
61 setXMarklines(lines: { txt: string; x: number }[]) {
|
|
|
62 const markLineData = (row: { txt: string; x: number }, i: number) => ({ name: row.txt, label: { distance: 10*i, formatter: "{b} {c}", color: "#fff", textBorderWidth: 0 }, xAxis: row.x });
|
|
|
63 this.chart.setOption(
|
|
|
64 {
|
|
|
65 series: [
|
|
|
66 {
|
|
|
67 name: "d",
|
|
|
68 markLine: {
|
|
|
69 data: lines.map(markLineData),
|
|
|
70 },
|
|
|
71 },
|
|
|
72 ],
|
|
|
73 } //
|
|
|
74 );
|
|
|
75 }
|
|
2417
|
76 }
|
