Skip to content

Commit

Permalink
ft Migrate echarts for visual editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitPinchuk
vitPinchuk committed Feb 7, 2024
1 parent 81fac77 commit 31f42f7
Show file tree
Hide file tree
Showing 4 changed files with 608 additions and 16 deletions.
159 changes: 157 additions & 2 deletions echarts.volkovlabs.io/bar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,18 +62,72 @@
"height": 600
},
"editorMode": "code",
"visualEditor": {
"dataset": [
{
"name": "Category",
"source": "A"
},
{
"name": "Value",
"source": "A"
}
],
"series": [
{
"uid": "f86dc46d-1364-4d2b-8d5f-834633903124",
"id": "A",
"name": "Bar",
"type": "bar"
}
],
"code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n // min: 'dataMin',\n },\n}\n",
"codeHeight": 600
},
"themeEditor": {
"name": "default",
"height": 400,
"config": "{}"
},
"gaode": {
"key": "",
"plugin": "AMap.Scale,AMap.ToolBar"
},
"getOption": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }\n ]\n};",
"getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n xAxis: {\n type: 'category',\n data: categories\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: values,\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }\n ]\n};",
"google": {
"callback": "gmapReady",
"key": ""
},
"map": "json",
"renderer": "canvas"
},
"targets": [
{
"datasource": {
"type": "marcusolsson-static-datasource",
"uid": "4ytGZmF4k"
},
"refId": "A",
"frame": {
"fields": [
{
"name": "Category",
"type": "string",
"config": {},
"values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
{
"name": "Value",
"type": "string",
"config": {},
"values": ["120", "200", "150", "80", "70", "110", "130"]
}
],
"meta": {},
"name": "Bar"
}
}
],
"title": "Bar with Background",
"type": "volkovlabs-echarts-panel"
},
Expand Down Expand Up @@ -140,14 +194,63 @@
"key": "",
"plugin": "AMap.Scale,AMap.ToolBar"
},
"getOption": "return {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n top: '4%',\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n axisTick: {\n alignWithLabel: true\n }\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Direct',\n type: 'bar',\n barWidth: '60%',\n data: [10, 52, 200, 334, 390, 330, 220]\n }\n ]\n};",
"visualEditor": {
"dataset": [
{
"name": "Category",
"source": "A"
},
{
"name": "Value",
"source": "A"
}
],
"series": [
{
"uid": "483a05db-596a-46d2-9566-6242ff0e30e4",
"id": "A",
"name": "Bar",
"type": "bar"
}
],
"code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category'\n },\n yAxis: {\n type: 'value'\n },\n}\n",
"codeHeight": 600
},
"getOption": "data.series.map((s) => {\n categories = s.fields.find((f) => f.name === 'Category').values;\n values = s.fields.find((f) => f.name === 'Value').values;\n});\n\nreturn {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n grid: {\n top: '4%',\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n }\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Direct',\n type: 'bar',\n barWidth: '60%',\n data: values\n }\n ]\n};",
"google": {
"callback": "gmapReady",
"key": ""
},
"map": "json",
"renderer": "canvas"
},
"targets": [
{
"datasource": {
"type": "marcusolsson-static-datasource",
"uid": "4ytGZmF4k"
},
"refId": "A",
"frame": {
"fields": [
{
"name": "Category",
"type": "string",
"config": {},
"values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
{
"name": "Value",
"type": "string",
"config": {},
"values": ["10", "52", "200", "334", "390", "330", "220"]
}
],
"meta": {},
"name": "Bar"
}
}
],
"title": "Axis Align with Tick",
"type": "volkovlabs-echarts-panel"
},
Expand Down Expand Up @@ -357,6 +460,25 @@
"format": "auto",
"height": 600
},
"visualEditor": {
"dataset": [
{
"name": "Name",
"source": "A"
},
{
"name": "2011",
"source": "A"
},
{
"name": "2012",
"source": "A"
}
],
"series": [],
"code": "return {\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n legend: {},\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n dataset: {\n dimensions: ['Name', '2011', '2012'],\n source: context.editor.dataset.source\n },\n xAxis: { boundaryGap: [0, 0.01]},\n yAxis: { boundaryGap: [0, 0.01], type: 'category' },\n series: [{ type: 'bar' }, { type: 'bar' }]\n}\n",
"codeHeight": 600
},
"editorMode": "code",
"gaode": {
"key": "",
Expand All @@ -370,6 +492,39 @@
"map": "json",
"renderer": "canvas"
},
"targets": [
{
"datasource": {
"type": "marcusolsson-static-datasource",
"uid": "4ytGZmF4k"
},
"refId": "A",
"frame": {
"fields": [
{
"name": "Name",
"type": "string",
"config": {},
"values": ["Brazil", "Indonezia", "USA", "India", "China", "World"]
},
{
"name": "2011",
"type": "string",
"config": {},
"values": ["18203", "19325", "29034", "104970", "131744", "630230"]
},
{
"name": "2012",
"type": "string",
"config": {},
"values": ["23489", "23438", "31000", "121594", "134141", "681807"]
}
],
"meta": {},
"name": "Bars"
}
}
],
"title": "World Population",
"type": "volkovlabs-echarts-panel"
},
Expand Down
32 changes: 32 additions & 0 deletions echarts.volkovlabs.io/gauge.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,17 @@
"key": "",
"plugin": "AMap.Scale,AMap.ToolBar"
},
"visualEditor": {
"dataset": [
{
"name": "value",
"source": "A"
}
],
"series": [],
"code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 30,\n color: [\n [0.3, '#67e0e3'],\n [0.7, '#37a2da'],\n [1, '#fd666d']\n ]\n }\n },\n pointer: {\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n distance: -30,\n length: 8,\n lineStyle: {\n color: '#fff',\n width: 2\n }\n },\n splitLine: {\n distance: -30,\n length: 30,\n lineStyle: {\n color: '#fff',\n width: 4\n }\n },\n axisLabel: {\n color: 'auto',\n distance: 40,\n fontSize: 20\n },\n detail: {\n valueAnimation: true,\n formatter: '{value} km/h',\n color: 'auto'\n },\n }\n ]\n}\n",
"codeHeight": 600
},
"getOption": "return {\n series: [\n {\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 30,\n color: [\n [0.3, '#67e0e3'],\n [0.7, '#37a2da'],\n [1, '#fd666d']\n ]\n }\n },\n pointer: {\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n distance: -30,\n length: 8,\n lineStyle: {\n color: '#fff',\n width: 2\n }\n },\n splitLine: {\n distance: -30,\n length: 30,\n lineStyle: {\n color: '#fff',\n width: 4\n }\n },\n axisLabel: {\n color: 'auto',\n distance: 40,\n fontSize: 20\n },\n detail: {\n valueAnimation: true,\n formatter: '{value} km/h',\n color: 'auto'\n },\n data: [\n {\n value: 70\n }\n ]\n }\n ]\n};\n\nsetInterval(function () {\n echartsInstance.setOption({\n series: [\n {\n data: [\n {\n value: +(Math.random() * 100).toFixed(2)\n }\n ]\n }\n ]\n });\n}, 2000);",
"google": {
"callback": "gmapReady",
Expand All @@ -222,6 +233,27 @@
"map": "json",
"renderer": "canvas"
},
"targets": [
{
"datasource": {
"type": "marcusolsson-static-datasource",
"uid": "4ytGZmF4k"
},
"refId": "A",
"frame": {
"fields": [
{
"name": "value",
"type": "string",
"config": {},
"values": ["75"]
}
],
"meta": {},
"name": "Speed"
}
}
],
"title": "Stage Speed Gauge",
"type": "volkovlabs-echarts-panel"
},
Expand Down
Loading

0 comments on commit 31f42f7

Please sign in to comment.