diff --git a/echarts.volkovlabs.io/home.json b/echarts.volkovlabs.io/home.json index 57f0e66..24afd3a 100644 --- a/echarts.volkovlabs.io/home.json +++ b/echarts.volkovlabs.io/home.json @@ -54,7 +54,7 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "let names = [];\nlet amounts = [];\ndata.series.map((s) => {\n names = s.fields.find((f) => f.name === 'Name').values;\n amounts = s.fields.find((f) => f.name === 'Amount').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n tooltip: {},\n legend: {\n data: [replaceVariables('$var')]\n },\n xAxis: {\n data: names\n },\n yAxis: {},\n toolbox: { feature: { restore: {} } },\n series: [\n {\n name: replaceVariables('$var'),\n type: 'bar',\n data: amounts\n }\n ]\n};\n", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/E9NLNnFVz/bar?orgId=1');\n});\n\nlet names = [];\nlet amounts = [];\ndata.series.map((s) => {\n names = s.fields.find((f) => f.name === 'Name').values;\n amounts = s.fields.find((f) => f.name === 'Amount').values;\n});\n\nreturn {\n grid: {\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\",\n top: \"4%\",\n },\n tooltip: {},\n legend: {\n data: [replaceVariables('$var')]\n },\n xAxis: {\n data: names\n },\n yAxis: {},\n toolbox: { feature: { restore: {} } },\n series: [\n {\n name: replaceVariables('$var'),\n type: 'bar',\n data: amounts\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};\n", "google": { "callback": "gmapReady", "key": "" @@ -67,7 +67,7 @@ "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 min: 0,\n },\n}\n", + "code": "return {\n dataset: context.editor.dataset,\n series: context.editor.series,\n xAxis: {\n type: 'category',\n },\n yAxis: {\n type: 'value',\n min: 0,\n },\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, "dataset": [ { @@ -89,6 +89,7 @@ ] } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { @@ -164,6 +165,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Bar", "type": "volkovlabs-echarts-panel" }, @@ -212,6 +214,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Calendar", "type": "volkovlabs-echarts-panel" }, @@ -260,6 +263,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Candlestick", "type": "volkovlabs-echarts-panel" }, @@ -284,12 +288,12 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/PQeH9VFVk/gauge?orgId=1');\n});\n\nreturn {\n series: [\n {\n type: 'gauge',\n startAngle: 180,\n endAngle: 0,\n center: ['50%', '75%'],\n radius: '90%',\n min: 0,\n max: 1,\n splitNumber: 8,\n axisLine: {\n lineStyle: {\n width: 6,\n color: [\n [0.25, '#FF6E76'],\n [0.5, '#FDDD60'],\n [0.75, '#58D9F9'],\n [1, '#7CFFB2']\n ]\n }\n },\n pointer: {\n icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n length: '12%',\n width: 20,\n offsetCenter: [0, '-60%'],\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n length: 12,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n },\n splitLine: {\n length: 20,\n lineStyle: {\n color: 'auto',\n width: 5\n }\n },\n axisLabel: {\n color: '#464646',\n fontSize: 20,\n distance: -60,\n rotate: 'tangential',\n formatter: function (value) {\n if (value === 0.875) {\n return 'Grade A';\n } else if (value === 0.625) {\n return 'Grade B';\n } else if (value === 0.375) {\n return 'Grade C';\n } else if (value === 0.125) {\n return 'Grade D';\n }\n return '';\n }\n },\n title: {\n offsetCenter: [0, '-10%'],\n fontSize: 20\n },\n detail: {\n fontSize: 30,\n offsetCenter: [0, '-35%'],\n valueAnimation: true,\n formatter: function (value) {\n return Math.round(value * 100) + '';\n },\n color: 'auto'\n },\n data: [\n {\n value: 0.7,\n name: 'Grade Rating'\n }\n ]\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/PQeH9VFVk/gauge?orgId=1');\n});\n\nlet value = data.series[0].fields[0].values[0]\n\nreturn {\n series: [\n {\n type: 'gauge',\n startAngle: 180,\n endAngle: 0,\n center: ['50%', '75%'],\n radius: '90%',\n min: 0,\n max: 1,\n splitNumber: 8,\n axisLine: {\n lineStyle: {\n width: 6,\n color: [\n [0.25, '#FF6E76'],\n [0.5, '#FDDD60'],\n [0.75, '#58D9F9'],\n [1, '#7CFFB2']\n ]\n }\n },\n pointer: {\n icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n length: '12%',\n width: 20,\n offsetCenter: [0, '-60%'],\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n length: 12,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n },\n splitLine: {\n length: 20,\n lineStyle: {\n color: 'auto',\n width: 5\n }\n },\n axisLabel: {\n color: '#464646',\n fontSize: 20,\n distance: -60,\n rotate: 'tangential',\n formatter: function (value) {\n if (value === 0.875) {\n return 'Grade A';\n } else if (value === 0.625) {\n return 'Grade B';\n } else if (value === 0.375) {\n return 'Grade C';\n } else if (value === 0.125) {\n return 'Grade D';\n }\n return '';\n }\n },\n title: {\n offsetCenter: [0, '-10%'],\n fontSize: 20\n },\n detail: {\n fontSize: 30,\n offsetCenter: [0, '-35%'],\n valueAnimation: true,\n formatter: function (value) {\n return Math.round(value * 100) + '';\n },\n color: 'auto'\n },\n data: [\n {\n value: value,\n name: 'Grade Rating'\n },\n ]\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -302,12 +306,39 @@ "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", + "code": "console.log(context);\nreturn {\n dataset: {\n source: context.editor.dataset.source,\n },\n series: [\n {\n type: 'gauge',\n startAngle: 180,\n endAngle: 0,\n center: ['50%', '75%'],\n radius: '90%',\n min: 0,\n max: 1,\n splitNumber: 8,\n axisLine: {\n lineStyle: {\n width: 6,\n color: [\n [0.25, '#FF6E76'],\n [0.5, '#FDDD60'],\n [0.75, '#58D9F9'],\n [1, '#7CFFB2']\n ]\n }\n },\n pointer: {\n icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',\n length: '12%',\n width: 20,\n offsetCenter: [0, '-60%'],\n itemStyle: {\n color: 'auto'\n }\n },\n axisTick: {\n length: 12,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n },\n splitLine: {\n length: 20,\n lineStyle: {\n color: 'auto',\n width: 5\n }\n },\n axisLabel: {\n color: '#464646',\n fontSize: 20,\n distance: -60,\n rotate: 'tangential',\n formatter: function (value) {\n if (value === 0.875) {\n return 'Grade A';\n } else if (value === 0.625) {\n return 'Grade B';\n } else if (value === 0.375) {\n return 'Grade C';\n } else if (value === 0.125) {\n return 'Grade D';\n }\n return '';\n }\n },\n title: {\n offsetCenter: [0, '-10%'],\n fontSize: 20\n },\n detail: {\n fontSize: 30,\n offsetCenter: [0, '-35%'],\n valueAnimation: true,\n formatter: function (value) {\n return Math.round(value * 100) + '';\n },\n color: 'auto'\n }\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, - "dataset": [], + "dataset": [ + { + "name": "Value", + "source": "A" + } + ], "series": [] } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [0.6] + } + ], + "meta": {}, + "name": "Speed" + }, + "refId": "A" + } + ], "title": "Gauge", "type": "volkovlabs-echarts-panel" }, @@ -356,6 +387,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Geo/Map", "type": "volkovlabs-echarts-panel" }, @@ -404,6 +436,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Graph", "type": "volkovlabs-echarts-panel" }, @@ -430,12 +463,12 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/tg6gWiKVk/line?orgId=1');\n});\n\nreturn {\n grid: {\n top: '4%',\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\"\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 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 graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/tg6gWiKVk/line?orgId=1');\n});\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\nlet days = data.series.find(s => s.name === 'Days').fields[0].values\n\n\nreturn {\n grid: {\n top: '4%',\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\"\n },\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 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: days,\n type: \"category\"\n }\n ],\n yAxis: [\n {\n type: \"value\"\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -448,12 +481,189 @@ "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", + "code": "console.log(context);\nreturn {\n grid: {\n top: '4%',\n bottom: \"3%\",\n containLabel: true,\n left: \"3%\",\n right: \"4%\"\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 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 graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, - "dataset": [], + "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": [] } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "string", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n \"Sun\"\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Days" + }, + "refId": "A" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 120,\n 132,\n 101,\n 134,\n 90,\n 230,\n 210\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Email" + }, + "hide": false, + "refId": "B" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 220,\n 182,\n 191,\n 234,\n 290,\n 330,\n 310\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Union Ads" + }, + "hide": false, + "refId": "C" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 150,\n 232,\n 201,\n 154,\n 190,\n 330,\n 410\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Video Ads" + }, + "hide": false, + "refId": "D" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 320,\n 332,\n 301,\n 334,\n 390,\n 330,\n 320\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Direct" + }, + "hide": false, + "refId": "E" + }, + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [\n 820,\n 932,\n 901,\n 934,\n 1290,\n 1330,\n 1320\n ]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Search Engine" + }, + "hide": false, + "refId": "F" + } + ], "title": "Line", "type": "volkovlabs-echarts-panel" }, @@ -483,7 +693,7 @@ "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/6zyVsZ54z/sankey?orgId=1');\n});\n\nreturn {\n series: [{\n type: 'liquidFill',\n data: [0.6, 0.55, 0.4, 0.25],\n radius: '90%',\n outline: {\n show: false\n },\n backgroundStyle: {\n borderColor: '#156ACF',\n borderWidth: 1,\n shadowColor: 'rgba(0, 0, 0, 0.4)',\n shadowBlur: 20\n },\n shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',\n label: {\n position: ['38%', '40%'],\n formatter: function () {\n return 'ECharts\\nLiquid Fill';\n },\n fontSize: 40,\n color: '#D94854'\n }\n }],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/6zyVsZ54z/sankey?orgId=1');\n});\nlet waves = data.series[0].fields[0].values\nreturn {\n series: [{\n type: 'liquidFill',\n data: waves,\n radius: '90%',\n outline: {\n show: false\n },\n backgroundStyle: {\n borderColor: '#156ACF',\n borderWidth: 1,\n shadowColor: 'rgba(0, 0, 0, 0.4)',\n shadowBlur: 20\n },\n shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',\n label: {\n position: ['38%', '40%'],\n formatter: function () {\n return 'ECharts\\nLiquid Fill';\n },\n fontSize: 40,\n color: '#D94854'\n }\n }],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -496,12 +706,44 @@ "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", + "code": "console.log(context);\nreturn {\n dataset: context.editor.dataset,\n series: [{\n type: 'liquidFill',\n // data: [0.6, 0.55, 0.4, 0.25],\n radius: '90%',\n outline: {\n show: false\n },\n backgroundStyle: {\n borderColor: '#156ACF',\n borderWidth: 1,\n shadowColor: 'rgba(0, 0, 0, 0.4)',\n shadowBlur: 20\n },\n shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',\n // label: {\n // position: ['38%', '40%'],\n // formatter: function () {\n // return 'ECharts\\nLiquid Fill';\n // },\n // fontSize: 40,\n // color: '#D94854'\n // }\n }],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, - "dataset": [], + "dataset": [ + { + "name": "Value", + "source": "A" + } + ], "series": [] } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => ({\n ...field,\n values: [0.6, 0.55, 0.4, 0.25]\n }))\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Waves" + }, + "refId": "A" + } + ], "title": "Liquid Fill", "type": "volkovlabs-echarts-panel" }, @@ -526,12 +768,12 @@ "format": "auto", "height": 600 }, - "editorMode": "code", + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, - "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/0b5-q7K4k/pie?orgId=1');\n});\n\nreturn {\n series: [\n {\n name: 'Nightingale Chart',\n type: 'pie',\n radius: ['20%', '75%'],\n center: ['50%', '50%'],\n roseType: 'area',\n itemStyle: {\n borderRadius: 8\n },\n data: [\n { value: 40, name: 'rose 1' },\n { value: 38, name: 'rose 2' },\n { value: 32, name: 'rose 3' },\n { value: 30, name: 'rose 4' },\n { value: 28, name: 'rose 5' },\n { value: 26, name: 'rose 6' },\n { value: 22, name: 'rose 7' },\n { value: 18, name: 'rose 8' }\n ]\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", + "getOption": "echartsInstance.on('click', (params) => {\n locationService.replace('/d/0b5-q7K4k/pie?orgId=1');\n});\n\nlet 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 }));\n\nreturn {\n series: [\n {\n name: 'Nightingale Chart',\n type: 'pie',\n radius: ['20%', '75%'],\n center: ['50%', '50%'],\n roseType: 'area',\n itemStyle: {\n borderRadius: 8\n },\n data: parts\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n};", "google": { "callback": "gmapReady", "key": "" @@ -544,12 +786,54 @@ "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", + "code": "return {\n dataset: {\n source: context.editor.dataset.source,\n },\n tooltip: {\n trigger: 'item'\n },\n series: [\n {\n name: 'Nightingale Chart',\n type: 'pie',\n radius: ['20%', '75%'],\n center: ['50%', '50%'],\n roseType: 'area',\n itemStyle: {\n borderRadius: 8\n },\n }\n ],\n graphic: [\n {\n type: 'group',\n rotation: Math.PI / 4,\n bounding: 'raw',\n right: 110,\n bottom: 110,\n z: 100,\n children: [\n {\n type: 'rect',\n left: 'center',\n top: 'center',\n z: 100,\n shape: {\n width: 400,\n height: 50\n },\n style: {\n fill: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center',\n top: 'center',\n z: 100,\n style: {\n fill: '#fff',\n text: 'CLICK FOR MORE',\n font: 'bold 26px sans-serif'\n }\n }\n ]\n }]\n}\n", "codeHeight": 600, - "dataset": [], + "dataset": [ + { + "name": "Value", + "source": "A" + }, + { + "name": "Name", + "source": "A" + } + ], "series": [] } }, + "pluginVersion": "5.2.0", + "targets": [ + { + "datasource": { + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" + }, + "frame": { + "fields": [ + { + "config": {}, + "name": "Value", + "type": "number", + "values": [] + }, + { + "config": {}, + "name": "Name", + "type": "string", + "values": [] + } + ], + "meta": { + "custom": { + "customCode": "const result = {\n ...frame,\n fields: frame.fields.map((field) => {\n if (field.name === 'Name') {\n return ({\n ...field,\n values: ['rose 1', 'rose 2', 'rose 3', 'rose 4', 'rose 5', 'rose 6', 'rose 7', 'rose 8']\n })\n }\n return ({\n ...field,\n values: [40, 38, 36, 32, 30, 28, 22, 18]\n })\n }\n )\n}\n\nreturn Promise.resolve(result);", + "valuesEditor": "custom" + } + }, + "name": "Pie" + }, + "refId": "A" + } + ], "title": "Pie", "type": "volkovlabs-echarts-panel" }, @@ -598,6 +882,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Radar", "type": "volkovlabs-echarts-panel" }, @@ -646,6 +931,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Sankey", "type": "volkovlabs-echarts-panel" }, @@ -694,6 +980,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Scatter", "type": "volkovlabs-echarts-panel" }, @@ -742,6 +1029,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Sunburst", "type": "volkovlabs-echarts-panel" }, @@ -790,6 +1078,7 @@ "series": [] } }, + "pluginVersion": "5.2.0", "title": "Treemap", "type": "volkovlabs-echarts-panel" } diff --git a/echarts.volkovlabs.io/line.json b/echarts.volkovlabs.io/line.json index aacff96..9859038 100644 --- a/echarts.volkovlabs.io/line.json +++ b/echarts.volkovlabs.io/line.json @@ -24,6 +24,7 @@ "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, + "id": 24, "links": [ { "asDropdown": false, @@ -71,12 +72,16 @@ "callback": "gmapReady", "key": "" }, + "map": "json", + "renderer": "canvas", "themeEditor": { - "name": "default", + "config": "{}", "height": 400, - "config": "{}" + "name": "default" }, "visualEditor": { + "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, "dataset": [ { "name": "Category", @@ -89,22 +94,19 @@ ], "series": [ { - "uid": "5918873e-de00-4e8f-814d-f2ca62612b33", - "id": "A", - "name": "Line", "encode": { "x": ["A:Category"], "y": ["A:Value"] }, - "type": "line" + "id": "A", + "name": "Line", + "type": "line", + "uid": "5918873e-de00-4e8f-814d-f2ca62612b33" } - ], - "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" + ] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { @@ -167,8 +169,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": "Smoothed Line Chart", "type": "volkovlabs-echarts-panel" }, @@ -203,7 +217,16 @@ "callback": "gmapReady", "key": "" }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" + }, "visualEditor": { + "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, "dataset": [ { "name": "Category", @@ -216,47 +239,44 @@ ], "series": [ { - "uid": "c49ee2de-463a-4854-a80c-f741eb316b07", - "id": "A", - "name": "Line", "encode": { "x": ["A:Category"], "y": ["A:Value"] }, - "type": "line" + "id": "A", + "name": "Line", + "type": "line", + "uid": "c49ee2de-463a-4854-a80c-f741eb316b07" } - ], - "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" + ] + } }, + "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": [820, 932, 901, 934, 1290, 1330, 1320] } ], "meta": {}, "name": "Line" - } + }, + "refId": "A" } ], "title": "Basic area chart", @@ -294,8 +314,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 Line Chart", "type": "volkovlabs-echarts-panel" }, @@ -314,27 +346,34 @@ "id": 10, "links": [], "options": { - "renderer": "canvas", - "map": "json", - "themeEditor": { - "name": "default", - "height": 400, - "config": "{}" - }, "baidu": { - "key": "", - "callback": "bmapReady" + "callback": "bmapReady", + "key": "" + }, + "editor": { + "format": "auto", + "height": 600 }, + "editorMode": "visual", "gaode": { "key": "", "plugin": "AMap.Scale,AMap.ToolBar" }, + "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};", "google": { - "key": "", - "callback": "gmapReady" + "callback": "gmapReady", + "key": "" + }, + "map": "json", + "renderer": "canvas", + "themeEditor": { + "config": "{}", + "height": 400, + "name": "default" }, - "editorMode": "code", "visualEditor": { + "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, "dataset": [ { "name": "Value", @@ -361,135 +400,129 @@ "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};" + "series": [] + } }, + "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] } ], "meta": {}, - "name": "Months" - } + "name": "Days" + }, + "refId": "A" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "B", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [120, 132, 101, 134, 90, 230, 210] } ], "meta": {}, "name": "Email" - } + }, + "hide": false, + "refId": "B" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "C", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [220, 182, 191, 234, 290, 330, 310] } ], "meta": {}, "name": "Union Ads" - } + }, + "hide": false, + "refId": "C" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "D", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "value", "type": "number", - "config": {}, "values": [150, 232, 201, 154, 190, 330, 410] } ], "meta": {}, "name": "Video Ads" - } + }, + "hide": false, + "refId": "D" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "E", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "number", - "config": {}, "values": [320, 332, 301, 334, 390, 330, 320] } ], "meta": {}, "name": "Direct" - } + }, + "hide": false, + "refId": "E" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "F", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "value", "type": "number", - "config": {}, "values": [820, 932, 901, 934, 1290, 1330, 1320] } ], "meta": {}, "name": "Search Engine" - } + }, + "hide": false, + "refId": "F" } ], "title": "Stacked Area Chart", @@ -527,127 +560,139 @@ "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", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "4ytGZmF4k" }, - "refId": "A", "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] } ], "meta": {}, "name": "Months" - } + }, + "refId": "A" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "B", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["120", "132", "101", "134", "90", "230", "210"] } ], "meta": {}, "name": "Email" - } + }, + "hide": false, + "refId": "B" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "C", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["220", "182", "191", "234", "290", "330", "310"] } ], "meta": {}, "name": "Union Ads" - } + }, + "hide": false, + "refId": "C" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "D", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "value", "type": "string", - "config": {}, "values": ["150", "232", "201", "154", "190", "330", "410"] } ], "meta": {}, "name": "Video Ads" - } + }, + "hide": false, + "refId": "D" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "E", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "Value", "type": "string", - "config": {}, "values": ["320", "332", "301", "334", "390", "330", "320"] } ], "meta": {}, "name": "Direct" - } + }, + "hide": false, + "refId": "E" }, { "datasource": { - "uid": "4ytGZmF4k", - "type": "marcusolsson-static-datasource" + "type": "marcusolsson-static-datasource", + "uid": "4ytGZmF4k" }, - "refId": "F", - "hide": false, "frame": { "fields": [ { + "config": {}, "name": "value", "type": "string", - "config": {}, "values": ["820", "932", "901", "934", "1290", "1330", "1320"] } ], "meta": {}, "name": "Search Engine" - } + }, + "hide": false, + "refId": "F" } ], "title": "Gradient Stacked Area Chart", @@ -685,8 +730,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": "Temperature Change in the Coming Week", "type": "volkovlabs-echarts-panel" }, @@ -722,8 +779,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": "Area Pieces", "type": "volkovlabs-echarts-panel" }, @@ -2065,8 +2134,8 @@ "type": "volkovlabs-echarts-panel" } ], - "schemaVersion": 37, - "style": "dark", + "refresh": "", + "schemaVersion": 39, "tags": ["echarts"], "templating": { "list": [] @@ -2081,6 +2150,6 @@ "timezone": "", "title": "Line", "uid": "tg6gWiKVk", - "version": 1, + "version": 20, "weekStart": "" }