import { ReplaceMode } from '@meta2d/chart-diagram';
//注册所有主题
export function registerTheme() {
fetch('theme/dark.json')
.then((r) => r.json())
.then((theme) => {
echarts.registerTheme('le-dark', theme);
});
}
export function changeTheme(theme: string) {
charts.forEach((item) => {
item.list.forEach((chart) => {
if (chart.data.name === 'echarts') {
chart.data.echarts.theme = theme;
}
});
});
}
export const charts = [
{
name: 'Echarts - 基础图表',
show: true,
list: [
{
name: '折线图',
icon: 'l-line-chart',
data: {
name: 'echarts',
width: 400,
height: 300,
externElement: true,
disableAnchor: true,
echarts: {
option: {
tooltip: {
trigger: 'axis',
},
grid: {
top: 10,
bottom: 20,
left: 40,
right: 5,
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
fontSize: 12,
// color: '#ffffff',
},
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12,
// color: '#ffffff',
},
},
series: [
{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
},
max: 100,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
{
key: 'echarts.max',
label: '最大数量',
type: 'number',
},
],
},
},
{
name: '柱状图',
icon: 'l-bar-chart',
data: {
width: 300,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
tooltip: {
trigger: 'axis',
},
grid: {
top: 10,
bottom: 20,
left: 40,
right: 5,
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true,
},
axisLabel: {
fontSize: 12,
color: '#ffffff',
},
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12,
color: '#ffffff',
},
},
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
label: {
color: '#ffffff',
},
data: [10, 52, 200, 334, 390, 330, 220],
},
],
},
max: 100,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
{
key: 'echarts.max',
label: '最大数量',
type: 'number',
},
],
},
},
{
name: '饼图',
icon: 'l-pie-chart',
data: {
width: 300,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
tooltip: {
trigger: 'item',
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
label: {
color: '#ffffff',
},
data: [
{ value: 335, name: '2D' },
{ value: 310, name: '3D' },
{ value: 234, name: '大屏' },
{ value: 135, name: '物联网平台' },
{ value: 1548, name: '图形库' },
],
},
],
},
replaceMode: ReplaceMode.Replace,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
],
},
},
{
name: '散点图',
icon: 'l-sandiantu',
data: {
width: 300,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
grid: {
top: 10,
bottom: 20,
left: 40,
right: 10,
},
xAxis: {
axisLabel: {
fontSize: 12,
color: '#ffffff',
},
},
yAxis: {
axisLabel: {
fontSize: 12,
color: '#ffffff',
},
},
series: [
{
symbolSize: 10,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68],
],
type: 'scatter',
},
],
},
replaceMode: ReplaceMode.Replace,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
],
},
},
{
name: 'K线图',
icon: 'l-kxiantu',
data: {
width: 300,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
grid: {
top: 20,
bottom: 30,
left: 40,
right: 10,
},
xAxis: {
axisLabel: {
fontSize: 12,
color: '#ffffff',
},
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
},
yAxis: {
axisLabel: {
fontSize: 12,
color: '#ffffff',
},
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42],
],
},
],
},
replaceMode: ReplaceMode.Replace,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
],
},
},
{
name: '雷达图',
icon: 'l-leidatu',
data: {
width: 300,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
grid: {
top: 20,
bottom: 30,
left: 40,
right: 10,
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 },
],
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Allocated Budget',
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Actual Spending',
},
],
},
],
},
replaceMode: ReplaceMode.Replace,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
],
},
},
{
name: '旭日图',
icon: 'l-xuritu',
data: {
width: 200,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
series: [
{
radius: ['15%', '80%'],
type: 'sunburst',
data: [
{
children: [
{
value: 5,
children: [
{
value: 1,
itemStyle: {
color: '#F54F4A',
},
},
{
value: 2,
children: [
{
value: 1,
itemStyle: {
color: '#FF8C75',
},
},
],
},
{
children: [
{
value: 1,
},
],
},
],
itemStyle: {
color: '#F54F4A',
},
},
{
value: 10,
children: [
{
value: 6,
children: [
{
value: 1,
itemStyle: {
color: '#F54F4A',
},
},
{
value: 1,
},
{
value: 1,
itemStyle: {
color: '#FF8C75',
},
},
{
value: 1,
},
],
itemStyle: {
color: '#FFB499',
},
},
{
value: 2,
children: [
{
value: 1,
},
],
itemStyle: {
color: '#FFB499',
},
},
{
children: [
{
value: 1,
itemStyle: {
color: '#FF8C75',
},
},
],
},
],
itemStyle: {
color: '#F54F4A',
},
},
],
itemStyle: {
color: '#F54F4A',
},
},
{
value: 9,
children: [
{
value: 4,
children: [
{
value: 2,
itemStyle: {
color: '#FF8C75',
},
},
{
children: [
{
value: 1,
itemStyle: {
color: '#F54F4A',
},
},
],
},
],
itemStyle: {
color: '#F54F4A',
},
},
{
children: [
{
value: 3,
children: [
{
value: 1,
},
{
value: 1,
itemStyle: {
color: '#FF8C75',
},
},
],
},
],
itemStyle: {
color: '#FFB499',
},
},
],
itemStyle: {
color: '#FF8C75',
},
},
{
value: 7,
children: [
{
children: [
{
value: 1,
itemStyle: {
color: '#FFB499',
},
},
{
value: 3,
children: [
{
value: 1,
itemStyle: {
color: '#FF8C75',
},
},
{
value: 1,
},
],
itemStyle: {
color: '#FF8C75',
},
},
{
value: 2,
children: [
{
value: 1,
},
{
value: 1,
itemStyle: {
color: '#F54F4A',
},
},
],
itemStyle: {
color: '#F54F4A',
},
},
],
itemStyle: {
color: '#FFB499',
},
},
],
itemStyle: {
color: '#F54F4A',
},
},
{
children: [
{
value: 6,
children: [
{
value: 1,
itemStyle: {
color: '#FF8C75',
},
},
{
value: 2,
children: [
{
value: 2,
itemStyle: {
color: '#FF8C75',
},
},
],
itemStyle: {
color: '#F54F4A',
},
},
{
value: 1,
itemStyle: {
color: '#FFB499',
},
},
],
itemStyle: {
color: '#FFB499',
},
},
{
value: 3,
children: [
{
value: 1,
},
{
children: [
{
value: 1,
itemStyle: {
color: '#FF8C75',
},
},
],
},
{
value: 1,
},
],
itemStyle: {
color: '#FFB499',
},
},
],
itemStyle: {
color: '#F54F4A',
},
},
],
label: {
rotate: 'radial',
color: '#ffffff',
},
},
],
},
replaceMode: ReplaceMode.Replace,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
],
},
},
{
name: '桑基图',
icon: 'l-sangshentu',
data: {
width: 300,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency',
},
data: [
{
name: 'a',
},
{
name: 'b',
},
{
name: 'a1',
},
{
name: 'a2',
},
{
name: 'b1',
},
{
name: 'c',
},
],
links: [
{
source: 'a',
target: 'a1',
value: 5,
},
{
source: 'a',
target: 'a2',
value: 3,
},
{
source: 'b',
target: 'b1',
value: 8,
},
{
source: 'a',
target: 'b1',
value: 3,
},
{
source: 'b1',
target: 'a1',
value: 1,
},
{
source: 'b1',
target: 'c',
value: 2,
},
],
lineStyle: {
color: 'source',
curveness: 0.5,
},
label: {
color: '#ffffff',
fontSize: 10,
},
},
},
replaceMode: ReplaceMode.Replace,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
],
},
},
{
name: '漏斗图',
icon: 'l-loudoutu',
data: {
width: 200,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c}%',
},
series: [
{
name: 'Expected',
type: 'funnel',
left: '2%',
width: '80%',
label: {
color: '#ffffff',
formatter: '{b}Expected',
},
labelLine: {
show: false,
},
itemStyle: {
opacity: 0.7,
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}Expected: {c}%',
},
},
data: [
{ value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order' },
{ value: 80, name: 'Click' },
{ value: 100, name: 'Show' },
],
},
{
name: 'Actual',
type: 'funnel',
left: '2%',
width: '80%',
maxSize: '80%',
label: {
position: 'inside',
formatter: '{c}%',
color: '#fff',
},
itemStyle: {
opacity: 0.5,
borderColor: '#fff',
borderWidth: 2,
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}Actual: {c}%',
},
},
data: [
{ value: 30, name: 'Visit' },
{ value: 10, name: 'Inquiry' },
{ value: 5, name: 'Order' },
{ value: 50, name: 'Click' },
{ value: 80, name: 'Show' },
],
z: 100,
},
],
},
replaceMode: ReplaceMode.Replace,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
],
},
},
{
name: '仪表盘',
icon: 'l-dashboard-chart',
data: {
width: 200,
height: 200,
disableAnchor: true,
externElement: true,
name: 'echarts',
echarts: {
option: {
tooltip: {
formatter: '{a}
{b} : {c}%',
},
series: [
{
type: 'gauge',
axisLine: {
roundCap: true,
},
progress: {
show: true,
roundCap: true,
},
data: [{ value: 70 }],
},
],
},
replaceMode: ReplaceMode.Replace,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
],
},
},
],
},
{
name: '乐吾乐Charts',
show: true,
list: [
{
name: '折线图',
icon: 'l-line-chart',
data: {
name: 'lineChart',
width: 400,
disableAnchor: true,
height: 200,
chartsColor: [
'#1890ff',
'#2FC25B',
'#FACC14',
'#c23531',
'#2f4554',
'#61a0a8',
'#d48265',
],
xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
smooth: true,
data: [
[1820, 1932, 1901, 1934, 1990, 1830, 1920],
[1710, 1932, 1901, 1834, 1700, 1830, 1720],
],
},
},
{
name: '柱状图',
icon: 'l-bar-chart',
data: {
name: 'histogram',
x: 600,
y: 100,
width: 400,
height: 200,
disableAnchor: true,
chartsColor: [
'#1890ff',
'#2FC25B',
'#FACC14',
'#c23531',
'#2f4554',
'#61a0a8',
'#d48265',
],
xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: [
[120, 200, 150, 80, 70, 110, 130],
[140, 250, 150, 80, 60, 10, 30],
[40, 50, 180, 210, 60, 70, 30],
],
},
},
{
name: '饼图',
icon: 'l-pie-chart',
data: {
name: 'pieChart',
x: 100,
y: 300,
width: 400,
height: 200,
disableAnchor: true,
chartsColor: [
'#1890ff',
'#36CBCB',
'#2FC25B',
'#FACC14',
'#F2637B',
'#fc8452',
'#9a60b4',
'#ea7ccc',
],
data: [
[
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
[
{ value: 1548, name: 'Search' },
{ value: 775, name: 'Direct' },
{ value: 679, name: 'Market' },
],
],
chartsRadius: [
['60%', '70%'],
['0%', '50%'],
],
},
},
{
name: '仪表盘',
icon: 'l-dashboard-chart',
data: {
name: 'gauge',
x: 600,
y: 300,
width: 400,
height: 400,
disableAnchor: true,
value: 90,
unit: 'm/s',
axisLine: [
[0.3, '#67e0e3'],
[0.7, '#37a2da'],
[1, '#fd666d'],
],
animateCycle: 1,
keepAnimateState: 0,
},
},
{
name: '时钟',
icon: 'l-07',
data: {
name: 'gauge',
x: 600,
y: 300,
width: 400,
height: 400,
disableAnchor: true,
isClock: true,
startAngle: 90,
endAngle: -270,
min: 0,
max: 12,
splitNumber: 12,
background: '#3A3A3A',
color: '#C0911F',
},
},
],
},
{
name: '折线图',
show: true,
list: [
{
name: '基础折线图',
icon: 'l-line-chart',
data: {
name: 'echarts',
width: 366,
height: 206,
externElement: true,
disableAnchor: true,
echarts: {
option: {
grid: {
top: 20,
bottom: 40,
left: 40,
right: 20,
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
},
yAxis: {
type: 'value',
max: 100,
min: 0,
interval: 50,
},
series: [
{
type: 'line',
data: [40, 20, 90, 60, 70, 80],
},
],
},
max: 100,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
{
key: 'echarts.max',
label: '最大数量',
type: 'number',
},
],
},
},
{
name: '双折线图',
icon: 'l-line-chart',
data: {
name: 'echarts',
width: 366,
height: 206,
externElement: true,
disableAnchor: true,
echarts: {
option: {
grid: {
top: 20,
bottom: 40,
left: 40,
right: 20,
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
},
yAxis: {
type: 'value',
max: 100,
min: 0,
interval: 50,
},
series: [
{
type: 'line',
data: [40, 35, 80, 40, 45, 25],
},
{
type: 'line',
data: [25, 40, 20, 30, 25, 40],
},
],
},
max: 100,
},
realTimes: [
{
key: 'echarts.option.series.0.data',
label: '数据',
type: 'object',
},
{
key: 'echarts.option',
label: 'echarts',
type: 'object',
},
{
key: 'echarts.max',
label: '最大数量',
type: 'number',
},
],
},
},
],
},
];