diff --git a/echarts.volkovlabs.io/bar.json b/echarts.volkovlabs.io/bar.json index 8acbca4..d7f7b7f 100644 --- a/echarts.volkovlabs.io/bar.json +++ b/echarts.volkovlabs.io/bar.json @@ -62,11 +62,38 @@ "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": "" @@ -74,6 +101,33 @@ "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" }, @@ -140,7 +194,29 @@ "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": "" @@ -148,6 +224,33 @@ "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" }, @@ -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": "", @@ -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" }, diff --git a/echarts.volkovlabs.io/gauge.json b/echarts.volkovlabs.io/gauge.json index 11bbc09..561890d 100644 --- a/echarts.volkovlabs.io/gauge.json +++ b/echarts.volkovlabs.io/gauge.json @@ -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", @@ -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" }, diff --git a/echarts.volkovlabs.io/line.json b/echarts.volkovlabs.io/line.json index 38977d2..f5876e3 100644 --- a/echarts.volkovlabs.io/line.json +++ b/echarts.volkovlabs.io/line.json @@ -71,6 +71,37 @@ "callback": "gmapReady", "key": "" }, + "themeEditor": { + "name": "default", + "height": 400, + "config": "{}" + }, + "visualEditor": { + "dataset": [ + { + "name": "Category", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "uid": "5918873e-de00-4e8f-814d-f2ca62612b33", + "id": "A", + "name": "Line", + "encode": { + "x": ["A:Category"], + "y": ["A:Value"] + }, + "type": "line" + } + ], + "code": "console.log(context);\n\nreturn {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: 'value',\n },\n}\n\n", + "codeHeight": 600 + }, "map": "json", "renderer": "canvas" }, @@ -167,14 +198,67 @@ "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 series: [\n {\n areaStyle: {},\n data: [\n 820,\n 932,\n 901,\n 934,\n 1290,\n 1330,\n 1320\n ],\n type: \"line\"\n }\n ],\n xAxis: {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n },\n yAxis: {\n type: \"value\"\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 series: [\n {\n areaStyle: {},\n data: values,\n type: \"line\"\n }\n ],\n xAxis: {\n boundaryGap: false,\n data: categories,\n type: \"category\"\n },\n yAxis: {\n type: \"value\"\n }\n};", "google": { "callback": "gmapReady", "key": "" }, + "visualEditor": { + "dataset": [ + { + "name": "Category", + "source": "A" + }, + { + "name": "Value", + "source": "A" + } + ], + "series": [ + { + "uid": "c49ee2de-463a-4854-a80c-f741eb316b07", + "id": "A", + "name": "Line", + "encode": { + "x": ["A:Category"], + "y": ["A:Value"] + }, + "type": "line" + } + ], + "code": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\"\n },\n dataset: {\n source: context.editor.dataset.source\n },\n series: [{ type: 'line', areaStyle: {} }],\n xAxis: {\n boundaryGap: false,\n type: \"category\"\n },\n yAxis: {\n type: 'value'\n },\n}\n", + "codeHeight": 600 + }, "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": ["820", "932", "901", "934", "1290", "1330", "1320"] + } + ], + "meta": {}, + "name": "Line" + } + } + ], "title": "Basic area chart", "type": "volkovlabs-echarts-panel" }, @@ -230,27 +314,184 @@ "id": 10, "links": [], "options": { - "baidu": { - "callback": "bmapReady", - "key": "" + "renderer": "canvas", + "map": "json", + "themeEditor": { + "name": "default", + "height": 400, + "config": "{}" }, - "editor": { - "format": "auto", - "height": 600 + "baidu": { + "key": "", + "callback": "bmapReady" }, - "editorMode": "code", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "return {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {\n data: [\n \"Email\",\n \"Union Ads\",\n \"Video Ads\",\n \"Direct\",\n \"Search Engine\"\n ]\n },\n series: [\n {\n areaStyle: {},\n data: [\n 120,\n 132,\n 101,\n 134,\n 90,\n 230,\n 210\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 220,\n 182,\n 191,\n 234,\n 290,\n 330,\n 310\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 150,\n 232,\n 201,\n 154,\n 190,\n 330,\n 410\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 320,\n 332,\n 301,\n 334,\n 390,\n 330,\n 320\n ],\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: [\n 820,\n 932,\n 901,\n 934,\n 1290,\n 1330,\n 1320\n ],\n emphasis: {\n focus: \"series\"\n },\n label: {\n position: \"top\",\n show: true\n },\n name: \"Search Engine\",\n stack: \"Total\",\n type: \"line\"\n }\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: [\n {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ]\n};", "google": { - "callback": "gmapReady", - "key": "" + "key": "", + "callback": "gmapReady" }, - "map": "json", - "renderer": "canvas" + "editorMode": "code", + "visualEditor": { + "dataset": [ + { + "name": "Value", + "source": "A" + }, + { + "name": "Value", + "source": "B" + }, + { + "name": "Value", + "source": "C" + }, + { + "name": "value", + "source": "D" + }, + { + "name": "Value", + "source": "E" + }, + { + "name": "value", + "source": "F" + } + ], + "series": [], + "code": "console.log(context);\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n },\n {\n type: 'line',\n areaStyle: {},\n label: {\n position: \"top\",\n show: true\n },\n emphasis: {\n focus: \"series\"\n },\n name: \"Search Engine\",\n stack: \"Total\",\n },\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: {\n boundaryGap: false,\n type: 'category'\n },\n yAxis: { type: 'value' },\n}\n", + "codeHeight": 600 + }, + "editor": { + "height": 600, + "format": "auto" + }, + "getOption": "console.log('console Data >> ', data)\n\nlet emails = data.series.find(s => s.name === 'Email').fields[0].values\nlet unionAds = data.series.find(s => s.name === 'Union Ads').fields[0].values\nlet videoAds = data.series.find(s => s.name === 'Video Ads').fields[0].values\nlet direct = data.series.find(s => s.name === 'Direct').fields[0].values\nlet searchEngine = data.series.find(s => s.name === 'Search Engine').fields[0].values\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n },\n legend: {},\n series: [\n {\n areaStyle: {},\n data: emails,\n emphasis: {\n focus: \"series\"\n },\n name: \"Email\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: unionAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Union Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: videoAds,\n emphasis: {\n focus: \"series\"\n },\n name: \"Video Ads\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: direct,\n emphasis: {\n focus: \"series\"\n },\n name: \"Direct\",\n stack: \"Total\",\n type: \"line\"\n },\n {\n areaStyle: {},\n data: searchEngine,\n emphasis: {\n focus: \"series\"\n },\n label: {\n position: \"top\",\n show: true\n },\n name: \"Search Engine\",\n stack: \"Total\",\n type: \"line\"\n }\n ],\n toolbox: {\n orient: 'vertical',\n left: 'right',\n top: 'center',\n feature: {\n saveAsImage: {}\n }\n },\n tooltip: {\n axisPointer: {\n label: {\n backgroundColor: \"#6a7985\"\n },\n type: \"cross\"\n },\n trigger: \"axis\"\n },\n xAxis: [\n {\n boundaryGap: false,\n data: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ],\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ]\n};" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + } + ], + "meta": {}, + "name": "Months" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "B", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["120", "132", "101", "134", "90", "230", "210"] + } + ], + "meta": {}, + "name": "Email" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "C", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["220", "182", "191", "234", "290", "330", "310"] + } + ], + "meta": {}, + "name": "Union Ads" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "D", + "hide": false, + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["150", "232", "201", "154", "190", "330", "410"] + } + ], + "meta": {}, + "name": "Video Ads" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "E", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["320", "332", "301", "334", "390", "330", "320"] + } + ], + "meta": {}, + "name": "Direct" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "F", + "hide": false, + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["820", "932", "901", "934", "1290", "1330", "1320"] + } + ], + "meta": {}, + "name": "Search Engine" + } + } + ], "title": "Stacked Area Chart", "type": "volkovlabs-echarts-panel" }, @@ -288,6 +529,127 @@ "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "refId": "A", + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + } + ], + "meta": {}, + "name": "Months" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "B", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["120", "132", "101", "134", "90", "230", "210"] + } + ], + "meta": {}, + "name": "Email" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "C", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["220", "182", "191", "234", "290", "330", "310"] + } + ], + "meta": {}, + "name": "Union Ads" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "D", + "hide": false, + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["150", "232", "201", "154", "190", "330", "410"] + } + ], + "meta": {}, + "name": "Video Ads" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "E", + "hide": false, + "frame": { + "fields": [ + { + "name": "Value", + "type": "string", + "config": {}, + "values": ["320", "332", "301", "334", "390", "330", "320"] + } + ], + "meta": {}, + "name": "Direct" + } + }, + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "F", + "hide": false, + "frame": { + "fields": [ + { + "name": "value", + "type": "string", + "config": {}, + "values": ["820", "932", "901", "934", "1290", "1330", "1320"] + } + ], + "meta": {}, + "name": "Search Engine" + } + } + ], "title": "Gradient Stacked Area Chart", "type": "volkovlabs-echarts-panel" }, diff --git a/echarts.volkovlabs.io/pie.json b/echarts.volkovlabs.io/pie.json index 4cc4561..8ca3fb0 100644 --- a/echarts.volkovlabs.io/pie.json +++ b/echarts.volkovlabs.io/pie.json @@ -66,7 +66,22 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "return {\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n data: [\n { value: 1048, name: 'Search Engine' },\n { value: 735, name: 'Direct' },\n { value: 580, name: 'Email' },\n { value: 484, name: 'Union Ads' },\n { value: 300, name: 'Video Ads' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};", + "visualEditor": { + "dataset": [ + { + "name": "name", + "source": "A" + }, + { + "name": "value", + "source": "A" + } + ], + "series": [], + "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n}\n", + "codeHeight": 600 + }, + "getOption": "let values = data.series[0].fields.find(field => field.name === 'value').values\nlet names = data.series[0].fields.find(field => field.name === 'name').values\nlet parts = values.map((value, index) => ({ name: names[index],value }));\nreturn {\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Access From',\n type: 'pie',\n radius: '80%',\n data: parts,\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};", "google": { "callback": "gmapReady", "key": "" @@ -74,6 +89,34 @@ "map": "json", "renderer": "canvas" }, + "targets": [ + { + "datasource": { + "uid": "4ytGZmF4k", + "type": "marcusolsson-static-datasource" + }, + "refId": "A", + "hide": false, + "frame": { + "fields": [ + { + "name": "name", + "type": "string", + "config": {}, + "values": ["Search Engine", "Direct", "Email", "Union Ads", "Video Ads"] + }, + { + "name": "value", + "type": "string", + "config": {}, + "values": ["1048", "735", "580", "484", "300"] + } + ], + "meta": {}, + "name": "Pie" + } + } + ], "title": "Referer of a Website", "type": "volkovlabs-echarts-panel" },