2c:null 2d:["$","title",null,{"children":"Apache ECharts5 | Saiful Azfar Ramlee | Observable"}] 32:T1060,{ let container = yield htl.html`

`; let myChart = echarts.init(container, null, { renderer: "canvas", height: "600px", locale: "EN" }); let option; option = { color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"], title: { text: "Gradient Stacked Area Chart" }, tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } } }, legend: { data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: [ { type: "category", boundaryGap: false, data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] } ], yAxis: [ { type: "value" } ], series: [ { name: "Line 1", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(128, 255, 165)" }, { offset: 1, color: "rgb(1, 191, 236)" } ]) }, emphasis: { focus: "series" }, data: [140, 232, 101, 264, 90, 340, 250] }, { name: "Line 2", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(0, 221, 255)" }, { offset: 1, color: "rgb(77, 119, 255)" } ]) }, emphasis: { focus: "series" }, data: [120, 282, 111, 234, 220, 340, 310] }, { name: "Line 3", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(55, 162, 255)" }, { offset: 1, color: "rgb(116, 21, 219)" } ]) }, emphasis: { focus: "series" }, data: [320, 132, 201, 334, 190, 130, 220] }, { name: "Line 4", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(255, 0, 135)" }, { offset: 1, color: "rgb(135, 0, 157)" } ]) }, emphasis: { focus: "series" }, data: [220, 402, 231, 134, 190, 230, 120] }, { name: "Line 5", type: "line", stack: "Total", smooth: true, lineStyle: { width: 0 }, showSymbol: false, label: { show: true, position: "top" }, areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(255, 191, 0)" }, { offset: 1, color: "rgb(224, 62, 76)" } ]) }, emphasis: { focus: "series" }, data: [220, 302, 181, 234, 210, 290, 150] } ] }; option && myChart.setOption(option); return container; }33:T1651,{ let container = yield htl.html`

`; let myChart = echarts.init(container, null, { renderer: "canvas", height: "800px", locale: "EN" }); let option; let noise = getNoiseHelper(); let xData = []; let yData = []; noise.seed(Math.random()); function generateData(theta, min, max) { let data = []; for (let i = 0; i <= 200; i++) { for (let j = 0; j <= 100; j++) { // let x = (max - min) * i / 200 + min; // let y = (max - min) * j / 100 + min; data.push([i, j, noise.perlin2(i / 40, j / 20) + 0.5]); // data.push([i, j, normalDist(theta, x) * normalDist(theta, y)]); } xData.push(i); } for (let j = 0; j < 100; j++) { yData.push(j); } return data; } let data = generateData(2, -5, 5); option = { tooltip: {}, xAxis: { type: "category", data: xData }, yAxis: { type: "category", data: yData }, visualMap: { min: 0, max: 1, calculable: true, realtime: false, inRange: { color: [ "#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026" ] } }, series: [ { name: "Gaussian", type: "heatmap", data: data, emphasis: { itemStyle: { borderColor: "#333", borderWidth: 1 } }, progressive: 1000, animation: false } ] }; /////////////////////////////////////////////////////////////////////////// // perlin noise helper from https://github.com/josephg/noisejs /////////////////////////////////////////////////////////////////////////// function getNoiseHelper() { class Grad { constructor(x, y, z) { this.x = x; this.y = y; this.z = z; } dot2(x, y) { return this.x * x + this.y * y; } dot3(x, y, z) { return this.x * x + this.y * y + this.z * z; } } const grad3 = [ new Grad(1, 1, 0), new Grad(-1, 1, 0), new Grad(1, -1, 0), new Grad(-1, -1, 0), new Grad(1, 0, 1), new Grad(-1, 0, 1), new Grad(1, 0, -1), new Grad(-1, 0, -1), new Grad(0, 1, 1), new Grad(0, -1, 1), new Grad(0, 1, -1), new Grad(0, -1, -1) ]; const p = [ 151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180 ]; // To remove the need for index wrapping, double the permutation table length let perm = new Array(512); let gradP = new Array(512); // This isn't a very good seeding function, but it works ok. It supports 2^16 // different seed values. Write something better if you need more seeds. function seed(seed) { if (seed > 0 && seed < 1) { // Scale the seed out seed *= 65536; } seed = Math.floor(seed); if (seed < 256) { seed |= seed << 8; } for (let i = 0; i < 256; i++) { let v; if (i & 1) { v = p[i] ^ (seed & 255); } else { v = p[i] ^ ((seed >> 8) & 255); } perm[i] = perm[i + 256] = v; gradP[i] = gradP[i + 256] = grad3[v % 12]; } } seed(0); // ##### Perlin noise stuff function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); } function lerp(a, b, t) { return (1 - t) * a + t * b; } // 2D Perlin Noise function perlin2(x, y) { // Find unit grid cell containing point let X = Math.floor(x), Y = Math.floor(y); // Get relative xy coordinates of point within that cell x = x - X; y = y - Y; // Wrap the integer cells at 255 (smaller integer period can be introduced here) X = X & 255; Y = Y & 255; // Calculate noise contributions from each of the four corners let n00 = gradP[X + perm[Y]].dot2(x, y); let n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1); let n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y); let n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1); // Compute the fade curve value for x let u = fade(x); // Interpolate the four results return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y)); } return { seed, perlin2 }; } option && myChart.setOption(option); return container; }34:T1953,macarons = echarts.registerTheme("macarons", { color: [ "#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3", "#e5cf0d", "#97b552", "#95706d", "#dc69aa", "#07a2a4", "#9a7fd1", "#588dd5", "#f5994e", "#c05050", "#59678c", "#c9ab00", "#7eb00a", "#6f5553", "#c14089" ], backgroundColor: "rgba(0,0,0,0)", textStyle: {}, title: { textStyle: { color: "#008acd" }, subtextStyle: { color: "#aaaaaa" } }, line: { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, symbolSize: 3, symbol: "emptyCircle", smooth: true }, radar: { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, symbolSize: 3, symbol: "emptyCircle", smooth: true }, bar: { itemStyle: { barBorderWidth: 0, barBorderColor: "#ccc" } }, pie: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, scatter: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, boxplot: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, parallel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, sankey: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, funnel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, gauge: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, candlestick: { itemStyle: { color: "#d87a80", color0: "#2ec7c9", borderColor: "#d87a80", borderColor0: "#2ec7c9", borderWidth: 1 } }, graph: { itemStyle: { borderWidth: 0, borderColor: "#ccc" }, lineStyle: { width: 1, color: "#aaaaaa" }, symbolSize: 3, symbol: "emptyCircle", smooth: true, color: [ "#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3", "#e5cf0d", "#97b552", "#95706d", "#dc69aa", "#07a2a4", "#9a7fd1", "#588dd5", "#f5994e", "#c05050", "#59678c", "#c9ab00", "#7eb00a", "#6f5553", "#c14089" ], label: { color: "#eeeeee" } }, map: { itemStyle: { areaColor: "#dddddd", borderColor: "#eeeeee", borderWidth: 0.5 }, label: { color: "#d87a80" }, emphasis: { itemStyle: { areaColor: "rgba(254,153,78,1)", borderColor: "#444", borderWidth: 1 }, label: { color: "rgb(100,0,0)" } } }, geo: { itemStyle: { areaColor: "#dddddd", borderColor: "#eeeeee", borderWidth: 0.5 }, label: { color: "#d87a80" }, emphasis: { itemStyle: { areaColor: "rgba(254,153,78,1)", borderColor: "#444", borderWidth: 1 }, label: { color: "rgb(100,0,0)" } } }, categoryAxis: { axisLine: { show: true, lineStyle: { color: "#008acd" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: false, lineStyle: { color: ["#eee"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, valueAxis: { axisLine: { show: true, lineStyle: { color: "#008acd" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#eee"] } }, splitArea: { show: true, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, logAxis: { axisLine: { show: true, lineStyle: { color: "#008acd" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#eee"] } }, splitArea: { show: true, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, timeAxis: { axisLine: { show: true, lineStyle: { color: "#008acd" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#eee"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, toolbox: { iconStyle: { borderColor: "#2ec7c9" }, emphasis: { iconStyle: { borderColor: "#18a4a6" } } }, legend: { textStyle: { color: "#333333" } }, tooltip: { axisPointer: { lineStyle: { color: "#008acd", width: "1" }, crossStyle: { color: "#008acd", width: "1" } } }, timeline: { lineStyle: { color: "#008acd", width: 1 }, itemStyle: { color: "#008acd", borderWidth: 1 }, controlStyle: { color: "#008acd", borderColor: "#008acd", borderWidth: 0.5 }, checkpointStyle: { color: "#2ec7c9", borderColor: "#2ec7c9" }, label: { color: "#008acd" }, emphasis: { itemStyle: { color: "#a9334c" }, controlStyle: { color: "#008acd", borderColor: "#008acd", borderWidth: 0.5 }, label: { color: "#008acd" } } }, visualMap: { color: ["#5ab1ef", "#e0ffff"] }, dataZoom: { backgroundColor: "rgba(47,69,84,0)", dataBackgroundColor: "#efefff", fillerColor: "rgba(182,162,222,0.2)", handleColor: "#008acd", handleSize: "100%", textStyle: { color: "#333333" } }, markPoint: { label: { color: "#eeeeee" }, emphasis: { label: { color: "#eeeeee" } } } })35:T1815,chalk = echarts.registerTheme("chalk", { color: [ "#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0", "#d4a4eb", "#d2f5a6", "#76f2f2" ], backgroundColor: "rgba(41,52,65,1)", textStyle: {}, title: { textStyle: { color: "#ffffff" }, subtextStyle: { color: "#dddddd" } }, line: { itemStyle: { borderWidth: "4" }, lineStyle: { width: "3" }, symbolSize: "0", symbol: "circle", smooth: true }, radar: { itemStyle: { borderWidth: "4" }, lineStyle: { width: "3" }, symbolSize: "0", symbol: "circle", smooth: true }, bar: { itemStyle: { barBorderWidth: 0, barBorderColor: "#ccc" } }, pie: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, scatter: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, boxplot: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, parallel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, sankey: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, funnel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, gauge: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, candlestick: { itemStyle: { color: "#fc97af", color0: "transparent", borderColor: "#fc97af", borderColor0: "#87f7cf", borderWidth: "2" } }, graph: { itemStyle: { borderWidth: 0, borderColor: "#ccc" }, lineStyle: { width: "1", color: "#ffffff" }, symbolSize: "0", symbol: "circle", smooth: true, color: [ "#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0", "#d4a4eb", "#d2f5a6", "#76f2f2" ], label: { color: "#293441" } }, map: { itemStyle: { areaColor: "#f3f3f3", borderColor: "#999999", borderWidth: 0.5 }, label: { color: "#893448" }, emphasis: { itemStyle: { areaColor: "rgba(255,178,72,1)", borderColor: "#eb8146", borderWidth: 1 }, label: { color: "rgb(137,52,72)" } } }, geo: { itemStyle: { areaColor: "#f3f3f3", borderColor: "#999999", borderWidth: 0.5 }, label: { color: "#893448" }, emphasis: { itemStyle: { areaColor: "rgba(255,178,72,1)", borderColor: "#eb8146", borderWidth: 1 }, label: { color: "rgb(137,52,72)" } } }, categoryAxis: { axisLine: { show: true, lineStyle: { color: "#666666" } }, axisTick: { show: false, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#aaaaaa" }, splitLine: { show: false, lineStyle: { color: ["#e6e6e6"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] } } }, valueAxis: { axisLine: { show: true, lineStyle: { color: "#666666" } }, axisTick: { show: false, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#aaaaaa" }, splitLine: { show: false, lineStyle: { color: ["#e6e6e6"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] } } }, logAxis: { axisLine: { show: true, lineStyle: { color: "#666666" } }, axisTick: { show: false, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#aaaaaa" }, splitLine: { show: false, lineStyle: { color: ["#e6e6e6"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] } } }, timeAxis: { axisLine: { show: true, lineStyle: { color: "#666666" } }, axisTick: { show: false, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#aaaaaa" }, splitLine: { show: false, lineStyle: { color: ["#e6e6e6"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] } } }, toolbox: { iconStyle: { borderColor: "#999999" }, emphasis: { iconStyle: { borderColor: "#666666" } } }, legend: { textStyle: { color: "#999999" } }, tooltip: { axisPointer: { lineStyle: { color: "#cccccc", width: 1 }, crossStyle: { color: "#cccccc", width: 1 } } }, timeline: { lineStyle: { color: "#87f7cf", width: 1 }, itemStyle: { color: "#87f7cf", borderWidth: 1 }, controlStyle: { color: "#87f7cf", borderColor: "#87f7cf", borderWidth: 0.5 }, checkpointStyle: { color: "#fc97af", borderColor: "#fc97af" }, label: { color: "#87f7cf" }, emphasis: { itemStyle: { color: "#f7f494" }, controlStyle: { color: "#87f7cf", borderColor: "#87f7cf", borderWidth: 0.5 }, label: { color: "#87f7cf" } } }, visualMap: { color: ["#fc97af", "#87f7cf"] }, dataZoom: { backgroundColor: "rgba(255,255,255,0)", dataBackgroundColor: "rgba(114,204,255,1)", fillerColor: "rgba(114,204,255,0.2)", handleColor: "#72ccff", handleSize: "100%", textStyle: { color: "#333333" } }, markPoint: { label: { color: "#293441" }, emphasis: { label: { color: "#293441" } } } })36:T182a,vintage = echarts.registerTheme("vintage", { color: [ "#d87c7c", "#919e8b", "#d7ab82", "#6e7074", "#61a0a8", "#efa18d", "#787464", "#cc7e63", "#724e58", "#4b565b" ], backgroundColor: "rgba(254,248,239,1)", textStyle: {}, title: { textStyle: { color: "#333333" }, subtextStyle: { color: "#aaaaaa" } }, line: { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, symbolSize: 4, symbol: "emptyCircle", smooth: false }, radar: { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, symbolSize: 4, symbol: "emptyCircle", smooth: false }, bar: { itemStyle: { barBorderWidth: 0, barBorderColor: "#ccc" } }, pie: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, scatter: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, boxplot: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, parallel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, sankey: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, funnel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, gauge: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, candlestick: { itemStyle: { color: "#c23531", color0: "#314656", borderColor: "#c23531", borderColor0: "#314656", borderWidth: 1 } }, graph: { itemStyle: { borderWidth: 0, borderColor: "#ccc" }, lineStyle: { width: 1, color: "#aaaaaa" }, symbolSize: 4, symbol: "emptyCircle", smooth: false, color: [ "#d87c7c", "#919e8b", "#d7ab82", "#6e7074", "#61a0a8", "#efa18d", "#787464", "#cc7e63", "#724e58", "#4b565b" ], label: { color: "#eeeeee" } }, map: { itemStyle: { areaColor: "#eeeeee", borderColor: "#444444", borderWidth: 0.5 }, label: { color: "#000000" }, emphasis: { itemStyle: { areaColor: "rgba(255,215,0,0.8)", borderColor: "#444444", borderWidth: 1 }, label: { color: "rgb(100,0,0)" } } }, geo: { itemStyle: { areaColor: "#eeeeee", borderColor: "#444444", borderWidth: 0.5 }, label: { color: "#000000" }, emphasis: { itemStyle: { areaColor: "rgba(255,215,0,0.8)", borderColor: "#444444", borderWidth: 1 }, label: { color: "rgb(100,0,0)" } } }, categoryAxis: { axisLine: { show: true, lineStyle: { color: "#333" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: false, lineStyle: { color: ["#ccc"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, valueAxis: { axisLine: { show: true, lineStyle: { color: "#333" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#ccc"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, logAxis: { axisLine: { show: true, lineStyle: { color: "#333" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#ccc"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, timeAxis: { axisLine: { show: true, lineStyle: { color: "#333" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#ccc"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, toolbox: { iconStyle: { borderColor: "#999999" }, emphasis: { iconStyle: { borderColor: "#666666" } } }, legend: { textStyle: { color: "#333333" } }, tooltip: { axisPointer: { lineStyle: { color: "#cccccc", width: 1 }, crossStyle: { color: "#cccccc", width: 1 } } }, timeline: { lineStyle: { color: "#293c55", width: 1 }, itemStyle: { color: "#293c55", borderWidth: 1 }, controlStyle: { color: "#293c55", borderColor: "#293c55", borderWidth: 0.5 }, checkpointStyle: { color: "#e43c59", borderColor: "#c23531" }, label: { color: "#293c55" }, emphasis: { itemStyle: { color: "#a9334c" }, controlStyle: { color: "#293c55", borderColor: "#293c55", borderWidth: 0.5 }, label: { color: "#293c55" } } }, visualMap: { color: ["#bf444c", "#d88273", "#f6efa6"] }, dataZoom: { backgroundColor: "rgba(47,69,84,0)", dataBackgroundColor: "rgba(47,69,84,0.3)", fillerColor: "rgba(167,183,204,0.4)", handleColor: "#a7b7cc", handleSize: "100%", textStyle: { color: "#333333" } }, markPoint: { label: { color: "#eeeeee" }, emphasis: { label: { color: "#eeeeee" } } } })37:T194d,roma = echarts.registerTheme("roma", { color: [ "#e01f54", "#001852", "#f5e8c8", "#b8d2c7", "#c6b38e", "#a4d8c2", "#f3d999", "#d3758f", "#dcc392", "#2e4783", "#82b6e9", "#ff6347", "#a092f1", "#0a915d", "#eaf889", "#6699FF", "#ff6666", "#3cb371", "#d5b158", "#38b6b6" ], backgroundColor: "rgba(0,0,0,0)", textStyle: {}, title: { textStyle: { color: "#333333" }, subtextStyle: { color: "#aaaaaa" } }, line: { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, symbolSize: 4, symbol: "emptyCircle", smooth: false }, radar: { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, symbolSize: 4, symbol: "emptyCircle", smooth: false }, bar: { itemStyle: { barBorderWidth: 0, barBorderColor: "#ccc" } }, pie: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, scatter: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, boxplot: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, parallel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, sankey: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, funnel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, gauge: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, candlestick: { itemStyle: { color: "#e01f54", color0: "#001852", borderColor: "#f5e8c8", borderColor0: "#b8d2c7", borderWidth: 1 } }, graph: { itemStyle: { borderWidth: 0, borderColor: "#ccc" }, lineStyle: { width: 1, color: "#aaaaaa" }, symbolSize: 4, symbol: "emptyCircle", smooth: false, color: [ "#e01f54", "#001852", "#f5e8c8", "#b8d2c7", "#c6b38e", "#a4d8c2", "#f3d999", "#d3758f", "#dcc392", "#2e4783", "#82b6e9", "#ff6347", "#a092f1", "#0a915d", "#eaf889", "#6699FF", "#ff6666", "#3cb371", "#d5b158", "#38b6b6" ], label: { color: "#eeeeee" } }, map: { itemStyle: { areaColor: "#eeeeee", borderColor: "#444444", borderWidth: 0.5 }, label: { color: "#000000" }, emphasis: { itemStyle: { areaColor: "rgba(255,215,0,0.8)", borderColor: "#444", borderWidth: 1 }, label: { color: "rgb(100,0,0)" } } }, geo: { itemStyle: { areaColor: "#eeeeee", borderColor: "#444444", borderWidth: 0.5 }, label: { color: "#000000" }, emphasis: { itemStyle: { areaColor: "rgba(255,215,0,0.8)", borderColor: "#444", borderWidth: 1 }, label: { color: "rgb(100,0,0)" } } }, categoryAxis: { axisLine: { show: true, lineStyle: { color: "#333" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: false, lineStyle: { color: ["#ccc"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, valueAxis: { axisLine: { show: true, lineStyle: { color: "#333" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#ccc"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, logAxis: { axisLine: { show: true, lineStyle: { color: "#333" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#ccc"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, timeAxis: { axisLine: { show: true, lineStyle: { color: "#333" } }, axisTick: { show: true, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#333" }, splitLine: { show: true, lineStyle: { color: ["#ccc"] } }, splitArea: { show: false, areaStyle: { color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } } }, toolbox: { iconStyle: { borderColor: "#999999" }, emphasis: { iconStyle: { borderColor: "#666666" } } }, legend: { textStyle: { color: "#333333" } }, tooltip: { axisPointer: { lineStyle: { color: "#cccccc", width: 1 }, crossStyle: { color: "#cccccc", width: 1 } } }, timeline: { lineStyle: { color: "#293c55", width: 1 }, itemStyle: { color: "#293c55", borderWidth: 1 }, controlStyle: { color: "#293c55", borderColor: "#293c55", borderWidth: 0.5 }, checkpointStyle: { color: "#e43c59", borderColor: "#c23531" }, label: { color: "#293c55" }, emphasis: { itemStyle: { color: "#a9334c" }, controlStyle: { color: "#293c55", borderColor: "#293c55", borderWidth: 0.5 }, label: { color: "#293c55" } } }, visualMap: { color: ["#e01f54", "#e7dbc3"] }, dataZoom: { backgroundColor: "rgba(47,69,84,0)", dataBackgroundColor: "rgba(47,69,84,0.3)", fillerColor: "rgba(167,183,204,0.4)", handleColor: "#a7b7cc", handleSize: "100%", textStyle: { color: "#333333" } }, markPoint: { label: { color: "#eeeeee" }, emphasis: { label: { color: "#eeeeee" } } } })38:T1790,purple_passion = echarts.registerTheme("purple_passion", { color: ["#9b8bba", "#e098c7", "#8fd3e8", "#71669e", "#cc70af", "#7cb4cc"], backgroundColor: "rgba(91,92,110,1)", textStyle: {}, title: { textStyle: { color: "#ffffff" }, subtextStyle: { color: "#cccccc" } }, line: { itemStyle: { borderWidth: "2" }, lineStyle: { width: "3" }, symbolSize: "7", symbol: "circle", smooth: true }, radar: { itemStyle: { borderWidth: "2" }, lineStyle: { width: "3" }, symbolSize: "7", symbol: "circle", smooth: true }, bar: { itemStyle: { barBorderWidth: 0, barBorderColor: "#ccc" } }, pie: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, scatter: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, boxplot: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, parallel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, sankey: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, funnel: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, gauge: { itemStyle: { borderWidth: 0, borderColor: "#ccc" } }, candlestick: { itemStyle: { color: "#e098c7", color0: "transparent", borderColor: "#e098c7", borderColor0: "#8fd3e8", borderWidth: "2" } }, graph: { itemStyle: { borderWidth: 0, borderColor: "#ccc" }, lineStyle: { width: 1, color: "#aaaaaa" }, symbolSize: "7", symbol: "circle", smooth: true, color: ["#9b8bba", "#e098c7", "#8fd3e8", "#71669e", "#cc70af", "#7cb4cc"], label: { color: "#eeeeee" } }, map: { itemStyle: { areaColor: "#eee", borderColor: "#444", borderWidth: 0.5 }, label: { color: "#000" }, emphasis: { itemStyle: { areaColor: "#e098c7", borderColor: "#444", borderWidth: 1 }, label: { color: "#ffffff" } } }, geo: { itemStyle: { areaColor: "#eee", borderColor: "#444", borderWidth: 0.5 }, label: { color: "#000" }, emphasis: { itemStyle: { areaColor: "#e098c7", borderColor: "#444", borderWidth: 1 }, label: { color: "#ffffff" } } }, categoryAxis: { axisLine: { show: true, lineStyle: { color: "#cccccc" } }, axisTick: { show: false, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#cccccc" }, splitLine: { show: false, lineStyle: { color: ["#eeeeee", "#333333"] } }, splitArea: { show: true, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] } } }, valueAxis: { axisLine: { show: true, lineStyle: { color: "#cccccc" } }, axisTick: { show: false, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#cccccc" }, splitLine: { show: false, lineStyle: { color: ["#eeeeee", "#333333"] } }, splitArea: { show: true, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] } } }, logAxis: { axisLine: { show: true, lineStyle: { color: "#cccccc" } }, axisTick: { show: false, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#cccccc" }, splitLine: { show: false, lineStyle: { color: ["#eeeeee", "#333333"] } }, splitArea: { show: true, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] } } }, timeAxis: { axisLine: { show: true, lineStyle: { color: "#cccccc" } }, axisTick: { show: false, lineStyle: { color: "#333" } }, axisLabel: { show: true, color: "#cccccc" }, splitLine: { show: false, lineStyle: { color: ["#eeeeee", "#333333"] } }, splitArea: { show: true, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"] } } }, toolbox: { iconStyle: { borderColor: "#999999" }, emphasis: { iconStyle: { borderColor: "#666666" } } }, legend: { textStyle: { color: "#cccccc" } }, tooltip: { axisPointer: { lineStyle: { color: "#cccccc", width: 1 }, crossStyle: { color: "#cccccc", width: 1 } } }, timeline: { lineStyle: { color: "#8fd3e8", width: 1 }, itemStyle: { color: "#8fd3e8", borderWidth: 1 }, controlStyle: { color: "#8fd3e8", borderColor: "#8fd3e8", borderWidth: 0.5 }, checkpointStyle: { color: "#8fd3e8", borderColor: "#8a7ca8" }, label: { color: "#8fd3e8" }, emphasis: { itemStyle: { color: "#8fd3e8" }, controlStyle: { color: "#8fd3e8", borderColor: "#8fd3e8", borderWidth: 0.5 }, label: { color: "#8fd3e8" } } }, visualMap: { color: ["#8a7ca8", "#e098c7", "#cceffa"] }, dataZoom: { backgroundColor: "rgba(0,0,0,0)", dataBackgroundColor: "rgba(255,255,255,0.3)", fillerColor: "rgba(167,183,204,0.4)", handleColor: "#a7b7cc", handleSize: "100%", textStyle: { color: "#333" } }, markPoint: { label: { color: "#eeeeee" }, emphasis: { label: { color: "#eeeeee" } } } })39:[{"id":"0eaba3184bc237b9f24e217e04b3687a4e3c59c928396f58fc4513c069790ec6717798606258081f954f5b001c1c544c45cb82521aab5e829dcf4180aea2fb52","href":"https://static.observableusercontent.com/files/0eaba3184bc237b9f24e217e04b3687a4e3c59c928396f58fc4513c069790ec6717798606258081f954f5b001c1c544c45cb82521aab5e829dcf4180aea2fb52","name":"obama_budget_proposal_2012.json","type":"application/json","lastModified":1665414348211.992,"size":132944}] 30:{"id":"bece5709bfa33388","slug":"apache-echarts5","title":"Apache ECharts5","thumbnail":"08619422050f20bff5b5d0b6b76f112c24159ace50de2a20dc6b259bf1a09601","access_level":"public","create_time":"$D2022-10-10T10:56:48.617Z","update_time":"$D2022-10-10T15:11:17.215Z","view_time":null,"first_public_time":"$D2022-10-10T14:21:23.588Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e421b786e4306453","login":"saifulazfar","name":"Saiful Azfar Ramlee","avatar_url":"https://avatars-next.observableusercontent.com/970ec42c2f05d7cc9925296dcbdfa80962843529800264e2e8c6ea0a6c295a86","tier":"starter_2024","bio":""},"version":355,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"82af4af5477d15d6","login":"saifulazfar","name":"Saiful Azfar Ramlee","avatar_url":"https://avatars-next.observableusercontent.com/970ec42c2f05d7cc9925296dcbdfa80962843529800264e2e8c6ea0a6c295a86","tier":null,"bio":""}],"members":[{"type":"individual","id":"82af4af5477d15d6","login":"saifulazfar","name":"Saiful Azfar Ramlee","avatar_url":"https://avatars-next.observableusercontent.com/970ec42c2f05d7cc9925296dcbdfa80962843529800264e2e8c6ea0a6c295a86","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Apache ECharts5","cells":[{"id":0,"value":"# Apache ECharts5\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"___\n### _Blank Template_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"{\n let container = yield htl.html`

`;\n let myChart = echarts.init(container, null, {\n // https://echarts.apache.org/en/api.html#echarts.init\n // devicePixelRatio?: number,\n // renderer?: string,\n // useDirtyRect?: boolean, // Since `5.0.0`\n // useCoarsePointer?: boolean, // Since `5.4.0`\n // pointerSize?: number, // Since `5.4.0`\n // ssr?: boolean, // Since `5.3.0`\n // width?: number|string,\n // height?: number|string,\n //locale?: string // Since `5.0.0`\n });\n let option;\n\n ///////////////////////////////////////////////////////////////////////////\n // options code goes here\n ///////////////////////////////////////////////////////////////////////////\n\n option && myChart.setOption(option);\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"___\n### _eCharts Themes_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"___\n### _Required_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"echarts = require(\"echarts@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"