visualifyjs 2.5.3-2.dev

package/docs/docs/Rechart/radar.md

@@ -0,0 +1,253 @@
+<script defers>
+
+const Basic_Radar = {
+    code: `const getOption = () => {
+    return {
+        type: 'radar',
+        data: {
+            'Referer of a Websit': [
+                {
+                    name: '2018', 
+                    value: [5000, 7000, 12000, 11000, 15000, 14000]
+                }
+            ],
+        },
+        radar:{
+            indicator: [
+                        { name: 'APP', max: 6000 },
+                        { name: 'PC', max: 16000 },
+                        { name: 'Mobile', max: 30000 },
+                        { name: 'Wechat', max: 35000 },
+                        { name: 'Mobile QQ', max: 50000 },
+                        { name: 'Mini App', max: 25000 }
+            ]
+        },
+	}
+};
+return getOption;`
+};
+
+const Circular_radar = {
+    code: `const getOption = () => {
+    return {
+        type: 'radar',
+        data: {
+            'Referer of a Websit': [
+                {
+                    name: '2018', 
+                    value: [5000, 7000, 12000, 11000, 15000, 14000]
+                }
+            ],
+        },
+        radar:{
+            indicator: [
+                        { name: 'APP', max: 6000 },
+                        { name: 'PC', max: 16000 },
+                        { name: 'Mobile', max: 30000 },
+                        { name: 'Wechat', max: 35000 },
+                        { name: 'Mobile QQ', max: 50000 },
+                        { name: 'Mini App', max: 25000 }
+            ],
+            radius: 120,
+            splitNumber: 3,
+            shape: 'circle', 
+            splitArea: {
+                areaStyle: {
+                        color: ['rgba(114, 172, 209, 0.2)','rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)','rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
+                        shadowColor: 'rgba(0, 0, 0, 0.3)',
+                        shadowBlur: 10
+                }
+            }
+        },
+	}
+};
+return getOption;`
+};
+
+
+const Indicator_radar = {
+    code: `const getOption = () => {
+    return {
+        type: 'radar',
+        data: {
+            'Referer of a Websit': [
+                {
+                    name: '2018', 
+                    value: [5000, 7000, 12000, 11000, 15000, 14000]
+                },
+                {
+                    name: '2019', 
+                    value: [4000, 9000, 15000, 15000, 13000, 11000],
+                    symbol: 'rect',
+                    symbolSize: 12,
+                    lineStyle: {
+                        type: 'dashed'
+                    },
+                    label: {
+                        show: true,
+                        formatter: function (params) {
+                        return params.value;
+                        }
+                    }
+                }
+            ],
+        },
+        radar:{
+            indicator: [
+                        { name: 'APP', max: 6000 },
+                        { name: 'PC', max: 16000 },
+                        { name: 'Mobile', max: 30000 },
+                        { name: 'Wechat', max: 35000 },
+                        { name: 'Mobile QQ', max: 50000 },
+                        { name: 'Mini App', max: 25000 }
+            ],
+            radius: 120,
+            splitNumber: 3,
+            shape: 'circle',
+            name: {
+                fontSize: 20,
+                color: 'rgba(185, 11, 220, 1)'
+            }
+        },
+	}
+};
+return getOption;`
+};
+
+const Multiple_radar = {
+    code: `const getOption = () => {
+    return {
+        type: 'radar',
+        data: {
+            'First': [
+                {
+                value: [60, 73, 85, 40],
+                name: 'A Software'
+                }
+            ],
+            "Second": [
+                {
+                    value: [85, 90, 90, 95, 95],
+                    name: 'A Phone'
+                },
+                {
+                    value: [95, 80, 95, 90, 93],
+                    name: 'Another Phone'
+                }
+            ],
+            'Third': [
+                {
+                    name: 'Precipitation',
+                    value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3]
+                },
+                {
+                    name: 'Evaporation',
+                    value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
+                }
+            ],
+        },
+        radar: [
+            {
+                indicator: [
+                    { text: 'Brand', max: 100 },
+                    { text: 'Content', max: 100 },
+                    { text: 'Usability', max: 100 },
+                    { text: 'Function', max: 100 }
+                ],
+                center: ['25%', '40%'],
+                radius: 80
+            },
+            {
+                indicator: [
+                    { text: 'Look', max: 100 },
+                    { text: 'Photo', max: 100 },
+                    { text: 'System', max: 100 },
+                    { text: 'Performance', max: 100 },
+                    { text: 'Screen', max: 100 }
+                ],
+                radius: 80,
+                center: ['50%', '60%']
+            },
+            {
+                indicator: (function () {
+                    var res = [];
+                    for (var i = 1; i <= 12; i++) {
+                    res.push({ text: i + '月', max: 100 });
+                    }
+                    return res;
+                })(),
+                center: ['75%', '40%'],
+                radius: 80
+            }
+        ],
+	}
+};
+return getOption;`
+};
+
+const ex1 = new $visualify.LiveEditor(Basic_Radar).mount('#ex1');
+const ex2 = new $visualify.LiveEditor(Circular_radar).mount('#ex2');
+const ex3 = new $visualify.LiveEditor(Indicator_radar).mount('#ex3');
+const ex4 = new $visualify.LiveEditor(Multiple_radar).mount('#ex4');
+</script>
+
+# Radar Chart
+
+## Basic Radar Chart
+
+<div id="ex1"></div>
+
+## Circular Radar Chart
+
+<div id="ex2"></div>
+
+## Indicator Radar Chart
+
+<div id="ex3"></div>
+
+## Multiple Radar Chart
+
+<div id="ex4"></div>
+
+## Overall Configuration
+
+### Basic Configuration
+
+The basic configuration includes:
+
+| Attribute       | Type        | Description             | Choice                     | Default |
+| --------------- | ----------- | ----------------------- | -------------------------- | ------- |
+| title           | string      | The main title          | User-defined title         | -       |
+| subtitle        | string      | A secondary title       | User-defined subtitle      | -       |
+| width           | string      | The width dimension     | Any valid CSS width value  | -       |
+| height          | string      | The height dimension    | Any valid CSS height value | 400px   |
+| legend          | bool/object | show or hide legend     | False, User-defined legend | {}      |
+| xAxis           | array/false | The xAxis               | User-defined xAxis Data    | []      |
+| yAxis           | array/false | The yAxis               | User-defined yAxis Data    | []      |
+| label           | object      | The label               | User-defined label         | {}      |
+| labelLine       | object      | The labelLine           | User-defined labelLine     | {}      |
+| tooltip         | object      | The tooltip             | User-defined tooltip       | {}      |
+| xAxisLineshow   | bool        | show or hide xAxisLines | True, False                | true    |
+| yAxisLineshow   | bool        | show or hide yAxisLines | True, False                | true    |
+| xAxisLabelShow  | bool        | show or hide xAxisLabel | True, False                | true    |
+| yAxisLabelShow  | bool        | show or hide yAxisLabel | True, False                | true    |
+| xAxisLabelColor | string      | The xAxisLabelColor     | Any valid CSS color value  | -       |
+| yAxisLabelColor | string      | The yAxisLabelColor     | Any valid CSS color value  | -       |
+
+### Data Configuration
+
+| Attribute | Type         | Description | Choice            | Default   |
+| --------- | ------------ | ----------- | ----------------- | --------- |
+| data      | string       | The data    | User-defined data | {}        |
+| type      | string/array | The type    | 'line', 'bar'     | undefined |
+| radar     | object       | The radar   | User-defined data | {}        |
+
+### Radar Configuration
+
+| Attribute   | Type   | Description     | Choice                   | Default   |
+| ----------- | ------ | --------------- | ------------------------ | --------- |
+| indicator   | array  | The indicator   | User-defined indicator   | []        |
+| radius      | number | The radius      | User-defined radius      | 75        |
+| splitNumber | number | The splitNumber | User-defined splitNumber | 5         |
+| shape       | string | The shape       | 'polygon', 'circle'      | 'polygon' |
+| splitArea   | object | The splitArea   | User-defined splitArea   | {}        |

package/docs/docs/Rechart/scatter.md

@@ -0,0 +1,298 @@
+<script defers>
+
+function rangeRandom(min, max, precision) {
+    return (Math.random() * (max - min) + min).toFixed(precision)
+}
+
+const randomData = []
+
+for (let i = 0; i < 50; i++) {
+    randomData.push([
+        rangeRandom(20, 200, 2), rangeRandom(10, 100, 2)
+    ])
+}
+
+const Basic_Scatter = {
+    code: 
+`const getOption = () => {
+    return {
+        type: 'scatter',
+        data: {
+            'random': ${JSON.stringify(randomData)},
+        },
+	}
+};
+return getOption;`
+};
+
+const Grouped_Scatter = {
+    code: `const getOption = () => {
+    return {
+        type: 'scatter',
+        data: {
+            'female': [
+                [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
+            ],
+            "male": [
+            [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
+            [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
+            [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
+            [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
+            [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
+            [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
+            [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
+            [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
+            [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
+            [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
+            [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
+            [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
+            [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
+            [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
+            [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
+            [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
+            [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
+            [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
+            [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
+            [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
+            [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
+            [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
+            [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
+            [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
+            [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
+            [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
+            [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
+            [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
+            [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
+            [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
+            [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
+            [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
+            [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
+            [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
+            [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
+            [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
+            [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
+            [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
+            [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
+            [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
+            [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
+            [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
+            [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
+            [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
+            [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
+            [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
+            [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
+            [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
+            [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
+            [180.3, 83.2], [180.3, 83.2]
+          ]
+        },
+        xAxis:{
+            min: 140,
+            max: 200,
+        },
+        yAxis:{
+            min: 40,
+            max: 120,
+        },
+        xAxisLabel: 'Height',
+        yAxisLabel: 'Weight',
+        xAxisNameGap: 5,
+        yAxisNameGap: 5,
+        tooltip: {
+            axisPointer: {
+                type: 'cross'
+            }
+        }
+	}
+};
+return getOption;`
+};
+
+const Quadrant = {
+    code: `const getOption = () => {
+    return {
+        type: 'scatter',
+        data: {
+            'Data': 
+                [{
+                    value: [1, 1],
+                    symbol: 'none',
+                }, {
+                    value: [0, -1],
+                    symbol: 'none',
+                },
+                [0.35, 0.18],
+                [0.55, 0.77],
+                [0.88, 0.23],
+                [0.23, -0.25],
+                [0.65, -0.66]
+                ],
+        },
+        markArea: {
+          itemStyle: {
+            color: '#FFFAFA',
+            opacity: '0.7'
+          },
+          emphasis: {
+            itemStyle: {
+              color: '#FFFAFA',
+              opacity: '0.7'
+            },
+          },
+          data: [
+            [{
+              coord: [0.5, 0]
+            }, {
+              coord: [1, 1]
+            }],
+            [{
+              coord: [0.5, 0]
+            }, {
+              coord: [0, -1]
+            }]
+          ]
+        },
+        markLine: {
+          symbol: 'none',
+          data: [
+            [{
+              value: 0.5,
+              coord: [0.5, -1]
+            }, {
+              coord: [0.5, 1]
+            }]
+          ]
+        },
+        legend: false,
+	}
+};
+return getOption;`
+};
+
+const Bubble = {
+    code: `const getOption = () => {
+    return {
+        type: 'scatter',
+        data: {
+            'bubble': ${JSON.stringify(randomData)},
+        },
+        itemStyle: {
+          normal: {
+            opacity: 0.8
+          }
+        },
+        symbolSize: function(val) {
+          const [a, b] = val
+          return Math.abs(a - b) / 2
+        },
+    }
+};
+return getOption;`
+};
+
+const ex1 = new $visualify.LiveEditor(Basic_Scatter).mount('#ex1');
+const ex2 = new $visualify.LiveEditor(Grouped_Scatter).mount('#ex2');
+const ex3 = new $visualify.LiveEditor(Quadrant).mount('#ex3');
+const ex4 = new $visualify.LiveEditor(Bubble).mount('#ex4');
+</script>
+
+# Scatter Chart
+
+## Basic Scatter Chart
+
+<div id="ex1"></div>
+
+## Grouped Scatter Chart
+
+<div id="ex2"></div>
+
+## Quadrant Scatter Chart
+
+<div id="ex3"></div>
+
+## Bubble Scatter Chart
+
+<div id="ex4"></div>
+
+## Overall Configuration
+
+### Basic Configuration
+
+The basic configuration includes:
+
+| Attribute       | Type        | Description             | Choice                     | Default |
+| --------------- | ----------- | ----------------------- | -------------------------- | ------- |
+| title           | string      | The main title          | User-defined title         | -       |
+| subtitle        | string      | A secondary title       | User-defined subtitle      | -       |
+| width           | string      | The width dimension     | Any valid CSS width value  | -       |
+| height          | string      | The height dimension    | Any valid CSS height value | 400px   |
+| legend          | bool/object | show or hide legend     | False, User-defined legend | {}      |
+| xAxis           | array/false | The xAxis               | User-defined xAxis Data    | []      |
+| yAxis           | array/false | The yAxis               | User-defined yAxis Data    | []      |
+| label           | object      | The label               | User-defined label         | {}      |
+| labelLine       | object      | The labelLine           | User-defined labelLine     | {}      |
+| tooltip         | object      | The tooltip             | User-defined tooltip       | {}      |
+| xAxisLineshow   | bool        | show or hide xAxisLines | True, False                | true    |
+| yAxisLineshow   | bool        | show or hide yAxisLines | True, False                | true    |
+| xAxisLabelShow  | bool        | show or hide xAxisLabel | True, False                | true    |
+| yAxisLabelShow  | bool        | show or hide yAxisLabel | True, False                | true    |
+| xAxisLabelColor | string      | The xAxisLabelColor     | Any valid CSS color value  | -       |
+| yAxisLabelColor | string      | The yAxisLabelColor     | Any valid CSS color value  | -       |
+
+### Data Configuration
+
+| Attribute | Type         | Description | Choice            | Default   |
+| --------- | ------------ | ----------- | ----------------- | --------- |
+| data      | string       | The data    | User-defined data | {}        |
+| type      | string/array | The type    | 'line', 'bar'     | undefined |

package/docs/docs/_404.md

@@ -0,0 +1,52 @@
+<style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+    
+    .container {
+      text-align: center;
+      background-color: #ffffff;
+      padding: 50px;
+      margin-top: 5vh;
+      border-radius: 10px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    }
+    
+    .container h1 {
+      font-size: 72px;
+      margin-bottom: 20px;
+      color: #ff5252;
+    }
+    
+    .container p {
+      font-size: 24px;
+      margin-bottom: 30px;
+    }
+    
+    .container a {
+      font-size: 18px;
+      text-decoration: none;
+      color: #2196f3;
+      border: 1px solid #2196f3;
+      padding: 10px 15px;
+      border-radius: 5px;
+      transition: background-color 0.3s, color 0.3s;
+    }
+    
+    .container a:hover {
+      background-color: #2196f3;
+      color: #ffffff;
+    }
+
+</style>
+
+<div class="container">
+    <h1>404</h1>
+    <p>Oops! The page you're looking for doesn't exist.</p>
+    <a href="/">Go Home</a>
+</div>

package/docs/docs/_coverpage.md

@@ -0,0 +1,11 @@
+<!-- _coverpage.md -->
+
+![logo](./static/logo/logo_256x256.png)
+
+# visualify.js <small>2.5.3</small>
+
+> A magical data portal generator
+
+[GitHub](https://github.com/visualify)
+[Getting Started](#visualify)
+

package/docs/docs/_sidebar.md

@@ -0,0 +1,44 @@
+-   Getting started
+
+    -   [Introduction](/README.md)
+    -   [Quick start](/quickstart.md)
+    -   [More pages](/more-pages.md)
+
+-   Visualify.Recharts
+    
+    -   [Usage](/rechart-basic-usage.md)
+    -   [Attributes](/rechart-attributes.md)
+    -   [Line Chart](/Rechart/line.md)
+    -   [Bar Chart](/Rechart/bar.md)
+    -   [Pie Chart](/Rechart/pie.md)
+    -   [Radar Chart](/Rechart/radar.md)
+    -   [Funnel Chart](/Rechart/funnel.md)
+    -   [Scatter Chart](/Rechart/scatter.md)
+    
+  
+-   Page Mode
+
+    -   [ScatterL](/components/scatterL.md)
+    -   [Visium](/components/visium.md)
+    -   [DotBio](/components/dotBio.md)
+    -   [Echart](/components/echart.md)
+    -   [Plotly](/components/plotly.md)
+    -   [Macaron](/components/macaron.md)
+    -   [More...](/components/more.md)
+
+-   Customization
+
+    -   [Configuration](/configuration.md)
+    -   [Theme](/theme.md)
+
+-   Guide
+
+    -   [CLI](/CLI.md)
+    -   [Deploy](/deploy.md)
+
+-   Showcase
+
+    -   [MmTrBC](https://visualify.pharmacy.arizona.edu/MmTrBC/)
+    -   [EsoDev](https://visualify.pharmacy.arizona.edu/EsoDev/)
+
+-   [UpdateLog](/log.md)