|
|
@@ -21,48 +21,99 @@ export function changeTheme(theme: string) {
|
|
|
|
|
|
export const charts = [
|
|
|
{
|
|
|
- name: 'Echarts - 基础图表',
|
|
|
+ name: '折线图',
|
|
|
show: true,
|
|
|
list: [
|
|
|
{
|
|
|
- name: '折线图',
|
|
|
+ name: '基础折线图',
|
|
|
icon: 'l-line-chart',
|
|
|
data: {
|
|
|
name: 'echarts',
|
|
|
- width: 400,
|
|
|
- height: 300,
|
|
|
+ width: 366,
|
|
|
+ height: 206,
|
|
|
externElement: true,
|
|
|
disableAnchor: true,
|
|
|
echarts: {
|
|
|
option: {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- },
|
|
|
grid: {
|
|
|
- top: 10,
|
|
|
- bottom: 20,
|
|
|
+ top: 20,
|
|
|
+ bottom: 40,
|
|
|
left: 40,
|
|
|
- right: 5,
|
|
|
+ right: 20,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
- axisLabel: {
|
|
|
- fontSize: 12,
|
|
|
- // color: '#ffffff',
|
|
|
- },
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
- axisLabel: {
|
|
|
- fontSize: 12,
|
|
|
- // color: '#ffffff',
|
|
|
+ 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: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ data: [40, 35, 80, 40, 45, 25],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ data: [25, 40, 20, 30, 25, 40],
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
@@ -70,13 +121,13 @@ export const charts = [
|
|
|
},
|
|
|
realTimes: [
|
|
|
{
|
|
|
- key: 'echarts.option.series.0.data.0',
|
|
|
- label: 'Mon',
|
|
|
+ key: 'echarts.option.series.0.data',
|
|
|
+ label: '数据1',
|
|
|
type: 'object',
|
|
|
},
|
|
|
{
|
|
|
- key: 'echarts.option.series.0.data.2',
|
|
|
- label: 'Wed',
|
|
|
+ key: 'echarts.option.series.1.data',
|
|
|
+ label: '数据2',
|
|
|
type: 'object',
|
|
|
},
|
|
|
{
|
|
|
@@ -92,53 +143,60 @@ export const charts = [
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '面积图',
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
{
|
|
|
- name: '柱状图',
|
|
|
- icon: 'l-bar-chart',
|
|
|
+ name: '基础面积图',
|
|
|
+ icon: 'l-line-chart',
|
|
|
data: {
|
|
|
- width: 300,
|
|
|
- height: 200,
|
|
|
- disableAnchor: true,
|
|
|
+ name: 'echarts',
|
|
|
+ width: 366,
|
|
|
+ height: 206,
|
|
|
externElement: true,
|
|
|
+ disableAnchor: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '柱状图',
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: '基础柱状图',
|
|
|
+ icon: 'l-line-chart',
|
|
|
+ data: {
|
|
|
name: 'echarts',
|
|
|
+ width: 366,
|
|
|
+ height: 206,
|
|
|
+ externElement: true,
|
|
|
+ disableAnchor: true,
|
|
|
echarts: {
|
|
|
option: {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- },
|
|
|
grid: {
|
|
|
- top: 10,
|
|
|
- bottom: 20,
|
|
|
+ top: 20,
|
|
|
+ bottom: 40,
|
|
|
left: 40,
|
|
|
- right: 5,
|
|
|
+ right: 20,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- fontSize: 12,
|
|
|
- color: '#ffffff',
|
|
|
- },
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
- axisLabel: {
|
|
|
- fontSize: 12,
|
|
|
- color: '#ffffff',
|
|
|
- },
|
|
|
+ max: 100,
|
|
|
+ min: 0,
|
|
|
+ interval: 50,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: '直接访问',
|
|
|
type: 'bar',
|
|
|
- barWidth: '60%',
|
|
|
- label: {
|
|
|
- color: '#ffffff',
|
|
|
- },
|
|
|
- data: [10, 52, 200, 334, 390, 330, 220],
|
|
|
+ data: [40, 20, 90, 60, 70, 80],
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
@@ -163,6 +221,81 @@ export const charts = [
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
+ {
|
|
|
+ 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: 'bar',
|
|
|
+ data: [40, 20, 90, 60, 70, 80],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ data: [50, 70, 20, 30, 70, 40],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ max: 100,
|
|
|
+ },
|
|
|
+ realTimes: [
|
|
|
+ {
|
|
|
+ key: 'echarts.option.series.0.data',
|
|
|
+ label: '数据1',
|
|
|
+ type: 'object',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'echarts.option.series.1.data',
|
|
|
+ label: '数据2',
|
|
|
+ type: 'object',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'echarts.option',
|
|
|
+ label: 'echarts',
|
|
|
+ type: 'object',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'echarts.max',
|
|
|
+ label: '最大数量',
|
|
|
+ type: 'number',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '条形图',
|
|
|
+ show: true,
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '饼环图',
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
{
|
|
|
name: '饼图',
|
|
|
icon: 'l-pie-chart',
|
|
|
@@ -210,6 +343,12 @@ export const charts = [
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '散点图',
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
{
|
|
|
name: '散点图',
|
|
|
icon: 'l-sandiantu',
|
|
|
@@ -286,9 +425,15 @@ export const charts = [
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '雷达图',
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
{
|
|
|
- name: 'K线图',
|
|
|
- icon: 'l-kxiantu',
|
|
|
+ name: '雷达图',
|
|
|
+ icon: 'l-leidatu',
|
|
|
data: {
|
|
|
width: 300,
|
|
|
height: 200,
|
|
|
@@ -303,27 +448,30 @@ export const charts = [
|
|
|
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',
|
|
|
- },
|
|
|
+ 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: [
|
|
|
{
|
|
|
- type: 'candlestick',
|
|
|
+ name: 'Budget vs spending',
|
|
|
+ type: 'radar',
|
|
|
data: [
|
|
|
- [20, 34, 10, 38],
|
|
|
- [40, 35, 30, 50],
|
|
|
- [31, 38, 33, 44],
|
|
|
- [38, 15, 5, 42],
|
|
|
+ {
|
|
|
+ value: [4200, 3000, 20000, 35000, 50000, 18000],
|
|
|
+ name: 'Allocated Budget',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: [5000, 14000, 28000, 26000, 42000, 21000],
|
|
|
+ name: 'Actual Spending',
|
|
|
+ },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
@@ -344,374 +492,17 @@ export const charts = [
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
- {
|
|
|
- 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: '关系图',
|
|
|
+ show: true,
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '桑葚图',
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
{
|
|
|
name: '桑基图',
|
|
|
icon: 'l-sangshentu',
|
|
|
@@ -807,100 +598,12 @@ export const charts = [
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
- {
|
|
|
- name: '漏斗图',
|
|
|
- icon: 'l-loudoutu',
|
|
|
- data: {
|
|
|
- width: 200,
|
|
|
- height: 200,
|
|
|
- disableAnchor: true,
|
|
|
- externElement: true,
|
|
|
- name: 'echarts',
|
|
|
- echarts: {
|
|
|
- option: {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '{a} <br/>{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: '仪表盘',
|
|
|
+ show: true,
|
|
|
+ list: [
|
|
|
{
|
|
|
name: '仪表盘',
|
|
|
icon: 'l-dashboard-chart',
|
|
|
@@ -1086,254 +789,4 @@ export const charts = [
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
- {
|
|
|
- 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: '数据1',
|
|
|
- type: 'object',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'echarts.option.series.1.data',
|
|
|
- label: '数据2',
|
|
|
- type: 'object',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'echarts.option',
|
|
|
- label: 'echarts',
|
|
|
- type: 'object',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'echarts.max',
|
|
|
- label: '最大数量',
|
|
|
- type: 'number',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- 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: 'bar',
|
|
|
- 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: 'bar',
|
|
|
- data: [40, 20, 90, 60, 70, 80],
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- data: [50, 70, 20, 30, 70, 40],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- max: 100,
|
|
|
- },
|
|
|
- realTimes: [
|
|
|
- {
|
|
|
- key: 'echarts.option.series.0.data',
|
|
|
- label: '数据1',
|
|
|
- type: 'object',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'echarts.option.series.1.data',
|
|
|
- label: '数据2',
|
|
|
- type: 'object',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'echarts.option',
|
|
|
- label: 'echarts',
|
|
|
- type: 'object',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'echarts.max',
|
|
|
- label: '最大数量',
|
|
|
- type: 'number',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
];
|
ananzhusen