From af63b010317619854d8c2ead1aaecc7abd61b20a Mon Sep 17 00:00:00 2001 From: Mikhail Volkov Date: Thu, 8 Feb 2024 23:00:24 -0500 Subject: [PATCH] Update Bar dashboard --- echarts.volkovlabs.io/bar.json | 310 ++++++++++++++++++++++++--------- 1 file changed, 229 insertions(+), 81 deletions(-) diff --git a/echarts.volkovlabs.io/bar.json b/echarts.volkovlabs.io/bar.json index 80b4962..1a7f12f 100644 --- a/echarts.volkovlabs.io/bar.json +++ b/echarts.volkovlabs.io/bar.json @@ -45,6 +45,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -61,8 +62,26 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", + "gaode": { + "key": "", + "plugin": "AMap.Scale,AMap.ToolBar" + }, + "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", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n },\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n}\n", + "codeHeight": 600, "dataset": [ { "name": "Category", @@ -75,57 +94,40 @@ ], "series": [ { - "uid": "f86dc46d-1364-4d2b-8d5f-834633903124", "id": "A", "name": "Bar", - "type": "bar" + "type": "bar", + "uid": "f86dc46d-1364-4d2b-8d5f-834633903124" } - ], - "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": "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" + ] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Category", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [120, 200, 150, 80, 70, 110, 130] } ], "meta": {}, "name": "Bar" - } + }, + "refId": "A" } ], "title": "Bar with Background", @@ -163,8 +165,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Basic Bar", "type": "volkovlabs-echarts-panel" }, @@ -173,6 +187,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -189,12 +204,26 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, + "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", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category'\n },\n yAxis: {\n type: 'value'\n },\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}\n", + "codeHeight": 600, "dataset": [ { "name": "Category", @@ -207,48 +236,40 @@ ], "series": [ { - "uid": "483a05db-596a-46d2-9566-6242ff0e30e4", - "id": "A", + "id": "Bar", "name": "Bar", - "type": "bar" + "type": "bar", + "uid": "4fb6e263-71e4-46ce-ae33-8dedb8dc077e" } - ], - "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" + ] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Category", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [120, 52, 200, 334, 390, 330, 220] } ], "meta": {}, "name": "Bar" - } + }, + "refId": "A" } ], "title": "Axis Align with Tick", @@ -286,8 +307,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Set Style of Single Bar", "type": "volkovlabs-echarts-panel" }, @@ -323,8 +356,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Waterfall Chart", "type": "volkovlabs-echarts-panel" }, @@ -360,8 +405,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Bar Chart with Negative Value", "type": "volkovlabs-echarts-panel" }, @@ -397,8 +454,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Radial Polar Bar Label Position (middle)", "type": "volkovlabs-echarts-panel" }, @@ -434,8 +503,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Tangential Polar Bar Label Position (middle)", "type": "volkovlabs-echarts-panel" }, @@ -444,6 +525,7 @@ "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, + "description": "Visual Editor with Data Source", "gridPos": { "h": 12, "w": 12, @@ -460,7 +542,26 @@ "format": "auto", "height": 600 }, + "editorMode": "visual", + "gaode": { + "key": "", + "plugin": "AMap.Scale,AMap.ToolBar" + }, + "getOption": "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 xAxis: {\n type: 'value',\n boundaryGap: [0, 0.01]\n },\n yAxis: {\n type: 'category',\n data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']\n },\n series: [\n {\n name: '2011',\n type: 'bar',\n data: [18203, 23489, 29034, 104970, 131744, 630230]\n },\n {\n name: '2012',\n type: 'bar',\n data: [19325, 23438, 31000, 121594, 134141, 681807]\n }\n ]\n};", + "google": { + "callback": "gmapReady", + "key": "" + }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "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, "dataset": [ { "name": "Name", @@ -475,54 +576,41 @@ "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": "", - "plugin": "AMap.Scale,AMap.ToolBar" - }, - "getOption": "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 xAxis: {\n type: 'value',\n boundaryGap: [0, 0.01]\n },\n yAxis: {\n type: 'category',\n data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']\n },\n series: [\n {\n name: '2011',\n type: 'bar',\n data: [18203, 23489, 29034, 104970, 131744, 630230]\n },\n {\n name: '2012',\n type: 'bar',\n data: [19325, 23438, 31000, 121594, 134141, 681807]\n }\n ]\n};", - "google": { - "callback": "gmapReady", - "key": "" - }, - "map": "json", - "renderer": "canvas" + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Name", "type": "string", - "config": {}, "values": ["Brazil", "Indonezia", "USA", "India", "China", "World"] }, { + "config": {}, "name": "2011", "type": "number", - "config": {}, "values": [18203, 19325, 29034, 104970, 131744, 630230] }, { + "config": {}, "name": "2012", "type": "number", - "config": {}, "values": [23489, 23438, 31000, 121594, 134141, 681807] } ], "meta": {}, "name": "Bars" - } + }, + "refId": "A" } ], "title": "World Population", @@ -560,8 +648,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Clickable Column Chart with Gradient", "type": "volkovlabs-echarts-panel" }, @@ -597,8 +697,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Bar Label Rotation", "type": "volkovlabs-echarts-panel" }, @@ -634,8 +746,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Stacked Column Chart", "type": "volkovlabs-echarts-panel" }, @@ -671,8 +795,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Waterfall Chart", "type": "volkovlabs-echarts-panel" }, @@ -708,8 +844,20 @@ "key": "" }, "map": "json", - "renderer": "canvas" + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, + "visualEditor": { + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'time',\n },\n yAxis: {\n type: 'value',\n min: 'dataMin',\n },\n}\n", + "codeHeight": 600, + "dataset": [], + "series": [] + } }, + "pluginVersion": "5.2.0", "title": "Stacked Horizontal Bar", "type": "volkovlabs-echarts-panel" }, @@ -751,8 +899,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": [] @@ -767,6 +915,6 @@ "timezone": "", "title": "Bar", "uid": "E9NLNnFVz", - "version": 1, + "version": 3, "weekStart": "" }