diff --git a/docs/assets/examples/en/area-chart/segment-range-area.md b/docs/assets/examples/en/area-chart/segment-range-area.md index f3d4770360..1fcd3dd428 100644 --- a/docs/assets/examples/en/area-chart/segment-range-area.md +++ b/docs/assets/examples/en/area-chart/segment-range-area.md @@ -97,15 +97,13 @@ const spec = { itemContent: { type: 'text', autoRotate: false, - text: { + style: { text: 'BALANCE AGAINST', - style: { - fontSize: 14, - fontWeight: 'bold', - fill: 'rgba(0,0,0,0.45)', - textAlign: 'center', - textBaseline: 'middle' - } + fontSize: 14, + fontWeight: 'bold', + fill: 'rgba(0,0,0,0.45)', + textAlign: 'center', + textBaseline: 'middle' } }, itemLine: { @@ -121,15 +119,14 @@ const spec = { offsetX: -40, type: 'text', autoRotate: false, - text: { + style: { text: ['BALANCE in', 'FAVOUR of ENGLAND'], - style: { - fontSize: 14, - fontWeight: 'bold', - fill: 'rgba(0,0,0,0.45)', - textAlign: 'left', - textBaseline: 'middle' - } + + fontSize: 14, + fontWeight: 'bold', + fill: 'rgba(0,0,0,0.45)', + textAlign: 'left', + textBaseline: 'middle' } }, itemLine: { diff --git a/docs/assets/examples/en/bar-chart/bar-markPoint.md b/docs/assets/examples/en/bar-chart/bar-markPoint.md index 5f31dadc0a..88ac20432d 100644 --- a/docs/assets/examples/en/bar-chart/bar-markPoint.md +++ b/docs/assets/examples/en/bar-chart/bar-markPoint.md @@ -83,12 +83,7 @@ const spec = { type: 'text', autoRotate: false, text: { - dy: 14, text: '2 mins', - style: { - fill: 'white', - fontSize: 14 - }, labelBackground: { padding: [5, 10, 5, 10], style: { @@ -96,6 +91,11 @@ const spec = { cornerRadius: 5 } } + }, + style: { + dy: 14, + fill: 'white', + fontSize: 14 } }, itemLine: { diff --git a/docs/assets/examples/en/marker/geo-mark-point.md b/docs/assets/examples/en/marker/geo-mark-point.md index f829bd4a3f..1841abfddc 100644 --- a/docs/assets/examples/en/marker/geo-mark-point.md +++ b/docs/assets/examples/en/marker/geo-mark-point.md @@ -17,91 +17,91 @@ option: mapChart#markPoint ## Demo source ```javascript livedemo - const response1 = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/map-mark-point.json'); - const dataJson = await response1.json(); - const data = dataJson.features.map(d => d['properties']) - const minValue = Math.min(...data.map(d => d.scores)) - const maxValue = Math.max(...data.map(d => d.scores)) +const response1 = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/map-mark-point.json'); +const dataJson = await response1.json(); +const data = dataJson.features.map(d => d['properties']); +const minValue = Math.min(...data.map(d => d.scores)); +const maxValue = Math.max(...data.map(d => d.scores)); +const response2 = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/geojson/usa.json'); +const geojson = await response2.json(); +VChart.registerMap('usa', geojson); - const response2 = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/geojson/usa.json'); - const geojson = await response2.json(); - VChart.registerMap('usa', geojson); +function sizeScale(value, domain, range) { + const t = (value - domain[0]) / (domain[1] - domain[0]); + const newValue = (range[1] - range[0]) * t + range[0]; + return newValue; +} - function sizeScale(value, domain, range) { - const t = (value - domain[0]) / (domain[1] - domain[0]); - const newValue = (range[1] - range[0]) * t + range[0]; - return newValue; +const spec = { + type: 'map', + title: { + text: 'Opioid Overdose Rates (per 100,000) by Year: 2017' + }, + color: { + type: 'linear', + range: ['rgb(252,250,97)', 'rgb(252,150,134)', 'rgb(87,33,15)'] + }, + area: { + style: { + fill: { + field: 'scores', + scale: 'color', + changeDomain: 'replace' + } } - - const spec = { - type: 'map', - title: { - text: 'Opioid Overdose Rates (per 100,000) by Year: 2017', - }, - color: { - type: 'linear', - range: ['rgb(252,250,97)', 'rgb(252,150,134)', 'rgb(87,33,15)'] - }, - area: { - style: { - fill: { - field: 'scores', - scale: 'color', - changeDomain: 'replace' - } - } - }, - data: [ - { - values: data - } - ], - nameField: 'name', - valueField: 'scores', - nameProperty: 'name', - map: 'usa', - region: [ - { - roam: true, - projection: { - type: 'albersUsa' - } - } - ], - legends: [ - { - visible: true, - type: 'color', - field: 'scores', - orient: 'bottom', - position: 'start', - title: { - visible: true, - text: 'Population' - } - } - ], - markPoint: data.map(d => { - return { - areaName: d.name, - itemLine: { - visible: false, - }, - itemContent: { - type: 'symbol', - autoRotate: false, - offsetX: -10, - offsetY: -5, - symbolStyle: { - size: sizeScale(d.scores, [minValue, maxValue], [20, 40]), - fill: '#FF6347', - symbolType: '' - } - } - } - }) + }, + data: [ + { + values: data + } + ], + nameField: 'name', + valueField: 'scores', + nameProperty: 'name', + map: 'usa', + region: [ + { + roam: true, + projection: { + type: 'albersUsa' + } + } + ], + legends: [ + { + visible: true, + type: 'color', + field: 'scores', + orient: 'bottom', + position: 'start', + title: { + visible: true, + text: 'Population' + } + } + ], + markPoint: data.map(d => { + return { + areaName: d.name, + itemLine: { + visible: false + }, + itemContent: { + type: 'symbol', + autoRotate: false, + offsetX: -10, + offsetY: -5, + style: { + size: sizeScale(d.scores, [minValue, maxValue], [20, 40]), + fill: '#FF6347', + symbolType: + '' + } + } }; + }) +}; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); diff --git a/docs/assets/examples/en/marker/mark-area-range.md b/docs/assets/examples/en/marker/mark-area-range.md index d5b02d3114..ee2370671c 100644 --- a/docs/assets/examples/en/marker/mark-area-range.md +++ b/docs/assets/examples/en/marker/mark-area-range.md @@ -122,13 +122,11 @@ const spec = { offsetY: 0, type: 'image', autoRotate: false, - image: { - style: { - dx: -55, - width: 30, - height: 30, - image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/%E7%AE%AD%E5%A4%B4%20%E4%B8%8B%E9%99%8D.png' - } + style: { + dx: -55, + width: 30, + height: 30, + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/%E7%AE%AD%E5%A4%B4%20%E4%B8%8B%E9%99%8D.png' } } }, @@ -144,13 +142,11 @@ const spec = { type: 'image', offsetY: 0, autoRotate: false, - image: { - style: { - dx: -50, - width: 30, - height: 30, - image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/%E4%B8%8A%E5%8D%87.png' - } + style: { + dx: -50, + width: 30, + height: 30, + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/%E4%B8%8A%E5%8D%87.png' } } } diff --git a/docs/assets/examples/en/marker/mark-area-with-label.md b/docs/assets/examples/en/marker/mark-area-with-label.md index 7b4f14e7e1..7301588915 100644 --- a/docs/assets/examples/en/marker/mark-area-with-label.md +++ b/docs/assets/examples/en/marker/mark-area-with-label.md @@ -216,13 +216,11 @@ const spec = { itemContent: { type: 'image', autoRotate: false, - image: { - style: { - dy: -6, - width: 30, - height: 30, - image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/%E7%AE%AD%E5%A4%B4%20%E4%B8%8B%E9%99%8D.png' - } + style: { + dy: -6, + width: 30, + height: 30, + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/%E7%AE%AD%E5%A4%B4%20%E4%B8%8B%E9%99%8D.png' } } }, @@ -238,14 +236,12 @@ const spec = { itemContent: { type: 'image', autoRotate: false, - image: { - style: { - dy: -6, - dx: 8, - width: 30, - height: 30, - image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/%E4%B8%8A%E5%8D%87.png' - } + style: { + dy: -6, + dx: 8, + width: 30, + height: 30, + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/%E4%B8%8A%E5%8D%87.png' } } } diff --git a/docs/assets/examples/en/marker/mark-point-basic.md b/docs/assets/examples/en/marker/mark-point-basic.md index cd959b17fe..27051df3a4 100644 --- a/docs/assets/examples/en/marker/mark-point-basic.md +++ b/docs/assets/examples/en/marker/mark-point-basic.md @@ -32,820 +32,819 @@ Data point positioning: - The `itemContent.autoRotate` attribute declares whether the annotation content automatically rotates to the direction parallel to the guide line. - The `itemContent.richText` attribute declares the annotation content style when `itemContent.type: richText`, and can also be applied to other annotation content types. - `targetSymbol` is declared as a prefix mark, used to mark data points and highlight mark points. + ## Demo source ```javascript livedemo - const spec = { - type: 'line', - xField: 'year', - yField: 'population', - axes: [ - { - orient: 'bottom', - type: 'linear', - min: 1868, - max: 2016 - } - ], - markPoint: [ - { - coordinate: { - year: '1878', - population: 100 - }, - itemContent: { - offsetY: -100, - offsetX: 100, - type: 'text', - autoRotate: false, - confine: true, - text: { - text: '1878 population was 148', +const spec = { + type: 'line', + xField: 'year', + yField: 'population', + axes: [ + { + orient: 'bottom', + type: 'linear', + min: 1868, + max: 2016 + } + ], + markPoint: [ + { + coordinate: { + year: '1878', + population: 100 + }, + itemContent: { + offsetY: -100, + offsetX: 100, + type: 'text', + autoRotate: false, + confine: true, + style: { + text: '1878 population was 148' + } + }, + targetSymbol: { + visible: true + }, + itemLine: { + type: 'type-arc', + arcRatio: 0.4, + startSymbol: { + size: 10, + style: { + stroke: '#E8346D', + symbolType: 'triangle' } }, - targetSymbol: { - visible: true, - }, - itemLine: { - type: 'type-arc', - arcRatio: 0.4, - startSymbol: { - size: 10, - style: { - stroke: '#E8346D', - symbolType: 'triangle' - } - }, - line: { - style: { - stroke: '#E8346D' - } + line: { + style: { + stroke: '#E8346D' } } + } + }, + { + coordinate: { + year: '2016', + population: 899447 }, - { - coordinate: { - year: '2016', - population: 899447 - }, - itemContent: { - offsetY: 40, - // offsetX: -200, - type: 'richText', - autoRotate: false, - confine: true, - position: 'insideBottom', - richText: { - style: { - width: 100, - height: 50, - dx: 110, - dy: 10, - textConfig: [ - { - text: '2016\n', - fontWeight: 'bold', - fontSize: 13, - fill: '#E8346D', - fontFamily: 'Times New Roman' - }, - { - text: 'population was 899447', - fontSize: 10, - fill: '#E8346D', - fontFamily: 'Times New Roman' - } - ] + itemContent: { + offsetY: 40, + // offsetX: -200, + type: 'richText', + autoRotate: false, + confine: true, + position: 'insideBottom', + style: { + width: 100, + height: 50, + dx: 110, + dy: 10, + textConfig: [ + { + text: '2016\n', + fontWeight: 'bold', + fontSize: 13, + fill: '#E8346D', + fontFamily: 'Times New Roman' + }, + { + text: 'population was 899447', + fontSize: 10, + fill: '#E8346D', + fontFamily: 'Times New Roman' } + ] + } + }, + itemLine: { + type: 'type-do', + startSymbol: { + size: 24, + style: { + stroke: '#E8346D' } }, - itemLine: { - type: 'type-do', - startSymbol: { - size: 24, - style: { - stroke: '#E8346D' - } - }, - line: { - style: { - stroke: '#E8346D' - } + line: { + style: { + stroke: '#E8346D' } } } - ], - point: { - style: { - visible: false - } - }, - line: { - style: { - lineWidth: 2 - } - }, - title: { - text: 'Population History - Line Chart', - textStyle: { - lineWidth: 3, - fill: '#333', - fontSize: 20, - fontFamily: 'Times New Roman' - } - }, - data: { - id: 'data2', - values: [ - { - census_year: true, - year: 2016, - source: 'CoE', - population: 899447 - }, - { - census_year: true, - year: 2014, - source: 'CoE', - population: 877926 - }, - { - year: 2013, - source: 'CoE 6', - population: 847712 - }, - { - census_year: true, - year: 2012, - source: 'CoE', - population: 817498 - }, - { - year: 2010, - source: 'CoE 6', - population: 797320 - }, - { - census_year: true, - year: 2009, - source: 'CoE', - population: 782439 - }, - { - census_year: true, - year: 2008, - source: 'CoE', - population: 752412 - }, - { - year: 2007, - source: 'CoE 6', - population: 741392 - }, - { - census_year: true, - year: 2005, - source: 'CoE', - population: 712391 - }, - { - year: 2004, - source: 'CoE 6', - population: 698631 - }, - { - year: 2003, - source: 'CoE 6', - population: 684871 - }, - { - year: 2002, - source: 'CoE 6', - population: 671110 - }, - { - year: 2000, - source: 'CoE 6', - population: 652817 - }, - { - census_year: true, - year: 1999, - source: 'CoE', - population: 648284 - }, - { - year: 1998, - source: 'CoE 6', - population: 637625 - }, - { - year: 1997, - source: 'CoE 6', - population: 626965 - }, - { - year: 1995, - source: 'CoE 6', - population: 619870 - }, - { - year: 1994, - source: 'CoE 6', - population: 623435 - }, - { - census_year: true, - year: 1993, - source: 'CoE', - population: 626999 - }, - { - census_year: true, - year: 1992, - source: 'CoE', - population: 618195 - }, - { - census_year: true, - year: 1990, - source: 'CoE', - population: 605538 - }, - { - census_year: true, - year: 1989, - source: 'CoE', - population: 583872 - }, - { - year: 1988, - source: 'CoE', - population: 580061 - }, - { - census_year: true, - year: 1987, - source: 'CoE', - population: 576249 - }, - { - year: 1985, - source: 'CoE 6', - population: 567699 - }, - { - year: 1984, - source: 'CoE 6', - population: 563892 - }, - { - census_year: true, - year: 1983, - source: 'CoE', - population: 560085 - }, - { - census_year: true, - year: 1982, - source: 'CoE 1', - population: 551314 - }, - { - census_year: true, - year: 1980, - source: 'CoE', - population: 505773 - }, - { - census_year: true, - year: 1979, - source: 'CoE', - population: 491359 - }, - { - census_year: true, - year: 1978, - source: 'CoE', - population: 478066 - }, - { - census_year: true, - year: 1977, - source: 'CoE', - population: 471474 - }, - { - census_year: true, - year: 1975, - source: 'CoE', - population: 451635 - }, - { - census_year: true, - year: 1974, - source: 'CoE', - population: 445691 - }, - { - census_year: true, - year: 1973, - source: 'CoE', - population: 442365 - }, - { - census_year: true, - year: 1972, - source: 'CoE', - population: 441530 - }, - { - census_year: true, - year: 1970, - source: 'CoE', - population: 429750 - }, - { - census_year: true, - year: 1969, - source: 'CoE', - population: 422418 - }, - { - census_year: true, - year: 1968, - source: 'CoE', - population: 410105 - }, - { - census_year: true, - year: 1967, - source: 'CoE', - population: 393593 - }, - { - census_year: true, - year: 1965, - source: 'CoE', - population: 371265 - }, - { - census_year: true, - year: 1964, - source: 'CoE 2', - population: 311804 - }, - { - census_year: true, - year: 1963, - source: 'CoE', - population: 303756 - }, - { - census_year: true, - year: 1962, - source: 'CoE', - population: 294967 - }, - { - census_year: true, - year: 1960, - source: 'CoE', - population: 269314 - }, - { - census_year: true, - year: 1959, - source: 'CoE', - population: 260733 - }, - { - census_year: true, - year: 1958, - source: 'CoE', - population: 252131 - }, - { - census_year: true, - year: 1957, - source: 'CoE', - population: 238353 - }, - { - census_year: true, - year: 1955, - source: 'CoE', - population: 209353 - }, - { - census_year: true, - year: 1954, - source: 'CoE', - population: 197836 - }, - { - census_year: true, - year: 1953, - source: 'CoE', - population: 183411 - }, - { - census_year: true, - year: 1952, - source: 'CoE', - population: 169196 - }, - { - census_year: true, - year: 1950, - source: 'CoE', - population: 148861 - }, - { - census_year: true, - year: 1949, - source: 'CoE', - population: 137469 - }, - { - census_year: true, - year: 1948, - source: 'CoE', - population: 126609 - }, - { - census_year: true, - year: 1947, - source: 'CoE', - population: 118541 - }, - { - census_year: true, - year: 1946, - source: 'CoE', - population: 114976 - }, - { - census_year: true, - year: 1945, - source: 'CoE', - population: 111745 - }, - { - census_year: true, - year: 1944, - source: 'CoE', - population: 108416 - }, - { - census_year: true, - year: 1943, - source: 'CoE', - population: 105536 - }, - { - census_year: true, - year: 1942, - source: 'CoE', - population: 96725 - }, - { - census_year: true, - year: 1940, - source: 'CoE', - population: 91723 - }, - { - census_year: true, - year: 1939, - source: 'CoE', - population: 90419 - }, - { - census_year: true, - year: 1938, - source: 'CoE', - population: 88887 - }, - { - census_year: true, - year: 1937, - source: 'CoE', - population: 87034 - }, - { - census_year: true, - year: 1936, - source: 'CoE', - population: 85470 - }, - { - census_year: true, - year: 1935, - source: 'CoE', - population: 82634 - }, - { - census_year: true, - year: 1934, - source: 'CoE', - population: 79773 - }, - { - census_year: true, - year: 1933, - source: 'CoE', - population: 79231 - }, - { - census_year: true, - year: 1932, - source: 'CoE', - population: 78387 - }, - { - census_year: true, - year: 1930, - source: 'CoE', - population: 77557 - }, - { - census_year: true, - year: 1929, - source: 'CoE', - population: 74298 - }, - { - census_year: true, - year: 1928, - source: 'CoE', - population: 69744 - }, - { - census_year: true, - year: 1927, - source: 'CoE', - population: 67083 - }, - { - census_year: true, - year: 1926, - source: 'CoE', - population: 65163 - }, - { - census_year: true, - year: 1925, - source: 'CoE', - population: 65378 - }, - { - census_year: true, - year: 1924, - source: 'CoE', - population: 63160 - }, - { - census_year: true, - year: 1923, - source: 'CoE*', - population: 60000 - }, - { - census_year: true, - year: 1922, - source: 'CoE*', - population: 60000 - }, - { - census_year: true, - year: 1920, - source: 'CoE', - population: 61045 - }, - { - census_year: true, - year: 1919, - source: 'CoE*', - population: 60000 - }, - { - census_year: true, - year: 1918, - source: 'CoE*', - population: 53000 - }, - { - census_year: true, - year: 1917, - source: 'CoE* 4', - population: 51000 - }, - { - census_year: true, - year: 1916, - source: 'CoE', - population: 53846 - }, - { - census_year: true, - year: 1915, - source: 'CoE', - population: 59339 - }, - { - census_year: true, - year: 1914, - source: 'CoE', - population: 72516 - }, - { - census_year: true, - year: 1913, - source: 'CoE', - population: 67243 - }, - { - census_year: true, - year: 1912, - source: 'CoE 5', - population: 53611 - }, - { - year: 1910, - source: 'CoE 6', - population: 23950 - }, - { - census_year: true, - year: 1909, - source: 'CoE*', - population: 23000 - }, - { - census_year: true, - year: 1908, - source: 'CoE', - population: 18500 - }, - { - year: 1907, - source: 'CoE 6', - population: 16294 - }, - { - census_year: true, - year: 1906, - source: 'CoE', - population: 14088 - }, - { - year: 1905, - source: 'CoE 6', - population: 11219 - }, - { - census_year: true, - year: 1904, - source: 'CoE', - population: 8350 - }, - { - census_year: true, - year: 1903, - source: 'CoE', - population: 6995 - }, - { - year: 1902, - source: 'CoE 6', - population: 4811 - }, - { - year: 1900, - source: 'CoE 6', - population: 2419 - }, - { - census_year: true, - year: 1899, - source: 'CoE', - population: 2212 - }, - { - year: 1898, - source: 'CoE 6', - population: 2212 - }, - { - census_year: true, - year: 1897, - source: 'CoE', - population: 2212 - }, - { - year: 1896, - source: 'CoE 6', - population: 1689 - }, - { - census_year: true, - year: 1895, - source: 'CoE', - population: 1165 - }, - { - year: 1894, - source: 'CoE 6', - population: 1010 - }, - { - year: 1893, - source: 'CoE 6', - population: 855 - }, - { - census_year: true, - year: 1892, - source: 'CoE', - population: 700 - }, - { - year: 1891, - source: 'CoE 6', - population: 630 - }, - { - year: 1890, - source: 'CoE 6', - population: 560 - }, - { - year: 1889, - source: 'CoE 6', - population: 490 - }, - { - year: 1888, - source: 'CoE 6', - population: 420 - }, - { - census_year: true, - year: 1887, - source: 'CoE*', - population: 350 - }, - { - year: 1886, - source: 'CoE', - population: 307 - }, - { - census_year: true, - year: 1885, - source: 'CoE', - population: 263 - }, - { - year: 1884, - source: 'CoE 6', - population: 247 - }, - { - year: 1883, - source: 'CoE 6', - population: 230 - }, - { - year: 1882, - source: 'CoE 6', - population: 214 - }, - { - year: 1881, - source: 'CoE 6', - population: 197 - }, - { - year: 1880, - source: 'CoE 6', - population: 181 - }, - { - year: 1879, - source: 'CoE 6', - population: 164 - }, - { - census_year: true, - year: 1878, - source: 'CoE', - population: 148 - } - ].reverse() } - }; + ], + point: { + style: { + visible: false + } + }, + line: { + style: { + lineWidth: 2 + } + }, + title: { + text: 'Population History - Line Chart', + textStyle: { + lineWidth: 3, + fill: '#333', + fontSize: 20, + fontFamily: 'Times New Roman' + } + }, + data: { + id: 'data2', + values: [ + { + census_year: true, + year: 2016, + source: 'CoE', + population: 899447 + }, + { + census_year: true, + year: 2014, + source: 'CoE', + population: 877926 + }, + { + year: 2013, + source: 'CoE 6', + population: 847712 + }, + { + census_year: true, + year: 2012, + source: 'CoE', + population: 817498 + }, + { + year: 2010, + source: 'CoE 6', + population: 797320 + }, + { + census_year: true, + year: 2009, + source: 'CoE', + population: 782439 + }, + { + census_year: true, + year: 2008, + source: 'CoE', + population: 752412 + }, + { + year: 2007, + source: 'CoE 6', + population: 741392 + }, + { + census_year: true, + year: 2005, + source: 'CoE', + population: 712391 + }, + { + year: 2004, + source: 'CoE 6', + population: 698631 + }, + { + year: 2003, + source: 'CoE 6', + population: 684871 + }, + { + year: 2002, + source: 'CoE 6', + population: 671110 + }, + { + year: 2000, + source: 'CoE 6', + population: 652817 + }, + { + census_year: true, + year: 1999, + source: 'CoE', + population: 648284 + }, + { + year: 1998, + source: 'CoE 6', + population: 637625 + }, + { + year: 1997, + source: 'CoE 6', + population: 626965 + }, + { + year: 1995, + source: 'CoE 6', + population: 619870 + }, + { + year: 1994, + source: 'CoE 6', + population: 623435 + }, + { + census_year: true, + year: 1993, + source: 'CoE', + population: 626999 + }, + { + census_year: true, + year: 1992, + source: 'CoE', + population: 618195 + }, + { + census_year: true, + year: 1990, + source: 'CoE', + population: 605538 + }, + { + census_year: true, + year: 1989, + source: 'CoE', + population: 583872 + }, + { + year: 1988, + source: 'CoE', + population: 580061 + }, + { + census_year: true, + year: 1987, + source: 'CoE', + population: 576249 + }, + { + year: 1985, + source: 'CoE 6', + population: 567699 + }, + { + year: 1984, + source: 'CoE 6', + population: 563892 + }, + { + census_year: true, + year: 1983, + source: 'CoE', + population: 560085 + }, + { + census_year: true, + year: 1982, + source: 'CoE 1', + population: 551314 + }, + { + census_year: true, + year: 1980, + source: 'CoE', + population: 505773 + }, + { + census_year: true, + year: 1979, + source: 'CoE', + population: 491359 + }, + { + census_year: true, + year: 1978, + source: 'CoE', + population: 478066 + }, + { + census_year: true, + year: 1977, + source: 'CoE', + population: 471474 + }, + { + census_year: true, + year: 1975, + source: 'CoE', + population: 451635 + }, + { + census_year: true, + year: 1974, + source: 'CoE', + population: 445691 + }, + { + census_year: true, + year: 1973, + source: 'CoE', + population: 442365 + }, + { + census_year: true, + year: 1972, + source: 'CoE', + population: 441530 + }, + { + census_year: true, + year: 1970, + source: 'CoE', + population: 429750 + }, + { + census_year: true, + year: 1969, + source: 'CoE', + population: 422418 + }, + { + census_year: true, + year: 1968, + source: 'CoE', + population: 410105 + }, + { + census_year: true, + year: 1967, + source: 'CoE', + population: 393593 + }, + { + census_year: true, + year: 1965, + source: 'CoE', + population: 371265 + }, + { + census_year: true, + year: 1964, + source: 'CoE 2', + population: 311804 + }, + { + census_year: true, + year: 1963, + source: 'CoE', + population: 303756 + }, + { + census_year: true, + year: 1962, + source: 'CoE', + population: 294967 + }, + { + census_year: true, + year: 1960, + source: 'CoE', + population: 269314 + }, + { + census_year: true, + year: 1959, + source: 'CoE', + population: 260733 + }, + { + census_year: true, + year: 1958, + source: 'CoE', + population: 252131 + }, + { + census_year: true, + year: 1957, + source: 'CoE', + population: 238353 + }, + { + census_year: true, + year: 1955, + source: 'CoE', + population: 209353 + }, + { + census_year: true, + year: 1954, + source: 'CoE', + population: 197836 + }, + { + census_year: true, + year: 1953, + source: 'CoE', + population: 183411 + }, + { + census_year: true, + year: 1952, + source: 'CoE', + population: 169196 + }, + { + census_year: true, + year: 1950, + source: 'CoE', + population: 148861 + }, + { + census_year: true, + year: 1949, + source: 'CoE', + population: 137469 + }, + { + census_year: true, + year: 1948, + source: 'CoE', + population: 126609 + }, + { + census_year: true, + year: 1947, + source: 'CoE', + population: 118541 + }, + { + census_year: true, + year: 1946, + source: 'CoE', + population: 114976 + }, + { + census_year: true, + year: 1945, + source: 'CoE', + population: 111745 + }, + { + census_year: true, + year: 1944, + source: 'CoE', + population: 108416 + }, + { + census_year: true, + year: 1943, + source: 'CoE', + population: 105536 + }, + { + census_year: true, + year: 1942, + source: 'CoE', + population: 96725 + }, + { + census_year: true, + year: 1940, + source: 'CoE', + population: 91723 + }, + { + census_year: true, + year: 1939, + source: 'CoE', + population: 90419 + }, + { + census_year: true, + year: 1938, + source: 'CoE', + population: 88887 + }, + { + census_year: true, + year: 1937, + source: 'CoE', + population: 87034 + }, + { + census_year: true, + year: 1936, + source: 'CoE', + population: 85470 + }, + { + census_year: true, + year: 1935, + source: 'CoE', + population: 82634 + }, + { + census_year: true, + year: 1934, + source: 'CoE', + population: 79773 + }, + { + census_year: true, + year: 1933, + source: 'CoE', + population: 79231 + }, + { + census_year: true, + year: 1932, + source: 'CoE', + population: 78387 + }, + { + census_year: true, + year: 1930, + source: 'CoE', + population: 77557 + }, + { + census_year: true, + year: 1929, + source: 'CoE', + population: 74298 + }, + { + census_year: true, + year: 1928, + source: 'CoE', + population: 69744 + }, + { + census_year: true, + year: 1927, + source: 'CoE', + population: 67083 + }, + { + census_year: true, + year: 1926, + source: 'CoE', + population: 65163 + }, + { + census_year: true, + year: 1925, + source: 'CoE', + population: 65378 + }, + { + census_year: true, + year: 1924, + source: 'CoE', + population: 63160 + }, + { + census_year: true, + year: 1923, + source: 'CoE*', + population: 60000 + }, + { + census_year: true, + year: 1922, + source: 'CoE*', + population: 60000 + }, + { + census_year: true, + year: 1920, + source: 'CoE', + population: 61045 + }, + { + census_year: true, + year: 1919, + source: 'CoE*', + population: 60000 + }, + { + census_year: true, + year: 1918, + source: 'CoE*', + population: 53000 + }, + { + census_year: true, + year: 1917, + source: 'CoE* 4', + population: 51000 + }, + { + census_year: true, + year: 1916, + source: 'CoE', + population: 53846 + }, + { + census_year: true, + year: 1915, + source: 'CoE', + population: 59339 + }, + { + census_year: true, + year: 1914, + source: 'CoE', + population: 72516 + }, + { + census_year: true, + year: 1913, + source: 'CoE', + population: 67243 + }, + { + census_year: true, + year: 1912, + source: 'CoE 5', + population: 53611 + }, + { + year: 1910, + source: 'CoE 6', + population: 23950 + }, + { + census_year: true, + year: 1909, + source: 'CoE*', + population: 23000 + }, + { + census_year: true, + year: 1908, + source: 'CoE', + population: 18500 + }, + { + year: 1907, + source: 'CoE 6', + population: 16294 + }, + { + census_year: true, + year: 1906, + source: 'CoE', + population: 14088 + }, + { + year: 1905, + source: 'CoE 6', + population: 11219 + }, + { + census_year: true, + year: 1904, + source: 'CoE', + population: 8350 + }, + { + census_year: true, + year: 1903, + source: 'CoE', + population: 6995 + }, + { + year: 1902, + source: 'CoE 6', + population: 4811 + }, + { + year: 1900, + source: 'CoE 6', + population: 2419 + }, + { + census_year: true, + year: 1899, + source: 'CoE', + population: 2212 + }, + { + year: 1898, + source: 'CoE 6', + population: 2212 + }, + { + census_year: true, + year: 1897, + source: 'CoE', + population: 2212 + }, + { + year: 1896, + source: 'CoE 6', + population: 1689 + }, + { + census_year: true, + year: 1895, + source: 'CoE', + population: 1165 + }, + { + year: 1894, + source: 'CoE 6', + population: 1010 + }, + { + year: 1893, + source: 'CoE 6', + population: 855 + }, + { + census_year: true, + year: 1892, + source: 'CoE', + population: 700 + }, + { + year: 1891, + source: 'CoE 6', + population: 630 + }, + { + year: 1890, + source: 'CoE 6', + population: 560 + }, + { + year: 1889, + source: 'CoE 6', + population: 490 + }, + { + year: 1888, + source: 'CoE 6', + population: 420 + }, + { + census_year: true, + year: 1887, + source: 'CoE*', + population: 350 + }, + { + year: 1886, + source: 'CoE', + population: 307 + }, + { + census_year: true, + year: 1885, + source: 'CoE', + population: 263 + }, + { + year: 1884, + source: 'CoE 6', + population: 247 + }, + { + year: 1883, + source: 'CoE 6', + population: 230 + }, + { + year: 1882, + source: 'CoE 6', + population: 214 + }, + { + year: 1881, + source: 'CoE 6', + population: 197 + }, + { + year: 1880, + source: 'CoE 6', + population: 181 + }, + { + year: 1879, + source: 'CoE 6', + population: 164 + }, + { + census_year: true, + year: 1878, + source: 'CoE', + population: 148 + } + ].reverse() + } +}; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); diff --git a/docs/assets/examples/en/marker/mark-point-image.md b/docs/assets/examples/en/marker/mark-point-image.md index bbd760268a..9dc7389a88 100644 --- a/docs/assets/examples/en/marker/mark-point-image.md +++ b/docs/assets/examples/en/marker/mark-point-image.md @@ -57,12 +57,10 @@ const spec = { }, itemContent: { type: 'image', - image: { - style: { - dx: -50, - dy: 50, - image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/airplane.png' - } + style: { + dx: -50, + dy: 50, + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/airplane.png' } } } diff --git a/docs/assets/examples/en/marker/polar-mark-point.md b/docs/assets/examples/en/marker/polar-mark-point.md index 88de4af8b8..51fc09b7b7 100644 --- a/docs/assets/examples/en/marker/polar-mark-point.md +++ b/docs/assets/examples/en/marker/polar-mark-point.md @@ -18,289 +18,289 @@ option: roseChart#markPoint ## Demo source ```javascript livedemo - const spec = { - data: [ - { - id: 'id0', - values: [ - { type: 'MIDNIGHT', value: 1 }, - { type: '1 AM', value: 1 }, - { type: '2 AM', value: 1 }, - { type: '3 AM', value: 1 }, - { type: '4 AM', value: 1 }, - { type: '5 AM', value: 1 }, - { type: '6 AM', value: 1 }, - { type: '7 AM', value: 1 }, - { type: '8 AM', value: 1 }, - { type: '9 AM', value: 1 }, - { type: '10 AM', value: 1 }, - { type: '11 AM', value: 1 }, - { type: 'NOON', value: 1 }, - { type: '13 AM', value: 1 }, - { type: '14 AM', value: 1 }, - { type: '15 AM', value: 1 }, - { type: '16 AM', value: 1 }, - { type: '17 AM', value: 1 }, - { type: '18 AM', value: 1 }, - { type: '19 AM', value: 1 }, - { type: '20 AM', value: 1 }, - { type: '21 AM', value: 1 }, - { type: '22 AM', value: 1 }, - { type: '23 AM', value: 1 }, - ] - }, - { - id: 'id1', - values: [ - { type: 'a', value: 1 } - ] - } - ], - dataIndex: 0, - type: 'rose', - outerRadius: 0.7, - innerRadius: 0.5, - valueField: 'value', - categoryField: 'type', - seriesField: 'type', - startAngle: -97.5, - title: { - text: 'History of Earth in 24-hour clock', - textStyle: { - height: 50, - lineWidth: 2, - fill: '#333', - fontSize: 20, - fontFamily: 'Times New Roman' - }, - subtextStyle: { - character: [ - { - text: '', - fontFamily: 'Times New Roman', - fontSize: 14, - fill: '#333' - } - ] - } +const spec = { + data: [ + { + id: 'id0', + values: [ + { type: 'MIDNIGHT', value: 1 }, + { type: '1 AM', value: 1 }, + { type: '2 AM', value: 1 }, + { type: '3 AM', value: 1 }, + { type: '4 AM', value: 1 }, + { type: '5 AM', value: 1 }, + { type: '6 AM', value: 1 }, + { type: '7 AM', value: 1 }, + { type: '8 AM', value: 1 }, + { type: '9 AM', value: 1 }, + { type: '10 AM', value: 1 }, + { type: '11 AM', value: 1 }, + { type: 'NOON', value: 1 }, + { type: '13 AM', value: 1 }, + { type: '14 AM', value: 1 }, + { type: '15 AM', value: 1 }, + { type: '16 AM', value: 1 }, + { type: '17 AM', value: 1 }, + { type: '18 AM', value: 1 }, + { type: '19 AM', value: 1 }, + { type: '20 AM', value: 1 }, + { type: '21 AM', value: 1 }, + { type: '22 AM', value: 1 }, + { type: '23 AM', value: 1 } + ] + }, + { + id: 'id1', + values: [{ type: 'a', value: 1 }] + } + ], + dataIndex: 0, + type: 'rose', + outerRadius: 0.7, + innerRadius: 0.5, + valueField: 'value', + categoryField: 'type', + seriesField: 'type', + startAngle: -97.5, + title: { + text: 'History of Earth in 24-hour clock', + textStyle: { + height: 50, + lineWidth: 2, + fill: '#333', + fontSize: 20, + fontFamily: 'Times New Roman' + }, + subtextStyle: { + character: [ + { + text: '', + fontFamily: 'Times New Roman', + fontSize: 14, + fill: '#333' + } + ] + } + }, + axes: [ + { + orient: 'angle', + type: 'band', + zIndex: 999, + tick: { + visible: true, + tickSize: 10, + inside: true, + style: { + stroke: '#fff' + // lineWidth: 2, + } + }, + label: { + visible: true, + inside: true, + style: { + fill: '#fff' + } + }, + grid: { + visible: true, + style: { + lineDash: [0], + stroke: '#fff', + lineWidth: 1 }, - axes: [{ - orient: 'angle', - type: 'band', - zIndex: 999, - tick: { - visible: true, - tickSize: 10, - inside: true, - style: { - stroke: '#fff', - // lineWidth: 2, - } - }, - label: { - visible: true, - inside: true, - style: { - fill: '#fff' - } - }, - grid: { - visible: true, - style: { - lineDash: [0], - stroke: '#fff', - lineWidth: 1 - }, - alignWithLabel: false // grid does not align with label - }, - style: { - zIndex: 400, - } - }], - label: { - visible: false, - position: 'inside' - - }, - tooltip: { - visible: false - }, - rose: { - style: { - fill: 'rgb(129, 216, 208)' - } - }, - markLine: [{ - radius: 1.1, - angle: 'MIDNIGHT', - angle1: '3 AM' - }, { - radius: 1.1, - angle: '6 AM', - angle1: '13 AM' - }], - markPoint: [ - { - position: { - x: '50%', - y: '50%' - }, - regionRelative: true, - itemLine: { - visible: false - }, - itemContent: { - type: 'symbol', - symbol: { - style: { - dx: -80, - dy: -40, - size: 60, - symbolType: '', - fill: 'rgb(129, 216, 208)' - } - } - } - }, { - angle: '4 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: 5, - offsetY: -20, - text: { - text: '4: 00 Origin of life' - } - } - }, { - angle: '5 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: 5, - offsetY: -20, - text: { - text: '5: 00 Oldest Fossils' - } - } - }, { - angle: '14 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: 20, - text: { - text: 'Single-Celled Algae(Acritarchs)', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '18 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Sexual Reproduction', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '20 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Seaweeds', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '21 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Trilobites', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '22 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Coal Swamps', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '23 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Humans', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '2 AM', - radius: 1.1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: 10, - offsetY: -20, - text: { - text: 'Meteorite Bombardment 0:00 to 3 am' - } - } - }, { - angle: '10 AM', - radius: 1.1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: 10, - offsetY: 20, - text: { - text: '6:00 to 1: Abundant Banded Iron- Formations' - } - } - }], - }; + alignWithLabel: false // grid does not align with label + }, + style: { + zIndex: 400 + } + } + ], + label: { + visible: false, + position: 'inside' + }, + tooltip: { + visible: false + }, + rose: { + style: { + fill: 'rgb(129, 216, 208)' + } + }, + markLine: [ + { + radius: 1.1, + angle: 'MIDNIGHT', + angle1: '3 AM' + }, + { + radius: 1.1, + angle: '6 AM', + angle1: '13 AM' + } + ], + markPoint: [ + { + position: { + x: '50%', + y: '50%' + }, + regionRelative: true, + itemLine: { + visible: false + }, + itemContent: { + type: 'symbol', + style: { + dx: -80, + dy: -40, + size: 60, + symbolType: + '', + fill: 'rgb(129, 216, 208)' + } + } + }, + { + angle: '4 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: 5, + offsetY: -20, + style: { + text: '4: 00 Origin of life' + } + } + }, + { + angle: '5 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: 5, + offsetY: -20, + style: { + text: '5: 00 Oldest Fossils' + } + } + }, + { + angle: '14 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: 20, + style: { + text: 'Single-Celled Algae(Acritarchs)', + textAlign: 'right' + } + } + }, + { + angle: '18 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Sexual Reproduction', + textAlign: 'right' + } + } + }, + { + angle: '20 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Seaweeds', + textAlign: 'right' + } + } + }, + { + angle: '21 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Trilobites', + textAlign: 'right' + } + } + }, + { + angle: '22 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Coal Swamps', + textAlign: 'right' + } + } + }, + { + angle: '23 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Humans', + textAlign: 'right' + } + } + }, + { + angle: '2 AM', + radius: 1.1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: 10, + offsetY: -20, + style: { + text: 'Meteorite Bombardment 0:00 to 3 am' + } + } + }, + { + angle: '10 AM', + radius: 1.1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: 10, + offsetY: 20, + style: { + text: '6:00 to 1: Abundant Banded Iron- Formations' + } + } + } + ] +}; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); diff --git a/docs/assets/examples/en/vscreen/gauge.md b/docs/assets/examples/en/vscreen/gauge.md index 3a0778c8c9..1dec9bff9b 100644 --- a/docs/assets/examples/en/vscreen/gauge.md +++ b/docs/assets/examples/en/vscreen/gauge.md @@ -134,50 +134,49 @@ const spec = { itemContent: { type: 'richText', autoRotate: false, - richText: { - style: { - width: 40000, - height: 40000, - textAlign: 'left', - textBaseline: 'top', - type: 'rich', - textConfig: [ - { - visible: false, - text: '\n', - fontSize: 12, - fill: '#FFF', - fontWeight: 'normal', - fontFamily: 'D-DIN', - textAlign: 'center', - textBaseline: 'middle' - }, - { - visible: true, - text: 'Profit', - fontSize: 16, - fill: '#FFF', - fontWeight: 'normal', - fontFamily: 'D-DIN', - textAlign: 'center', - textBaseline: 'middle' - }, - { - text: ' ', - fontSize: 8 - }, - { - visible: true, - text: '341.80', - fontSize: 32, - fill: '#FFF', - fontWeight: 'bold', - fontFamily: 'D-DIN', - textAlign: 'center', - textBaseline: 'middle' - } - ] - } + + style: { + width: 40000, + height: 40000, + textAlign: 'left', + textBaseline: 'top', + type: 'rich', + textConfig: [ + { + visible: false, + text: '\n', + fontSize: 12, + fill: '#FFF', + fontWeight: 'normal', + fontFamily: 'D-DIN', + textAlign: 'center', + textBaseline: 'middle' + }, + { + visible: true, + text: 'Profit', + fontSize: 16, + fill: '#FFF', + fontWeight: 'normal', + fontFamily: 'D-DIN', + textAlign: 'center', + textBaseline: 'middle' + }, + { + text: ' ', + fontSize: 8 + }, + { + visible: true, + text: '341.80', + fontSize: 32, + fill: '#FFF', + fontWeight: 'bold', + fontFamily: 'D-DIN', + textAlign: 'center', + textBaseline: 'middle' + } + ] } } } diff --git a/docs/assets/examples/zh/area-chart/segment-range-area.md b/docs/assets/examples/zh/area-chart/segment-range-area.md index 29f4dc408f..3799aea2aa 100644 --- a/docs/assets/examples/zh/area-chart/segment-range-area.md +++ b/docs/assets/examples/zh/area-chart/segment-range-area.md @@ -97,15 +97,13 @@ const spec = { itemContent: { type: 'text', autoRotate: false, - text: { + style: { text: 'BALANCE AGAINST', - style: { - fontSize: 14, - fontWeight: 'bold', - fill: 'rgba(0,0,0,0.45)', - textAlign: 'center', - textBaseline: 'middle' - } + fontSize: 14, + fontWeight: 'bold', + fill: 'rgba(0,0,0,0.45)', + textAlign: 'center', + textBaseline: 'middle' } }, itemLine: { @@ -121,15 +119,13 @@ const spec = { offsetX: -40, type: 'text', autoRotate: false, - text: { + style: { text: ['BALANCE in', 'FAVOUR of ENGLAND'], - style: { - fontSize: 14, - fontWeight: 'bold', - fill: 'rgba(0,0,0,0.45)', - textAlign: 'left', - textBaseline: 'middle' - } + fontSize: 14, + fontWeight: 'bold', + fill: 'rgba(0,0,0,0.45)', + textAlign: 'left', + textBaseline: 'middle' } }, itemLine: { diff --git a/docs/assets/examples/zh/bar-chart/bar-markPoint.md b/docs/assets/examples/zh/bar-chart/bar-markPoint.md index a86ac7a1ae..996c7b6ed9 100644 --- a/docs/assets/examples/zh/bar-chart/bar-markPoint.md +++ b/docs/assets/examples/zh/bar-chart/bar-markPoint.md @@ -83,12 +83,6 @@ const spec = { autoRotate: false, offsetY: -10, text: { - dy: 14, - text: '2分钟', - style: { - fill: 'white', - fontSize: 14 - }, labelBackground: { padding: [5, 10, 5, 10], style: { @@ -96,6 +90,12 @@ const spec = { cornerRadius: 5 } } + }, + style: { + dy: 14, + text: '2分钟', + fill: 'white', + fontSize: 14 } }, itemLine: { diff --git a/docs/assets/examples/zh/marker/geo-mark-point.md b/docs/assets/examples/zh/marker/geo-mark-point.md index 7158055058..748779289b 100644 --- a/docs/assets/examples/zh/marker/geo-mark-point.md +++ b/docs/assets/examples/zh/marker/geo-mark-point.md @@ -17,91 +17,91 @@ option: mapChart#markPoint ## 代码演示 ```javascript livedemo - const response1 = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/map-mark-point.json'); - const dataJson = await response1.json(); - const data = dataJson.features.map(d => d['properties']) - const minValue = Math.min(...data.map(d => d.scores)) - const maxValue = Math.max(...data.map(d => d.scores)) +const response1 = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/map-mark-point.json'); +const dataJson = await response1.json(); +const data = dataJson.features.map(d => d['properties']); +const minValue = Math.min(...data.map(d => d.scores)); +const maxValue = Math.max(...data.map(d => d.scores)); +const response2 = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/geojson/usa.json'); +const geojson = await response2.json(); +VChart.registerMap('usa', geojson); - const response2 = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/geojson/usa.json'); - const geojson = await response2.json(); - VChart.registerMap('usa', geojson); +function sizeScale(value, domain, range) { + const t = (value - domain[0]) / (domain[1] - domain[0]); + const newValue = (range[1] - range[0]) * t + range[0]; + return newValue; +} - function sizeScale(value, domain, range) { - const t = (value - domain[0]) / (domain[1] - domain[0]); - const newValue = (range[1] - range[0]) * t + range[0]; - return newValue; +const spec = { + type: 'map', + title: { + text: 'Opioid Overdose Rates (per 100,000) by Year: 2017' + }, + color: { + type: 'linear', + range: ['rgb(252,250,97)', 'rgb(252,150,134)', 'rgb(87,33,15)'] + }, + area: { + style: { + fill: { + field: 'scores', + scale: 'color', + changeDomain: 'replace' + } } - - const spec = { - type: 'map', - title: { - text: 'Opioid Overdose Rates (per 100,000) by Year: 2017', - }, - color: { - type: 'linear', - range: ['rgb(252,250,97)', 'rgb(252,150,134)', 'rgb(87,33,15)'] - }, - area: { - style: { - fill: { - field: 'scores', - scale: 'color', - changeDomain: 'replace' - } - } - }, - data: [ - { - values: data - } - ], - nameField: 'name', - valueField: 'scores', - nameProperty: 'name', - map: 'usa', - region: [ - { - roam: true, - projection: { - type: 'albersUsa' - } - } - ], - legends: [ - { - visible: true, - type: 'color', - field: 'scores', - orient: 'bottom', - position: 'start', - title: { - visible: true, - text: 'Population' - } - } - ], - markPoint: data.map(d => { - return { - areaName: d.name, - itemLine: { - visible: false, - }, - itemContent: { - type: 'symbol', - autoRotate: false, - offsetX: -10, - offsetY: -5, - symbolStyle: { - size: sizeScale(d.scores, [minValue, maxValue], [20, 40]), - fill: '#FF6347', - symbolType: '' - } - } - } - }) + }, + data: [ + { + values: data + } + ], + nameField: 'name', + valueField: 'scores', + nameProperty: 'name', + map: 'usa', + region: [ + { + roam: true, + projection: { + type: 'albersUsa' + } + } + ], + legends: [ + { + visible: true, + type: 'color', + field: 'scores', + orient: 'bottom', + position: 'start', + title: { + visible: true, + text: 'Population' + } + } + ], + markPoint: data.map(d => { + return { + areaName: d.name, + itemLine: { + visible: false + }, + itemContent: { + type: 'symbol', + autoRotate: false, + offsetX: -10, + offsetY: -5, + style: { + size: sizeScale(d.scores, [minValue, maxValue], [20, 40]), + fill: '#FF6347', + symbolType: + '' + } + } }; + }) +}; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); diff --git a/docs/assets/examples/zh/marker/mark-point-basic.md b/docs/assets/examples/zh/marker/mark-point-basic.md index 000523a183..01efb0c7bc 100644 --- a/docs/assets/examples/zh/marker/mark-point-basic.md +++ b/docs/assets/examples/zh/marker/mark-point-basic.md @@ -32,820 +32,820 @@ markArea 支持数据点 和 任意坐标定位方式, 此处展示数据点定 - `itemContent.autoRotate`属性声明为标注内容是否自动旋转至引导线平行的方向. - `itemContent.richText`属性声明为当`itemContent.type: richText`时, 标注内容的样式, 同理也可应用于其他标注内容类型. - `targetSymbol`声明为前置标记，用于标记数据点，突出标记点。 + ## 代码演示 ```javascript livedemo - const spec = { - type: 'line', - xField: 'year', - yField: 'population', - axes: [ - { - orient: 'bottom', - type: 'linear', - min: 1868, - max: 2016 - } - ], - markPoint: [ - { - coordinate: { - year: '1878', - population: 100 - }, - itemContent: { - offsetY: -100, - offsetX: 100, - type: 'text', - autoRotate: false, - confine: true, - text: { - text: '1878 population was 148', +const spec = { + type: 'line', + xField: 'year', + yField: 'population', + axes: [ + { + orient: 'bottom', + type: 'linear', + min: 1868, + max: 2016 + } + ], + markPoint: [ + { + coordinate: { + year: '1878', + population: 100 + }, + itemContent: { + offsetY: -100, + offsetX: 100, + type: 'text', + autoRotate: false, + confine: true, + style: { + text: '1878 population was 148' + } + }, + targetSymbol: { + visible: true + }, + itemLine: { + type: 'type-arc', + arcRatio: 0.4, + startSymbol: { + size: 10, + style: { + stroke: '#E8346D', + symbolType: 'triangle' } }, - targetSymbol: { - visible: true, - }, - itemLine: { - type: 'type-arc', - arcRatio: 0.4, - startSymbol: { - size: 10, - style: { - stroke: '#E8346D', - symbolType: 'triangle' - } - }, - line: { - style: { - stroke: '#E8346D' - } + line: { + style: { + stroke: '#E8346D' } } + } + }, + { + coordinate: { + year: '2016', + population: 899447 }, - { - coordinate: { - year: '2016', - population: 899447 - }, - itemContent: { - offsetY: 40, - // offsetX: -200, - type: 'richText', - autoRotate: false, - confine: true, - position: 'insideBottom', - richText: { - style: { - width: 100, - height: 50, - dx: 110, - dy: 10, - textConfig: [ - { - text: '2016\n', - fontWeight: 'bold', - fontSize: 13, - fill: '#E8346D', - fontFamily: 'Times New Roman' - }, - { - text: 'population was 899447', - fontSize: 10, - fill: '#E8346D', - fontFamily: 'Times New Roman' - } - ] + itemContent: { + offsetY: 40, + // offsetX: -200, + type: 'richText', + autoRotate: false, + confine: true, + position: 'insideBottom', + + style: { + width: 100, + height: 50, + dx: 110, + dy: 10, + textConfig: [ + { + text: '2016\n', + fontWeight: 'bold', + fontSize: 13, + fill: '#E8346D', + fontFamily: 'Times New Roman' + }, + { + text: 'population was 899447', + fontSize: 10, + fill: '#E8346D', + fontFamily: 'Times New Roman' } + ] + } + }, + itemLine: { + type: 'type-do', + startSymbol: { + size: 24, + style: { + stroke: '#E8346D' } }, - itemLine: { - type: 'type-do', - startSymbol: { - size: 24, - style: { - stroke: '#E8346D' - } - }, - line: { - style: { - stroke: '#E8346D' - } + line: { + style: { + stroke: '#E8346D' } } } - ], - point: { - style: { - visible: false - } - }, - line: { - style: { - lineWidth: 2 - } - }, - title: { - text: 'Population History - Line Chart', - textStyle: { - lineWidth: 3, - fill: '#333', - fontSize: 20, - fontFamily: 'Times New Roman' - } - }, - data: { - id: 'data2', - values: [ - { - census_year: true, - year: 2016, - source: 'CoE', - population: 899447 - }, - { - census_year: true, - year: 2014, - source: 'CoE', - population: 877926 - }, - { - year: 2013, - source: 'CoE 6', - population: 847712 - }, - { - census_year: true, - year: 2012, - source: 'CoE', - population: 817498 - }, - { - year: 2010, - source: 'CoE 6', - population: 797320 - }, - { - census_year: true, - year: 2009, - source: 'CoE', - population: 782439 - }, - { - census_year: true, - year: 2008, - source: 'CoE', - population: 752412 - }, - { - year: 2007, - source: 'CoE 6', - population: 741392 - }, - { - census_year: true, - year: 2005, - source: 'CoE', - population: 712391 - }, - { - year: 2004, - source: 'CoE 6', - population: 698631 - }, - { - year: 2003, - source: 'CoE 6', - population: 684871 - }, - { - year: 2002, - source: 'CoE 6', - population: 671110 - }, - { - year: 2000, - source: 'CoE 6', - population: 652817 - }, - { - census_year: true, - year: 1999, - source: 'CoE', - population: 648284 - }, - { - year: 1998, - source: 'CoE 6', - population: 637625 - }, - { - year: 1997, - source: 'CoE 6', - population: 626965 - }, - { - year: 1995, - source: 'CoE 6', - population: 619870 - }, - { - year: 1994, - source: 'CoE 6', - population: 623435 - }, - { - census_year: true, - year: 1993, - source: 'CoE', - population: 626999 - }, - { - census_year: true, - year: 1992, - source: 'CoE', - population: 618195 - }, - { - census_year: true, - year: 1990, - source: 'CoE', - population: 605538 - }, - { - census_year: true, - year: 1989, - source: 'CoE', - population: 583872 - }, - { - year: 1988, - source: 'CoE', - population: 580061 - }, - { - census_year: true, - year: 1987, - source: 'CoE', - population: 576249 - }, - { - year: 1985, - source: 'CoE 6', - population: 567699 - }, - { - year: 1984, - source: 'CoE 6', - population: 563892 - }, - { - census_year: true, - year: 1983, - source: 'CoE', - population: 560085 - }, - { - census_year: true, - year: 1982, - source: 'CoE 1', - population: 551314 - }, - { - census_year: true, - year: 1980, - source: 'CoE', - population: 505773 - }, - { - census_year: true, - year: 1979, - source: 'CoE', - population: 491359 - }, - { - census_year: true, - year: 1978, - source: 'CoE', - population: 478066 - }, - { - census_year: true, - year: 1977, - source: 'CoE', - population: 471474 - }, - { - census_year: true, - year: 1975, - source: 'CoE', - population: 451635 - }, - { - census_year: true, - year: 1974, - source: 'CoE', - population: 445691 - }, - { - census_year: true, - year: 1973, - source: 'CoE', - population: 442365 - }, - { - census_year: true, - year: 1972, - source: 'CoE', - population: 441530 - }, - { - census_year: true, - year: 1970, - source: 'CoE', - population: 429750 - }, - { - census_year: true, - year: 1969, - source: 'CoE', - population: 422418 - }, - { - census_year: true, - year: 1968, - source: 'CoE', - population: 410105 - }, - { - census_year: true, - year: 1967, - source: 'CoE', - population: 393593 - }, - { - census_year: true, - year: 1965, - source: 'CoE', - population: 371265 - }, - { - census_year: true, - year: 1964, - source: 'CoE 2', - population: 311804 - }, - { - census_year: true, - year: 1963, - source: 'CoE', - population: 303756 - }, - { - census_year: true, - year: 1962, - source: 'CoE', - population: 294967 - }, - { - census_year: true, - year: 1960, - source: 'CoE', - population: 269314 - }, - { - census_year: true, - year: 1959, - source: 'CoE', - population: 260733 - }, - { - census_year: true, - year: 1958, - source: 'CoE', - population: 252131 - }, - { - census_year: true, - year: 1957, - source: 'CoE', - population: 238353 - }, - { - census_year: true, - year: 1955, - source: 'CoE', - population: 209353 - }, - { - census_year: true, - year: 1954, - source: 'CoE', - population: 197836 - }, - { - census_year: true, - year: 1953, - source: 'CoE', - population: 183411 - }, - { - census_year: true, - year: 1952, - source: 'CoE', - population: 169196 - }, - { - census_year: true, - year: 1950, - source: 'CoE', - population: 148861 - }, - { - census_year: true, - year: 1949, - source: 'CoE', - population: 137469 - }, - { - census_year: true, - year: 1948, - source: 'CoE', - population: 126609 - }, - { - census_year: true, - year: 1947, - source: 'CoE', - population: 118541 - }, - { - census_year: true, - year: 1946, - source: 'CoE', - population: 114976 - }, - { - census_year: true, - year: 1945, - source: 'CoE', - population: 111745 - }, - { - census_year: true, - year: 1944, - source: 'CoE', - population: 108416 - }, - { - census_year: true, - year: 1943, - source: 'CoE', - population: 105536 - }, - { - census_year: true, - year: 1942, - source: 'CoE', - population: 96725 - }, - { - census_year: true, - year: 1940, - source: 'CoE', - population: 91723 - }, - { - census_year: true, - year: 1939, - source: 'CoE', - population: 90419 - }, - { - census_year: true, - year: 1938, - source: 'CoE', - population: 88887 - }, - { - census_year: true, - year: 1937, - source: 'CoE', - population: 87034 - }, - { - census_year: true, - year: 1936, - source: 'CoE', - population: 85470 - }, - { - census_year: true, - year: 1935, - source: 'CoE', - population: 82634 - }, - { - census_year: true, - year: 1934, - source: 'CoE', - population: 79773 - }, - { - census_year: true, - year: 1933, - source: 'CoE', - population: 79231 - }, - { - census_year: true, - year: 1932, - source: 'CoE', - population: 78387 - }, - { - census_year: true, - year: 1930, - source: 'CoE', - population: 77557 - }, - { - census_year: true, - year: 1929, - source: 'CoE', - population: 74298 - }, - { - census_year: true, - year: 1928, - source: 'CoE', - population: 69744 - }, - { - census_year: true, - year: 1927, - source: 'CoE', - population: 67083 - }, - { - census_year: true, - year: 1926, - source: 'CoE', - population: 65163 - }, - { - census_year: true, - year: 1925, - source: 'CoE', - population: 65378 - }, - { - census_year: true, - year: 1924, - source: 'CoE', - population: 63160 - }, - { - census_year: true, - year: 1923, - source: 'CoE*', - population: 60000 - }, - { - census_year: true, - year: 1922, - source: 'CoE*', - population: 60000 - }, - { - census_year: true, - year: 1920, - source: 'CoE', - population: 61045 - }, - { - census_year: true, - year: 1919, - source: 'CoE*', - population: 60000 - }, - { - census_year: true, - year: 1918, - source: 'CoE*', - population: 53000 - }, - { - census_year: true, - year: 1917, - source: 'CoE* 4', - population: 51000 - }, - { - census_year: true, - year: 1916, - source: 'CoE', - population: 53846 - }, - { - census_year: true, - year: 1915, - source: 'CoE', - population: 59339 - }, - { - census_year: true, - year: 1914, - source: 'CoE', - population: 72516 - }, - { - census_year: true, - year: 1913, - source: 'CoE', - population: 67243 - }, - { - census_year: true, - year: 1912, - source: 'CoE 5', - population: 53611 - }, - { - year: 1910, - source: 'CoE 6', - population: 23950 - }, - { - census_year: true, - year: 1909, - source: 'CoE*', - population: 23000 - }, - { - census_year: true, - year: 1908, - source: 'CoE', - population: 18500 - }, - { - year: 1907, - source: 'CoE 6', - population: 16294 - }, - { - census_year: true, - year: 1906, - source: 'CoE', - population: 14088 - }, - { - year: 1905, - source: 'CoE 6', - population: 11219 - }, - { - census_year: true, - year: 1904, - source: 'CoE', - population: 8350 - }, - { - census_year: true, - year: 1903, - source: 'CoE', - population: 6995 - }, - { - year: 1902, - source: 'CoE 6', - population: 4811 - }, - { - year: 1900, - source: 'CoE 6', - population: 2419 - }, - { - census_year: true, - year: 1899, - source: 'CoE', - population: 2212 - }, - { - year: 1898, - source: 'CoE 6', - population: 2212 - }, - { - census_year: true, - year: 1897, - source: 'CoE', - population: 2212 - }, - { - year: 1896, - source: 'CoE 6', - population: 1689 - }, - { - census_year: true, - year: 1895, - source: 'CoE', - population: 1165 - }, - { - year: 1894, - source: 'CoE 6', - population: 1010 - }, - { - year: 1893, - source: 'CoE 6', - population: 855 - }, - { - census_year: true, - year: 1892, - source: 'CoE', - population: 700 - }, - { - year: 1891, - source: 'CoE 6', - population: 630 - }, - { - year: 1890, - source: 'CoE 6', - population: 560 - }, - { - year: 1889, - source: 'CoE 6', - population: 490 - }, - { - year: 1888, - source: 'CoE 6', - population: 420 - }, - { - census_year: true, - year: 1887, - source: 'CoE*', - population: 350 - }, - { - year: 1886, - source: 'CoE', - population: 307 - }, - { - census_year: true, - year: 1885, - source: 'CoE', - population: 263 - }, - { - year: 1884, - source: 'CoE 6', - population: 247 - }, - { - year: 1883, - source: 'CoE 6', - population: 230 - }, - { - year: 1882, - source: 'CoE 6', - population: 214 - }, - { - year: 1881, - source: 'CoE 6', - population: 197 - }, - { - year: 1880, - source: 'CoE 6', - population: 181 - }, - { - year: 1879, - source: 'CoE 6', - population: 164 - }, - { - census_year: true, - year: 1878, - source: 'CoE', - population: 148 - } - ].reverse() } - }; + ], + point: { + style: { + visible: false + } + }, + line: { + style: { + lineWidth: 2 + } + }, + title: { + text: 'Population History - Line Chart', + textStyle: { + lineWidth: 3, + fill: '#333', + fontSize: 20, + fontFamily: 'Times New Roman' + } + }, + data: { + id: 'data2', + values: [ + { + census_year: true, + year: 2016, + source: 'CoE', + population: 899447 + }, + { + census_year: true, + year: 2014, + source: 'CoE', + population: 877926 + }, + { + year: 2013, + source: 'CoE 6', + population: 847712 + }, + { + census_year: true, + year: 2012, + source: 'CoE', + population: 817498 + }, + { + year: 2010, + source: 'CoE 6', + population: 797320 + }, + { + census_year: true, + year: 2009, + source: 'CoE', + population: 782439 + }, + { + census_year: true, + year: 2008, + source: 'CoE', + population: 752412 + }, + { + year: 2007, + source: 'CoE 6', + population: 741392 + }, + { + census_year: true, + year: 2005, + source: 'CoE', + population: 712391 + }, + { + year: 2004, + source: 'CoE 6', + population: 698631 + }, + { + year: 2003, + source: 'CoE 6', + population: 684871 + }, + { + year: 2002, + source: 'CoE 6', + population: 671110 + }, + { + year: 2000, + source: 'CoE 6', + population: 652817 + }, + { + census_year: true, + year: 1999, + source: 'CoE', + population: 648284 + }, + { + year: 1998, + source: 'CoE 6', + population: 637625 + }, + { + year: 1997, + source: 'CoE 6', + population: 626965 + }, + { + year: 1995, + source: 'CoE 6', + population: 619870 + }, + { + year: 1994, + source: 'CoE 6', + population: 623435 + }, + { + census_year: true, + year: 1993, + source: 'CoE', + population: 626999 + }, + { + census_year: true, + year: 1992, + source: 'CoE', + population: 618195 + }, + { + census_year: true, + year: 1990, + source: 'CoE', + population: 605538 + }, + { + census_year: true, + year: 1989, + source: 'CoE', + population: 583872 + }, + { + year: 1988, + source: 'CoE', + population: 580061 + }, + { + census_year: true, + year: 1987, + source: 'CoE', + population: 576249 + }, + { + year: 1985, + source: 'CoE 6', + population: 567699 + }, + { + year: 1984, + source: 'CoE 6', + population: 563892 + }, + { + census_year: true, + year: 1983, + source: 'CoE', + population: 560085 + }, + { + census_year: true, + year: 1982, + source: 'CoE 1', + population: 551314 + }, + { + census_year: true, + year: 1980, + source: 'CoE', + population: 505773 + }, + { + census_year: true, + year: 1979, + source: 'CoE', + population: 491359 + }, + { + census_year: true, + year: 1978, + source: 'CoE', + population: 478066 + }, + { + census_year: true, + year: 1977, + source: 'CoE', + population: 471474 + }, + { + census_year: true, + year: 1975, + source: 'CoE', + population: 451635 + }, + { + census_year: true, + year: 1974, + source: 'CoE', + population: 445691 + }, + { + census_year: true, + year: 1973, + source: 'CoE', + population: 442365 + }, + { + census_year: true, + year: 1972, + source: 'CoE', + population: 441530 + }, + { + census_year: true, + year: 1970, + source: 'CoE', + population: 429750 + }, + { + census_year: true, + year: 1969, + source: 'CoE', + population: 422418 + }, + { + census_year: true, + year: 1968, + source: 'CoE', + population: 410105 + }, + { + census_year: true, + year: 1967, + source: 'CoE', + population: 393593 + }, + { + census_year: true, + year: 1965, + source: 'CoE', + population: 371265 + }, + { + census_year: true, + year: 1964, + source: 'CoE 2', + population: 311804 + }, + { + census_year: true, + year: 1963, + source: 'CoE', + population: 303756 + }, + { + census_year: true, + year: 1962, + source: 'CoE', + population: 294967 + }, + { + census_year: true, + year: 1960, + source: 'CoE', + population: 269314 + }, + { + census_year: true, + year: 1959, + source: 'CoE', + population: 260733 + }, + { + census_year: true, + year: 1958, + source: 'CoE', + population: 252131 + }, + { + census_year: true, + year: 1957, + source: 'CoE', + population: 238353 + }, + { + census_year: true, + year: 1955, + source: 'CoE', + population: 209353 + }, + { + census_year: true, + year: 1954, + source: 'CoE', + population: 197836 + }, + { + census_year: true, + year: 1953, + source: 'CoE', + population: 183411 + }, + { + census_year: true, + year: 1952, + source: 'CoE', + population: 169196 + }, + { + census_year: true, + year: 1950, + source: 'CoE', + population: 148861 + }, + { + census_year: true, + year: 1949, + source: 'CoE', + population: 137469 + }, + { + census_year: true, + year: 1948, + source: 'CoE', + population: 126609 + }, + { + census_year: true, + year: 1947, + source: 'CoE', + population: 118541 + }, + { + census_year: true, + year: 1946, + source: 'CoE', + population: 114976 + }, + { + census_year: true, + year: 1945, + source: 'CoE', + population: 111745 + }, + { + census_year: true, + year: 1944, + source: 'CoE', + population: 108416 + }, + { + census_year: true, + year: 1943, + source: 'CoE', + population: 105536 + }, + { + census_year: true, + year: 1942, + source: 'CoE', + population: 96725 + }, + { + census_year: true, + year: 1940, + source: 'CoE', + population: 91723 + }, + { + census_year: true, + year: 1939, + source: 'CoE', + population: 90419 + }, + { + census_year: true, + year: 1938, + source: 'CoE', + population: 88887 + }, + { + census_year: true, + year: 1937, + source: 'CoE', + population: 87034 + }, + { + census_year: true, + year: 1936, + source: 'CoE', + population: 85470 + }, + { + census_year: true, + year: 1935, + source: 'CoE', + population: 82634 + }, + { + census_year: true, + year: 1934, + source: 'CoE', + population: 79773 + }, + { + census_year: true, + year: 1933, + source: 'CoE', + population: 79231 + }, + { + census_year: true, + year: 1932, + source: 'CoE', + population: 78387 + }, + { + census_year: true, + year: 1930, + source: 'CoE', + population: 77557 + }, + { + census_year: true, + year: 1929, + source: 'CoE', + population: 74298 + }, + { + census_year: true, + year: 1928, + source: 'CoE', + population: 69744 + }, + { + census_year: true, + year: 1927, + source: 'CoE', + population: 67083 + }, + { + census_year: true, + year: 1926, + source: 'CoE', + population: 65163 + }, + { + census_year: true, + year: 1925, + source: 'CoE', + population: 65378 + }, + { + census_year: true, + year: 1924, + source: 'CoE', + population: 63160 + }, + { + census_year: true, + year: 1923, + source: 'CoE*', + population: 60000 + }, + { + census_year: true, + year: 1922, + source: 'CoE*', + population: 60000 + }, + { + census_year: true, + year: 1920, + source: 'CoE', + population: 61045 + }, + { + census_year: true, + year: 1919, + source: 'CoE*', + population: 60000 + }, + { + census_year: true, + year: 1918, + source: 'CoE*', + population: 53000 + }, + { + census_year: true, + year: 1917, + source: 'CoE* 4', + population: 51000 + }, + { + census_year: true, + year: 1916, + source: 'CoE', + population: 53846 + }, + { + census_year: true, + year: 1915, + source: 'CoE', + population: 59339 + }, + { + census_year: true, + year: 1914, + source: 'CoE', + population: 72516 + }, + { + census_year: true, + year: 1913, + source: 'CoE', + population: 67243 + }, + { + census_year: true, + year: 1912, + source: 'CoE 5', + population: 53611 + }, + { + year: 1910, + source: 'CoE 6', + population: 23950 + }, + { + census_year: true, + year: 1909, + source: 'CoE*', + population: 23000 + }, + { + census_year: true, + year: 1908, + source: 'CoE', + population: 18500 + }, + { + year: 1907, + source: 'CoE 6', + population: 16294 + }, + { + census_year: true, + year: 1906, + source: 'CoE', + population: 14088 + }, + { + year: 1905, + source: 'CoE 6', + population: 11219 + }, + { + census_year: true, + year: 1904, + source: 'CoE', + population: 8350 + }, + { + census_year: true, + year: 1903, + source: 'CoE', + population: 6995 + }, + { + year: 1902, + source: 'CoE 6', + population: 4811 + }, + { + year: 1900, + source: 'CoE 6', + population: 2419 + }, + { + census_year: true, + year: 1899, + source: 'CoE', + population: 2212 + }, + { + year: 1898, + source: 'CoE 6', + population: 2212 + }, + { + census_year: true, + year: 1897, + source: 'CoE', + population: 2212 + }, + { + year: 1896, + source: 'CoE 6', + population: 1689 + }, + { + census_year: true, + year: 1895, + source: 'CoE', + population: 1165 + }, + { + year: 1894, + source: 'CoE 6', + population: 1010 + }, + { + year: 1893, + source: 'CoE 6', + population: 855 + }, + { + census_year: true, + year: 1892, + source: 'CoE', + population: 700 + }, + { + year: 1891, + source: 'CoE 6', + population: 630 + }, + { + year: 1890, + source: 'CoE 6', + population: 560 + }, + { + year: 1889, + source: 'CoE 6', + population: 490 + }, + { + year: 1888, + source: 'CoE 6', + population: 420 + }, + { + census_year: true, + year: 1887, + source: 'CoE*', + population: 350 + }, + { + year: 1886, + source: 'CoE', + population: 307 + }, + { + census_year: true, + year: 1885, + source: 'CoE', + population: 263 + }, + { + year: 1884, + source: 'CoE 6', + population: 247 + }, + { + year: 1883, + source: 'CoE 6', + population: 230 + }, + { + year: 1882, + source: 'CoE 6', + population: 214 + }, + { + year: 1881, + source: 'CoE 6', + population: 197 + }, + { + year: 1880, + source: 'CoE 6', + population: 181 + }, + { + year: 1879, + source: 'CoE 6', + population: 164 + }, + { + census_year: true, + year: 1878, + source: 'CoE', + population: 148 + } + ].reverse() + } +}; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); diff --git a/docs/assets/examples/zh/marker/mark-point-image.md b/docs/assets/examples/zh/marker/mark-point-image.md index 7671162d74..e86a19ed6b 100644 --- a/docs/assets/examples/zh/marker/mark-point-image.md +++ b/docs/assets/examples/zh/marker/mark-point-image.md @@ -57,12 +57,10 @@ const spec = { }, itemContent: { type: 'image', - image: { - style: { - dx: -50, - dy: 50, - image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/airplane.png' - } + style: { + dx: -50, + dy: 50, + image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/airplane.png' } } } diff --git a/docs/assets/examples/zh/marker/polar-mark-point.md b/docs/assets/examples/zh/marker/polar-mark-point.md index 69b07d2172..16b0de2e7f 100644 --- a/docs/assets/examples/zh/marker/polar-mark-point.md +++ b/docs/assets/examples/zh/marker/polar-mark-point.md @@ -18,289 +18,290 @@ option: roseChart#markPoint ## 代码演示 ```javascript livedemo - const spec = { - data: [ - { - id: 'id0', - values: [ - { type: 'MIDNIGHT', value: 1 }, - { type: '1 AM', value: 1 }, - { type: '2 AM', value: 1 }, - { type: '3 AM', value: 1 }, - { type: '4 AM', value: 1 }, - { type: '5 AM', value: 1 }, - { type: '6 AM', value: 1 }, - { type: '7 AM', value: 1 }, - { type: '8 AM', value: 1 }, - { type: '9 AM', value: 1 }, - { type: '10 AM', value: 1 }, - { type: '11 AM', value: 1 }, - { type: 'NOON', value: 1 }, - { type: '13 AM', value: 1 }, - { type: '14 AM', value: 1 }, - { type: '15 AM', value: 1 }, - { type: '16 AM', value: 1 }, - { type: '17 AM', value: 1 }, - { type: '18 AM', value: 1 }, - { type: '19 AM', value: 1 }, - { type: '20 AM', value: 1 }, - { type: '21 AM', value: 1 }, - { type: '22 AM', value: 1 }, - { type: '23 AM', value: 1 }, - ] - }, - { - id: 'id1', - values: [ - { type: 'a', value: 1 } - ] - } - ], - dataIndex: 0, - type: 'rose', - outerRadius: 0.7, - innerRadius: 0.5, - valueField: 'value', - categoryField: 'type', - seriesField: 'type', - startAngle: -97.5, - title: { - text: 'History of Earth in 24-hour clock', - textStyle: { - height: 50, - lineWidth: 2, - fill: '#333', - fontSize: 20, - fontFamily: 'Times New Roman' - }, - subtextStyle: { - character: [ - { - text: '', - fontFamily: 'Times New Roman', - fontSize: 14, - fill: '#333' - } - ] - } +const spec = { + data: [ + { + id: 'id0', + values: [ + { type: 'MIDNIGHT', value: 1 }, + { type: '1 AM', value: 1 }, + { type: '2 AM', value: 1 }, + { type: '3 AM', value: 1 }, + { type: '4 AM', value: 1 }, + { type: '5 AM', value: 1 }, + { type: '6 AM', value: 1 }, + { type: '7 AM', value: 1 }, + { type: '8 AM', value: 1 }, + { type: '9 AM', value: 1 }, + { type: '10 AM', value: 1 }, + { type: '11 AM', value: 1 }, + { type: 'NOON', value: 1 }, + { type: '13 AM', value: 1 }, + { type: '14 AM', value: 1 }, + { type: '15 AM', value: 1 }, + { type: '16 AM', value: 1 }, + { type: '17 AM', value: 1 }, + { type: '18 AM', value: 1 }, + { type: '19 AM', value: 1 }, + { type: '20 AM', value: 1 }, + { type: '21 AM', value: 1 }, + { type: '22 AM', value: 1 }, + { type: '23 AM', value: 1 } + ] + }, + { + id: 'id1', + values: [{ type: 'a', value: 1 }] + } + ], + dataIndex: 0, + type: 'rose', + outerRadius: 0.7, + innerRadius: 0.5, + valueField: 'value', + categoryField: 'type', + seriesField: 'type', + startAngle: -97.5, + title: { + text: 'History of Earth in 24-hour clock', + textStyle: { + height: 50, + lineWidth: 2, + fill: '#333', + fontSize: 20, + fontFamily: 'Times New Roman' + }, + subtextStyle: { + character: [ + { + text: '', + fontFamily: 'Times New Roman', + fontSize: 14, + fill: '#333' + } + ] + } + }, + axes: [ + { + orient: 'angle', + type: 'band', + zIndex: 999, + tick: { + visible: true, + tickSize: 10, + inside: true, + style: { + stroke: '#fff' + // lineWidth: 2, + } + }, + label: { + visible: true, + inside: true, + style: { + fill: '#fff' + } + }, + grid: { + visible: true, + style: { + lineDash: [0], + stroke: '#fff', + lineWidth: 1 }, - axes: [{ - orient: 'angle', - type: 'band', - zIndex: 999, - tick: { - visible: true, - tickSize: 10, - inside: true, - style: { - stroke: '#fff', - // lineWidth: 2, - } - }, - label: { - visible: true, - inside: true, - style: { - fill: '#fff' - } - }, - grid: { - visible: true, - style: { - lineDash: [0], - stroke: '#fff', - lineWidth: 1 - }, - alignWithLabel: false // grid does not align with label - }, - style: { - zIndex: 400, - } - }], - label: { - visible: false, - position: 'inside' + alignWithLabel: false // grid does not align with label + }, + style: { + zIndex: 400 + } + } + ], + label: { + visible: false, + position: 'inside' + }, + tooltip: { + visible: false + }, + rose: { + style: { + fill: 'rgb(129, 216, 208)' + } + }, + markLine: [ + { + radius: 1.1, + angle: 'MIDNIGHT', + angle1: '3 AM' + }, + { + radius: 1.1, + angle: '6 AM', + angle1: '13 AM' + } + ], + markPoint: [ + { + position: { + x: '50%', + y: '50%' + }, + regionRelative: true, + itemLine: { + visible: false + }, + itemContent: { + type: 'symbol', - }, - tooltip: { - visible: false - }, - rose: { - style: { - fill: 'rgb(129, 216, 208)' - } - }, - markLine: [{ - radius: 1.1, - angle: 'MIDNIGHT', - angle1: '3 AM' - }, { - radius: 1.1, - angle: '6 AM', - angle1: '13 AM' - }], - markPoint: [ - { - position: { - x: '50%', - y: '50%' - }, - regionRelative: true, - itemLine: { - visible: false - }, - itemContent: { - type: 'symbol', - symbol: { - style: { - dx: -80, - dy: -40, - size: 60, - symbolType: '', - fill: 'rgb(129, 216, 208)' - } - } - } - }, { - angle: '4 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: 5, - offsetY: -20, - text: { - text: '4: 00 Origin of life' - } - } - }, { - angle: '5 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: 5, - offsetY: -20, - text: { - text: '5: 00 Oldest Fossils' - } - } - }, { - angle: '14 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: 20, - text: { - text: 'Single-Celled Algae(Acritarchs)', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '18 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Sexual Reproduction', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '20 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Seaweeds', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '21 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Trilobites', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '22 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Coal Swamps', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '23 AM', - radius: 1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: -5, - offsetY: -20, - text: { - text: 'Humans', - style: { - textAlign: 'right' - } - } - } - }, { - angle: '2 AM', - radius: 1.1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: 10, - offsetY: -20, - text: { - text: 'Meteorite Bombardment 0:00 to 3 am' - } - } - }, { - angle: '10 AM', - radius: 1.1, - itemContent: { - type: 'text', - autoRotate: false, - offsetX: 10, - offsetY: 20, - text: { - text: '6:00 to 1: Abundant Banded Iron- Formations' - } - } - }], - }; + style: { + dx: -80, + dy: -40, + size: 60, + symbolType: + '', + fill: 'rgb(129, 216, 208)' + } + } + }, + { + angle: '4 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: 5, + offsetY: -20, + text: { + text: '4: 00 Origin of life' + } + } + }, + { + angle: '5 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: 5, + offsetY: -20, + style: { + text: '5: 00 Oldest Fossils' + } + } + }, + { + angle: '14 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: 20, + style: { + text: 'Single-Celled Algae(Acritarchs)', + textAlign: 'right' + } + } + }, + { + angle: '18 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Sexual Reproduction', + textAlign: 'right' + } + } + }, + { + angle: '20 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Seaweeds', + textAlign: 'right' + } + } + }, + { + angle: '21 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Trilobites', + textAlign: 'right' + } + } + }, + { + angle: '22 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Coal Swamps', + textAlign: 'right' + } + } + }, + { + angle: '23 AM', + radius: 1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: -5, + offsetY: -20, + style: { + text: 'Humans', + textAlign: 'right' + } + } + }, + { + angle: '2 AM', + radius: 1.1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: 10, + offsetY: -20, + style: { + text: 'Meteorite Bombardment 0:00 to 3 am' + } + } + }, + { + angle: '10 AM', + radius: 1.1, + itemContent: { + type: 'text', + autoRotate: false, + offsetX: 10, + offsetY: 20, + style: { + text: '6:00 to 1: Abundant Banded Iron- Formations' + } + } + } + ] +}; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); diff --git a/docs/assets/examples/zh/vscreen/gauge.md b/docs/assets/examples/zh/vscreen/gauge.md index 047d3d8733..5b55e3247f 100644 --- a/docs/assets/examples/zh/vscreen/gauge.md +++ b/docs/assets/examples/zh/vscreen/gauge.md @@ -134,50 +134,49 @@ const spec = { itemContent: { type: 'richText', autoRotate: false, - richText: { - style: { - width: 40000, - height: 40000, - textAlign: 'left', - textBaseline: 'top', - type: 'rich', - textConfig: [ - { - visible: false, - text: '\n', - fontSize: 12, - fill: '#FFF', - fontWeight: 'normal', - fontFamily: 'D-DIN', - textAlign: 'center', - textBaseline: 'middle' - }, - { - visible: true, - text: 'Profit', - fontSize: 16, - fill: '#FFF', - fontWeight: 'normal', - fontFamily: 'D-DIN', - textAlign: 'center', - textBaseline: 'middle' - }, - { - text: ' ', - fontSize: 8 - }, - { - visible: true, - text: '341.80', - fontSize: 32, - fill: '#FFF', - fontWeight: 'bold', - fontFamily: 'D-DIN', - textAlign: 'center', - textBaseline: 'middle' - } - ] - } + + style: { + width: 40000, + height: 40000, + textAlign: 'left', + textBaseline: 'top', + type: 'rich', + textConfig: [ + { + visible: false, + text: '\n', + fontSize: 12, + fill: '#FFF', + fontWeight: 'normal', + fontFamily: 'D-DIN', + textAlign: 'center', + textBaseline: 'middle' + }, + { + visible: true, + text: 'Profit', + fontSize: 16, + fill: '#FFF', + fontWeight: 'normal', + fontFamily: 'D-DIN', + textAlign: 'center', + textBaseline: 'middle' + }, + { + text: ' ', + fontSize: 8 + }, + { + visible: true, + text: '341.80', + fontSize: 32, + fill: '#FFF', + fontWeight: 'bold', + fontFamily: 'D-DIN', + textAlign: 'center', + textBaseline: 'middle' + } + ] } } } diff --git a/docs/assets/option/en/component/mark-point.md b/docs/assets/option/en/component/mark-point.md index 32ff1f71b7..5d867e6103 100644 --- a/docs/assets/option/en/component/mark-point.md +++ b/docs/assets/option/en/component/mark-point.md @@ -216,76 +216,42 @@ In addition to directly configuring offset values, since the `1.11.0` version: Since version 1.8.7, whether to automatically adjust item content so that it is displayed within the visible area of ​​​​the marker. -#### symbol(Object) - -When the content type is symbol, the state and style are configured. - -{{ use: component-marker-state( - prefix = '####', - graphicType = 'symbol' -) }} - -##### style(Object) - -For mark content type 'symbol', the symbol style. - -{{ use: component-marker-style-callback( - description = 'symbol style' -) }} - -{{ use: graphic-symbol( - prefix = '#####' -) }} - -#### image(Object) +#### text(Object) -When the content type is image, the state and style are configured. +For mark content type 'text', the text style. -{{ use: component-marker-state( +{{ use: component-marker-label( prefix = '####', - graphicType = 'image' + noConfine = true, + noMarkerRef = true, + noAutoRotate = true ) }} -##### style(Object) - -For mark content type 'image', the image style. +#### style(Object) {{ use: component-marker-style-callback( - description = 'image style' + description = 'image | text | richText | symbol style' ) }} {{ use: graphic-image( - prefix = '#####' + prefix = '####' ) }} -#### text(Object) - -For mark content type 'text', the text style. - -{{ use: component-marker-label( - prefix = '####', - noConfine = true +{{ use: graphic-text( + prefix = '####' ) }} -#### richText(Object) - -When the content type is richText, the state and style are configured. - -{{ use: component-marker-state( - prefix = '####', - graphicType = 'richText' +{{ use: graphic-rich-text( + prefix = '####' ) }} -##### style(Object) - -For mark content type 'richText', the richText style. - -{{ use: component-marker-style-callback( - description = 'richText style' +{{ use: graphic-symbol( + prefix = '####' ) }} -{{ use: graphic-rich-text( - prefix = '#####' +{{ use: component-marker-state( + prefix = '###', + graphicType = 'all' ) }} {{ use: component-marker-animation( diff --git a/docs/assets/option/en/component/marker-common/marker-label.md b/docs/assets/option/en/component/marker-common/marker-label.md index 06dc5b152b..9ad0b171e2 100644 --- a/docs/assets/option/en/component/marker-common/marker-label.md +++ b/docs/assets/option/en/component/marker-common/marker-label.md @@ -4,10 +4,13 @@ Label visibility. +{{ if: !${noAutoRotate} }} #${prefix} autoRotate(boolean) Label as a whole - whether to auto-rotate. +{{ /if }} + {{ if: !${noMarkerRef} }} {{ use: component-marker-ref( prefix = ${prefix} diff --git a/docs/assets/option/en/component/marker-common/marker-state.md b/docs/assets/option/en/component/marker-common/marker-state.md index 716d30ed58..b950f1b408 100644 --- a/docs/assets/option/en/component/marker-common/marker-state.md +++ b/docs/assets/option/en/component/marker-common/marker-state.md @@ -3,6 +3,7 @@ #${prefix} state(Object) Supported since `1.11.0` version, annotate the interaction state configuration of components. The label line currently has the following four states. You can configure the line style after these interactive states are triggered. + - `'hover'`: hover state - `'hover_reverse'`: non-hover state - `'selected'`: selected state @@ -11,209 +12,249 @@ The label line currently has the following four states. You can configure the li ##${prefix} hover(Object) hover state。 -###${prefix} style(Object|Array) - -{{ use: component-marker-style-callback( - description = 'hover state of annotation style supports callback' -) }} - {{ if: ${graphicType} === 'line' }} {{ use: graphic-line( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'polygon' }} {{ use: graphic-polygon( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'symbol' }} {{ use: graphic-symbol( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'image' }} {{ use: graphic-image( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'richText' }} {{ use: graphic-rich-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'rect' }} {{ use: graphic-rect( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'text' }} {{ use: graphic-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} +{{ if: ${graphicType} === 'all' }} +{{ use: graphic-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-rich-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-image( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-symbol( + prefix = '##' + ${prefix} +) }} +{{ /if }} ##${prefix} hover_reverse(Object) 非 hover state。 -###${prefix} style(Object|Array) - {{ use: component-marker-style-callback( description = 'unHover state of annotation style supports callback' ) }} {{ if: ${graphicType} === 'line' }} {{ use: graphic-line( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'polygon' }} {{ use: graphic-polygon( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'symbol' }} {{ use: graphic-symbol( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'image' }} {{ use: graphic-image( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'richText' }} {{ use: graphic-rich-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'rect' }} {{ use: graphic-rect( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'text' }} {{ use: graphic-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} +) }} +{{ /if }} +{{ if: ${graphicType} === 'all' }} +{{ use: graphic-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-rich-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-image( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-symbol( + prefix = '##' + ${prefix} ) }} {{ /if }} - - ##${prefix} selected(Object) selected state -###${prefix} style(Object|Array) - {{ use: component-marker-style-callback( description = 'selected state of annotation style supports callback' ) }} {{ if: ${graphicType} === 'line' }} {{ use: graphic-line( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'polygon' }} {{ use: graphic-polygon( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'symbol' }} {{ use: graphic-symbol( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'image' }} {{ use: graphic-image( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'richText' }} {{ use: graphic-rich-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'rect' }} {{ use: graphic-rect( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'text' }} {{ use: graphic-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} +{{ if: ${graphicType} === 'all' }} +{{ use: graphic-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-rich-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-image( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-symbol( + prefix = '##' + ${prefix} +) }} +{{ /if }} ##${prefix} selected_reverse(Object) unSelected state -###${prefix} style(Object|Array) - {{ use: component-marker-style-callback( description = 'unSelected state of annotation style supports callback' ) }} {{ if: ${graphicType} === 'line' }} {{ use: graphic-line( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'polygon' }} {{ use: graphic-polygon( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'symbol' }} {{ use: graphic-symbol( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'image' }} {{ use: graphic-image( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'richText' }} {{ use: graphic-rich-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'rect' }} {{ use: graphic-rect( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'text' }} {{ use: graphic-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} +) }} +{{ /if }} +{{ if: ${graphicType} === 'all' }} +{{ use: graphic-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-rich-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-image( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-symbol( + prefix = '##' + ${prefix} ) }} {{ /if }} - - diff --git a/docs/assets/option/zh/component/mark-point.md b/docs/assets/option/zh/component/mark-point.md index 4a6cebd002..463fff8b23 100644 --- a/docs/assets/option/zh/component/mark-point.md +++ b/docs/assets/option/zh/component/mark-point.md @@ -220,72 +220,40 @@ 自 1.8.7 版本开始, 是否自动调整 item content 使其展示在 marker 可见区域内。 -#### symbol(Object) - -标注内容类型为 symbol 时, 状态和样式配置。 - -{{ use: component-marker-state( - prefix = '####', - graphicType = 'symbol' -) }} - -##### style(Object) - -标注内容类型为 symbol 时，symbol 的样式。 -{{ use: component-marker-style-callback( - description = 'symbol样式' -) }} - -{{ use: graphic-symbol( - prefix = '#####' -) }} - -#### image(Object) - -标注内容类型为 image 时, 状态和样式配置。 +#### text(Object) -{{ use: component-marker-state( +{{ use: component-marker-label( prefix = '####', - graphicType = 'image' + noConfine = true, + noMarkerRef = true, + noAutoRotate = true ) }} -##### style(Object) +#### style(Object) -标注内容类型为 image 时，image 的样式。 {{ use: component-marker-style-callback( - description = 'image样式' + description = 'image | text | richText | symbol style' ) }} {{ use: graphic-image( - prefix = '#####' + prefix = '####' ) }} -#### text(Object) - -{{ use: component-marker-label( - prefix = '####', - noConfine = true +{{ use: graphic-text( + prefix = '####' ) }} -#### richText(Object) - -标注内容类型为 richText 时, 状态和样式配置。 - -{{ use: component-marker-style-callback( - description = 'richText样式' +{{ use: graphic-rich-text( + prefix = '####' ) }} -{{ use: component-marker-state( - prefix = '####', - graphicType = 'richText' +{{ use: graphic-symbol( + prefix = '####' ) }} -##### style(Object) - -标注内容类型为 richText 时，richText 的样式。 - -{{ use: graphic-rich-text( - prefix = '#####' +{{ use: component-marker-state( + prefix = '###', + graphicType = 'all' ) }} {{ use: component-marker-animation( diff --git a/docs/assets/option/zh/component/marker-common/marker-label.md b/docs/assets/option/zh/component/marker-common/marker-label.md index 1a0534f38a..24cc77a424 100644 --- a/docs/assets/option/zh/component/marker-common/marker-label.md +++ b/docs/assets/option/zh/component/marker-common/marker-label.md @@ -3,10 +3,11 @@ #${prefix} visible(boolean) 标签是否可见。 - +{{ if: !${noAutoRotate} }} #${prefix} autoRotate(boolean) 标签整体 - 是否自动旋转。 +{{ /if }} {{ if: !${noMarkerRef} }} {{ use: component-marker-ref( diff --git a/docs/assets/option/zh/component/marker-common/marker-state.md b/docs/assets/option/zh/component/marker-common/marker-state.md index cb03b14539..465cb31e1d 100644 --- a/docs/assets/option/zh/component/marker-common/marker-state.md +++ b/docs/assets/option/zh/component/marker-common/marker-state.md @@ -3,6 +3,7 @@ #${prefix} state(Object) 自`1.11.0`版本支持，标注组件的交互状态配置。 标注线目前有如下4种状态，您可以配置这几种交互状态触发后，线的样式。 + - `'hover'`：hover态 - `'hover_reverse'`：非hover状态 - `'selected'`：选中状态 @@ -11,209 +12,251 @@ ##${prefix} hover(Object) hover态。 -###${prefix} style(Object|Array) - -{{ use: component-marker-style-callback( - description = '标注样式hover状态支持回调' -) }} - {{ if: ${graphicType} === 'line' }} {{ use: graphic-line( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'polygon' }} {{ use: graphic-polygon( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'symbol' }} {{ use: graphic-symbol( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'image' }} {{ use: graphic-image( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'richText' }} {{ use: graphic-rich-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'rect' }} {{ use: graphic-rect( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'text' }} {{ use: graphic-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} +{{ if: ${graphicType} === 'all' }} +{{ use: graphic-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-rich-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-image( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-symbol( + prefix = '##' + ${prefix} +) }} +{{ /if }} ##${prefix} hover_reverse(Object) 非 hover态。 -###${prefix} style(Object|Array) - {{ use: component-marker-style-callback( description = '标注样式非hover状态支持回调' ) }} {{ if: ${graphicType} === 'line' }} {{ use: graphic-line( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'polygon' }} {{ use: graphic-polygon( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'symbol' }} {{ use: graphic-symbol( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'image' }} {{ use: graphic-image( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'richText' }} {{ use: graphic-rich-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'rect' }} {{ use: graphic-rect( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'text' }} {{ use: graphic-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} - +{{ if: ${graphicType} === 'all' }} +{{ use: graphic-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-rich-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-image( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-symbol( + prefix = '##' + ${prefix} +) }} +{{ /if }} ##${prefix} selected(Object) 选中态。 -###${prefix} style(Object|Array) - {{ use: component-marker-style-callback( description = '标注样式选中状态支持回调' ) }} {{ if: ${graphicType} === 'line' }} {{ use: graphic-line( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'polygon' }} {{ use: graphic-polygon( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'symbol' }} {{ use: graphic-symbol( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'image' }} {{ use: graphic-image( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'richText' }} {{ use: graphic-rich-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'rect' }} {{ use: graphic-rect( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'text' }} {{ use: graphic-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} +{{ if: ${graphicType} === 'all' }} +{{ use: graphic-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-rich-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-image( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-symbol( + prefix = '##' + ${prefix} +) }} +{{ /if }} ##${prefix} selected_reverse(Object) 非选中态。 -###${prefix} style(Object|Array) - {{ use: component-marker-style-callback( description = '标注样式非选中状态支持回调' ) }} {{ if: ${graphicType} === 'line' }} {{ use: graphic-line( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'polygon' }} {{ use: graphic-polygon( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'symbol' }} {{ use: graphic-symbol( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'image' }} {{ use: graphic-image( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'richText' }} {{ use: graphic-rich-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'rect' }} {{ use: graphic-rect( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} {{ if: ${graphicType} === 'text' }} {{ use: graphic-text( - prefix = '###' + ${prefix} + prefix = '##' + ${prefix} ) }} {{ /if }} - +{{ if: ${graphicType} === 'all' }} +{{ use: graphic-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-rich-text( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-image( + prefix = '##' + ${prefix} +) }} +{{ use: graphic-symbol( + prefix = '##' + ${prefix} +) }} +{{ /if }} diff --git a/packages/vchart/src/component/marker/mark-point/base-mark-point.ts b/packages/vchart/src/component/marker/mark-point/base-mark-point.ts index b7853758a2..6414f768cc 100644 --- a/packages/vchart/src/component/marker/mark-point/base-mark-point.ts +++ b/packages/vchart/src/component/marker/mark-point/base-mark-point.ts @@ -16,7 +16,7 @@ import { transformToGraphic } from '../../../util/style'; import { BaseMarker } from '../base-marker'; import { LayoutZIndex } from '../../../constant/layout'; import type { IGroup } from '@visactor/vrender-core'; -import type { IMarkerLabelSpec } from '../interface'; +import type { IMarkerLabelSpec, IMarkerLabelWithoutRefSpec } from '../interface'; export abstract class BaseMarkPoint extends BaseMarker implements IMarkPoint { static specKey = 'markPoint'; @@ -72,7 +72,10 @@ export abstract class BaseMarkPoint extends BaseMarker implement dy: 0 }; itemContentStyle = transformLabelAttributes( - merge(defaultStyle, label ?? textStyle ?? (style as IMarkerLabelSpec)), + { + ...label, + style: merge(defaultStyle, label?.textStyle ?? textStyle ?? (style as Pick)) + }, this._markerData, this._markAttributeContext );