Skip to content

Commit 9de31d5

Browse files
tmkxtmkx
committed
feat: add some bar chart examples
1 parent 33f6dc7 commit 9de31d5

File tree

1 file changed

+343
-0
lines changed

1 file changed

+343
-0
lines changed

‎stories/bar.stories.tsx‎

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
LineChart,
1010
MarkLine,
1111
MarkPoint,
12+
PieChart,
1213
Polar,
1314
Title,
1415
Toolbox,
@@ -2004,3 +2005,345 @@ export const DynamicData: Story = {
20042005
);
20052006
},
20062007
};
2008+
2009+
export const Watermark: Story = {
2010+
name: 'Watermark - ECharts Download',
2011+
render() {
2012+
const builderJson = {
2013+
all: 10887,
2014+
// prettier-ignore
2015+
charts: { map: 3237, lines: 2164, bar: 7561, line: 7778, pie: 7355, scatter: 2405, candlestick: 1842, radar: 2090, heatmap: 1762, treemap: 1593, graph: 2060, boxplot: 1537, parallel: 1908, gauge: 2107, funnel: 1692, sankey: 1568 },
2016+
// prettier-ignore
2017+
components: { geo: 2788, title: 9575, legend: 9400, tooltip: 9466, grid: 9266, markPoint: 3419, markLine: 2984, timeline: 2739, dataZoom: 2744, visualMap: 2466, toolbox: 3034, polar: 1945 },
2018+
ie: 9743,
2019+
};
2020+
// prettier-ignore
2021+
const downloadJson = { 'echarts.min.js': 17365, 'echarts.simple.min.js': 4079, 'echarts.common.min.js': 6929, 'echarts.js': 14890 };
2022+
// prettier-ignore
2023+
const themeJson = { 'dark.js': 1594, 'infographic.js': 925, 'shine.js': 1608, 'roma.js': 721, 'macarons.js': 2179, 'vintage.js': 1982 };
2024+
const waterMarkText = 'ECHARTS';
2025+
const canvas = document.createElement('canvas');
2026+
const ctx = canvas.getContext('2d')!;
2027+
canvas.width = canvas.height = 100;
2028+
ctx.textAlign = 'center';
2029+
ctx.textBaseline = 'middle';
2030+
ctx.globalAlpha = 0.08;
2031+
ctx.font = '20px Microsoft Yahei';
2032+
ctx.translate(50, 50);
2033+
ctx.rotate(-Math.PI / 4);
2034+
ctx.fillText(waterMarkText, 0, 0);
2035+
2036+
return (
2037+
<BarChart
2038+
style={{ width: 480, height: 300 }}
2039+
compose={[PieChart]}
2040+
backgroundColor={{ type: 'pattern', image: canvas, repeat: 'repeat' }}
2041+
grid={[
2042+
{ top: 50, width: '50%', bottom: '45%', left: 10, containLabel: true },
2043+
{ top: '55%', width: '50%', bottom: 0, left: 10, containLabel: true },
2044+
]}
2045+
xAxis={[
2046+
{ type: 'value', max: builderJson.all, splitLine: { show: false } },
2047+
{ type: 'value', max: builderJson.all, gridIndex: 1, splitLine: { show: false } },
2048+
]}
2049+
yAxis={[
2050+
{
2051+
type: 'category',
2052+
data: Object.keys(builderJson.charts),
2053+
axisLabel: { interval: 0, rotate: 30 },
2054+
splitLine: { show: false },
2055+
},
2056+
{
2057+
gridIndex: 1,
2058+
type: 'category',
2059+
data: Object.keys(builderJson.components),
2060+
axisLabel: { interval: 0, rotate: 30 },
2061+
splitLine: { show: false },
2062+
},
2063+
]}
2064+
series={[
2065+
{
2066+
type: 'bar',
2067+
stack: 'chart',
2068+
z: 3,
2069+
label: { position: 'right', show: true },
2070+
data: Object.keys(builderJson.charts).map(
2071+
(key) => builderJson.charts[key as keyof (typeof builderJson)['charts']]
2072+
),
2073+
},
2074+
{
2075+
type: 'bar',
2076+
stack: 'chart',
2077+
silent: true,
2078+
itemStyle: { color: '#eee' },
2079+
data: Object.keys(builderJson.charts).map(
2080+
(key) => builderJson.all - builderJson.charts[key as keyof (typeof builderJson)['charts']]
2081+
),
2082+
},
2083+
{
2084+
type: 'bar',
2085+
stack: 'component',
2086+
xAxisIndex: 1,
2087+
yAxisIndex: 1,
2088+
z: 3,
2089+
label: { position: 'right', show: true },
2090+
data: Object.keys(builderJson.components).map(
2091+
(key) => builderJson.components[key as keyof (typeof builderJson)['components']]
2092+
),
2093+
},
2094+
{
2095+
type: 'bar',
2096+
stack: 'component',
2097+
silent: true,
2098+
xAxisIndex: 1,
2099+
yAxisIndex: 1,
2100+
itemStyle: { color: '#eee' },
2101+
data: Object.keys(builderJson.components).map(
2102+
(key) => builderJson.all - builderJson.components[key as keyof (typeof builderJson)['components']]
2103+
),
2104+
},
2105+
{
2106+
type: 'pie',
2107+
radius: [0, '30%'],
2108+
center: ['75%', '25%'],
2109+
data: Object.keys(downloadJson).map((key) => ({
2110+
name: key.replace('.js', ''),
2111+
value: downloadJson[key as keyof typeof downloadJson],
2112+
})),
2113+
},
2114+
{
2115+
type: 'pie',
2116+
radius: [0, '30%'],
2117+
center: ['75%', '75%'],
2118+
data: Object.keys(themeJson).map((key) => ({
2119+
name: key.replace('.js', ''),
2120+
value: themeJson[key as keyof typeof themeJson],
2121+
})),
2122+
},
2123+
]}
2124+
>
2125+
<Title
2126+
title={[
2127+
{ text: '在线构建', subtext: '总计 ' + builderJson.all, left: '25%', textAlign: 'center' },
2128+
{
2129+
text: '各版本下载',
2130+
subtext:
2131+
'总计 ' +
2132+
Object.keys(downloadJson).reduce((all, key) => all + downloadJson[key as keyof typeof downloadJson], 0),
2133+
left: '75%',
2134+
textAlign: 'center',
2135+
},
2136+
{
2137+
text: '主题下载',
2138+
subtext:
2139+
'总计 ' +
2140+
Object.keys(themeJson).reduce((all, key) => all + themeJson[key as keyof typeof themeJson], 0),
2141+
left: '75%',
2142+
top: '50%',
2143+
textAlign: 'center',
2144+
},
2145+
]}
2146+
/>
2147+
<Tooltip tooltip={{}} />
2148+
</BarChart>
2149+
);
2150+
},
2151+
};
2152+
2153+
export const BarPolarRealEstate: Story = {
2154+
name: 'Bar Chart on Polar',
2155+
render() {
2156+
// prettier-ignore
2157+
const data = [[5000, 10000, 6785.71], [4000, 10000, 6825], [3000, 6500, 4463.33], [2500, 5600, 3793.83], [2000, 4000, 3060], [2000, 4000, 3222.33], [2500, 4000, 3133.33], [1800, 4000, 3100], [2000, 3500, 2750], [2000, 3000, 2500], [1800, 3000, 2433.33], [2000, 2700, 2375], [1500, 2800, 2150], [1500, 2300, 2100], [1600, 3500, 2057.14], [1500, 2600, 2037.5], [1500, 2417.54, 1905.85], [1500, 2000, 1775], [1500, 1800, 1650]];
2158+
// prettier-ignore
2159+
const cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台'];
2160+
const barHeight = 50;
2161+
return (
2162+
<BarChart
2163+
style={{ width: 480, height: 300 }}
2164+
grid={{ top: 100 }}
2165+
series={[
2166+
{
2167+
type: 'bar',
2168+
itemStyle: { color: 'transparent' },
2169+
data: data.map((d) => d[0]),
2170+
coordinateSystem: 'polar',
2171+
stack: 'Min Max',
2172+
silent: true,
2173+
},
2174+
{
2175+
type: 'bar',
2176+
data: data.map((d) => d[1]! - d[0]!),
2177+
coordinateSystem: 'polar',
2178+
name: 'Range',
2179+
stack: 'Min Max',
2180+
},
2181+
{
2182+
type: 'bar',
2183+
itemStyle: { color: 'transparent' },
2184+
data: data.map((d) => d[2]! - barHeight),
2185+
coordinateSystem: 'polar',
2186+
stack: 'Average',
2187+
silent: true,
2188+
z: 10,
2189+
},
2190+
{
2191+
type: 'bar',
2192+
data: data.map((_d) => barHeight * 2),
2193+
coordinateSystem: 'polar',
2194+
name: 'Average',
2195+
stack: 'Average',
2196+
barGap: '-100%',
2197+
z: 10,
2198+
},
2199+
]}
2200+
>
2201+
<Title
2202+
title={{
2203+
text: 'How expensive is it to rent an apartment in China?',
2204+
subtext: 'Data from https://www.numbeo.com',
2205+
}}
2206+
/>
2207+
<Polar polar={{}} angleAxis={{ type: 'category', data: cities }} radiusAxis={{}} />
2208+
<Legend legend={{ show: true, top: 'bottom', data: ['Range', 'Average'] }} />
2209+
<Tooltip
2210+
tooltip={{
2211+
show: true,
2212+
formatter: function (params) {
2213+
if (Array.isArray(params)) return '';
2214+
const id = params.dataIndex;
2215+
return (
2216+
cities[id] +
2217+
'<br>Lowest：' +
2218+
data[id]![0] +
2219+
'<br>Highest：' +
2220+
data[id]![1] +
2221+
'<br>Average：' +
2222+
data[id]![2]
2223+
);
2224+
},
2225+
}}
2226+
/>
2227+
</BarChart>
2228+
);
2229+
},
2230+
};
2231+
2232+
export const BarPolarStack: Story = {
2233+
name: 'Stacked Bar Chart on Polar',
2234+
render() {
2235+
return (
2236+
<BarChart
2237+
style={{ width: 480, height: 300 }}
2238+
series={[
2239+
{
2240+
type: 'bar',
2241+
data: [1, 2, 3, 4],
2242+
coordinateSystem: 'polar',
2243+
name: 'A',
2244+
stack: 'a',
2245+
emphasis: { focus: 'series' },
2246+
},
2247+
{
2248+
type: 'bar',
2249+
data: [2, 4, 6, 8],
2250+
coordinateSystem: 'polar',
2251+
name: 'B',
2252+
stack: 'a',
2253+
emphasis: { focus: 'series' },
2254+
},
2255+
{
2256+
type: 'bar',
2257+
data: [1, 2, 3, 4],
2258+
coordinateSystem: 'polar',
2259+
name: 'C',
2260+
stack: 'a',
2261+
emphasis: { focus: 'series' },
2262+
},
2263+
]}
2264+
>
2265+
<Polar polar={{}} angleAxis={{}} radiusAxis={{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu'], z: 10 }} />
2266+
<Legend legend={{ show: true, data: ['A', 'B', 'C'] }} />
2267+
</BarChart>
2268+
);
2269+
},
2270+
};
2271+
2272+
export const BarPolarStackRadial: Story = {
2273+
name: 'Stacked Bar Chart on Polar(Radial)',
2274+
render() {
2275+
return (
2276+
<BarChart
2277+
style={{ width: 480, height: 300 }}
2278+
series={[
2279+
{
2280+
type: 'bar',
2281+
data: [1, 2, 3, 4, 3, 5, 1],
2282+
coordinateSystem: 'polar',
2283+
name: 'A',
2284+
stack: 'a',
2285+
emphasis: { focus: 'series' },
2286+
},
2287+
{
2288+
type: 'bar',
2289+
data: [2, 4, 6, 1, 3, 2, 1],
2290+
coordinateSystem: 'polar',
2291+
name: 'B',
2292+
stack: 'a',
2293+
emphasis: { focus: 'series' },
2294+
},
2295+
{
2296+
type: 'bar',
2297+
data: [1, 2, 3, 4, 1, 2, 5],
2298+
coordinateSystem: 'polar',
2299+
name: 'C',
2300+
stack: 'a',
2301+
emphasis: { focus: 'series' },
2302+
},
2303+
]}
2304+
>
2305+
<Polar
2306+
polar={{}}
2307+
angleAxis={{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }}
2308+
radiusAxis={{}}
2309+
/>
2310+
<Legend legend={{ show: true, data: ['A', 'B', 'C'] }} />
2311+
</BarChart>
2312+
);
2313+
},
2314+
};
2315+
2316+
export const PolarRoundCap: Story = {
2317+
name: 'Rounded Bar on Polar',
2318+
render() {
2319+
return (
2320+
<BarChart
2321+
style={{ width: 480, height: 300 }}
2322+
series={[
2323+
{
2324+
type: 'bar',
2325+
data: [4, 3, 2, 1, 0],
2326+
coordinateSystem: 'polar',
2327+
name: 'Without Round Cap',
2328+
itemStyle: { borderColor: 'red', opacity: 0.8, borderWidth: 1 },
2329+
},
2330+
{
2331+
type: 'bar',
2332+
data: [4, 3, 2, 1, 0],
2333+
coordinateSystem: 'polar',
2334+
name: 'With Round Cap',
2335+
roundCap: true,
2336+
itemStyle: { borderColor: 'green', opacity: 0.8, borderWidth: 1 },
2337+
},
2338+
]}
2339+
>
2340+
<Polar
2341+
polar={{}}
2342+
angleAxis={{ max: 2, startAngle: 30, splitLine: { show: false } }}
2343+
radiusAxis={{ type: 'category', data: ['v', 'w', 'x', 'y', 'z'], z: 10 }}
2344+
/>
2345+
<Legend legend={{ show: true, data: ['Without Round Cap', 'With Round Cap'] }} />
2346+
</BarChart>
2347+
);
2348+
},
2349+
};

0 commit comments

Comments
 (0)