import { ReplaceMode } from '@meta2d/chart-diagram'; import { cdn } from './api'; //注册所有主题 export function registerTheme() { fetch((cdn ? cdn + '/v/' : '') + '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 && (chart.data.echarts.theme = theme); } }); }); } 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: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'line', data: [40, 20, 90, 60, 70, 80], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '1月', type: 'float', enableMock: true, mock: '10-40', }, { key: 'echarts.option.series.0.data.1', label: '2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.2', label: '3月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.3', label: '4月', type: 'float', enableMock: true, mock: '20-60', }, { key: 'echarts.option.series.0.data.4', label: '5月', type: 'float', enableMock: true, mock: '0-80', }, { key: 'echarts.option.series.0.data.5', label: '6月', type: 'float', enableMock: true, mock: '60-100', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '多折线图', icon: 'l-duozhexiantu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'line', data: [40, 35, 80, 40, 45, 25], }, { type: 'line', data: [25, 40, 20, 30, 25, 40], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '折线一的1月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.0', label: '折线二的1月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.1', label: '折线一的2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.1.data.1', label: '折线二的2月', type: 'float', enableMock: true, mock: '0-70', }, { key: 'echarts.option.series.0.data.2', label: '折线一的3月', type: 'float', enableMock: true, mock: '8-80', }, { key: 'echarts.option.series.1.data.2', label: '折线二的3月', type: 'float', enableMock: true, mock: '1-70', }, { key: 'echarts.option.series.0.data.3', label: '折线一的4月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.3', label: '折线二的4月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.4', label: '折线一的5月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.4', label: '折线二的5月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.5', label: '折线一的6月', type: 'float', enableMock: true, mock: '0-100', }, { key: 'echarts.option.series.1.data.5', label: '折线二的6月', type: 'float', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '折线趋势图', icon: 'l-zhexiantuqushitu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: [], }, yAxis: { type: 'value', }, series: [ { type: 'line', data: [], }, ], }, replaceMode: 0, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data', label: '数据点', type: 'float', enableMock: true, mock: '0-100', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '基础曲线图', icon: 'l-quxian', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'line', smooth: true, data: [40, 20, 90, 60, 70, 80], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '1月', type: 'float', enableMock: true, mock: '10-40', }, { key: 'echarts.option.series.0.data.1', label: '2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.2', label: '3月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.3', label: '4月', type: 'float', enableMock: true, mock: '20-60', }, { key: 'echarts.option.series.0.data.4', label: '5月', type: 'float', enableMock: true, mock: '0-80', }, { key: 'echarts.option.series.0.data.5', label: '6月', type: 'float', enableMock: true, mock: '60-100', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '多曲线图', icon: 'l-duoquxiantu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'line', smooth: true, data: [40, 35, 80, 40, 45, 25], }, { type: 'line', smooth: true, data: [25, 40, 20, 30, 25, 40], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '折线一的1月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.0', label: '折线二的1月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.1', label: '折线一的2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.1.data.1', label: '折线二的2月', type: 'float', enableMock: true, mock: '0-70', }, { key: 'echarts.option.series.0.data.2', label: '折线一的3月', type: 'float', enableMock: true, mock: '8-80', }, { key: 'echarts.option.series.1.data.2', label: '折线二的3月', type: 'float', enableMock: true, mock: '1-70', }, { key: 'echarts.option.series.0.data.3', label: '折线一的4月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.3', label: '折线二的4月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.4', label: '折线一的5月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.4', label: '折线二的5月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.5', label: '折线一的6月', type: 'float', enableMock: true, mock: '0-100', }, { key: 'echarts.option.series.1.data.5', label: '折线二的6月', type: 'float', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '曲线趋势图', icon: 'l-quxiantuqushitu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: [], }, yAxis: { type: 'value', }, series: [ { type: 'line', smooth: true, data: [], }, ], }, replaceMode: 0, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data', label: '数据点', type: 'float', enableMock: true, mock: '0-100', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '阶梯折线图', icon: 'l-jietizhexian', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'line', step: 'start', data: [40, 20, 90, 60, 70, 80], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '1月', type: 'float', enableMock: true, mock: '10-40', }, { key: 'echarts.option.series.0.data.1', label: '2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.2', label: '3月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.3', label: '4月', type: 'float', enableMock: true, mock: '20-60', }, { key: 'echarts.option.series.0.data.4', label: '5月', type: 'float', enableMock: true, mock: '0-80', }, { key: 'echarts.option.series.0.data.5', label: '6月', type: 'float', enableMock: true, mock: '20-60', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '面积图', show: true, list: [ { name: '基础面积图', icon: 'l-mianjitu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'line', data: [40, 20, 90, 60, 70, 80], areaStyle: { opacity: 0.3 }, smooth: true, }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '1月', type: 'float', enableMock: true, mock: '10-40', }, { key: 'echarts.option.series.0.data.1', label: '2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.2', label: '3月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.3', label: '4月', type: 'float', enableMock: true, mock: '20-60', }, { key: 'echarts.option.series.0.data.4', label: '5月', type: 'float', enableMock: true, mock: '0-80', }, { key: 'echarts.option.series.0.data.5', label: '6月', type: 'float', enableMock: true, mock: '60-100', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '堆叠面积图', icon: 'l-duidiemianjitu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'line', areaStyle: { opacity: 0.3 }, smooth: true, data: [40, 35, 80, 40, 45, 25], }, { type: 'line', areaStyle: { opacity: 0.3 }, smooth: true, data: [25, 40, 20, 30, 25, 40], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '折线一的1月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.0', label: '折线二的1月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.1', label: '折线一的2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.1.data.1', label: '折线二的2月', type: 'float', enableMock: true, mock: '0-70', }, { key: 'echarts.option.series.0.data.2', label: '折线一的3月', type: 'float', enableMock: true, mock: '8-80', }, { key: 'echarts.option.series.1.data.2', label: '折线二的3月', type: 'float', enableMock: true, mock: '1-70', }, { key: 'echarts.option.series.0.data.3', label: '折线一的4月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.3', label: '折线二的4月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.4', label: '折线一的5月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.4', label: '折线二的5月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.5', label: '折线一的6月', type: 'float', enableMock: true, mock: '0-100', }, { key: 'echarts.option.series.1.data.5', label: '折线二的6月', type: 'float', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '柱状图', show: true, list: [ { name: '基础柱状图', icon: 'l-bar-chart', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', max: 100, min: 0, }, series: [ { type: 'bar', data: [ { value: 40, itemStyle: { color: '#6851f1', }, }, { value: 20, itemStyle: { color: '#09bcb7', }, }, { value: 90, itemStyle: { color: '#f5804d', }, }, { value: 60, itemStyle: { color: '#0c56eb', }, }, { value: 70, itemStyle: { color: '#6851f1', }, }, { value: 80, itemStyle: { color: '#09bcb7', }, }, ], }, ], }, max: 100, }, realTimes: [ { key: 'echarts.option.series.0.data.0.value', label: '1月', type: 'float', enableMock: true, mock: '10-40', triggers: [ { name: '触发器1', conditionType: 'and', conditions: [ { type: '', operator: '>', valueType: '', value: '20', }, ], actions: [ { action: 1, params: '', value: { 'echarts.option.series.0.data.0.itemStyle.color': '#ff4000', }, targetType: 'id', }, ], }, { name: '触发器2', conditionType: 'and', conditions: [ { type: '', operator: '<=', valueType: '', value: '20', }, ], actions: [ { action: 1, params: '', value: { 'echarts.option.series.0.data.0.itemStyle.color': '#6851f1', }, targetType: 'id', }, ], }, ], }, { key: 'echarts.option.series.0.data.1.value', label: '2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.2.value', label: '3月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.3.value', label: '4月', type: 'float', enableMock: true, mock: '20-60', }, { key: 'echarts.option.series.0.data.4.value', label: '5月', type: 'float', enableMock: true, mock: '0-80', }, { key: 'echarts.option.series.0.data.5.value', label: '6月', type: 'float', enableMock: true, mock: '60-100', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '分组柱状图', icon: 'l-fenzuzhuzhuangtu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'bar', data: [40, 35, 80, 40, 45, 25], }, { type: 'bar', data: [25, 40, 20, 30, 25, 40], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '分组一的1月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.0', label: '分组二的1月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.1', label: '分组一的2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.1.data.1', label: '分组二的2月', type: 'float', enableMock: true, mock: '0-70', }, { key: 'echarts.option.series.0.data.2', label: '分组一的3月', type: 'float', enableMock: true, mock: '8-80', }, { key: 'echarts.option.series.1.data.2', label: '分组二的3月', type: 'float', enableMock: true, mock: '1-70', }, { key: 'echarts.option.series.0.data.3', label: '分组一的4月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.3', label: '分组二的4月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.4', label: '分组一的5月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.4', label: '分组二的5月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.5', label: '分组一的6月', type: 'float', enableMock: true, mock: '0-100', }, { key: 'echarts.option.series.1.data.5', label: '分组二的6月', type: 'float', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '堆叠柱状图', icon: 'l-duidiezhuzhuangtu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, yAxis: { type: 'value', }, series: [ { type: 'bar', stack: 'one', data: [40, 35, 80, 40, 45, 25], }, { type: 'bar', stack: 'one', data: [25, 40, 20, 30, 25, 40], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '分组一的1月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.0', label: '分组二的1月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.1', label: '分组一的2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.1.data.1', label: '分组二的2月', type: 'float', enableMock: true, mock: '0-70', }, { key: 'echarts.option.series.0.data.2', label: '分组一的3月', type: 'float', enableMock: true, mock: '8-80', }, { key: 'echarts.option.series.1.data.2', label: '分组二的3月', type: 'float', enableMock: true, mock: '1-70', }, { key: 'echarts.option.series.0.data.3', label: '分组一的4月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.3', label: '分组二的4月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.4', label: '分组一的5月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.4', label: '分组二的5月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.5', label: '分组一的6月', type: 'float', enableMock: true, mock: '0-100', }, { key: 'echarts.option.series.1.data.5', label: '分组二的6月', type: 'float', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '条形图', show: true, list: [ { name: '基础条形图', icon: 'l-tiaoxingtu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, fontSize: 10, yAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, xAxis: { type: 'value', max: 100, min: 0, }, series: [ { type: 'bar', data: [40, 20, 90, 60, 70, 80], }, ], }, max: 100, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '1月', type: 'float', enableMock: true, mock: '10-40', }, { key: 'echarts.option.series.0.data.1', label: '2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.2', label: '3月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.0.data.3', label: '4月', type: 'float', enableMock: true, mock: '20-60', }, { key: 'echarts.option.series.0.data.4', label: '5月', type: 'float', enableMock: true, mock: '0-80', }, { key: 'echarts.option.series.0.data.5', label: '6月', type: 'float', enableMock: true, mock: '60-100', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '分组条形图', icon: 'l-fenzutiaoxingtu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { top: 20, bottom: 40, left: 40, right: 20, }, yAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, xAxis: { type: 'value', max: 100, min: 0, }, series: [ { type: 'bar', data: [40, 35, 80, 40, 45, 25], }, { type: 'bar', data: [25, 40, 20, 30, 25, 40], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '分组一的1月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.0', label: '分组二的1月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.1', label: '分组一的2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.1.data.1', label: '分组二的2月', type: 'float', enableMock: true, mock: '0-70', }, { key: 'echarts.option.series.0.data.2', label: '分组一的3月', type: 'float', enableMock: true, mock: '8-80', }, { key: 'echarts.option.series.1.data.2', label: '分组二的3月', type: 'float', enableMock: true, mock: '1-70', }, { key: 'echarts.option.series.0.data.3', label: '分组一的4月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.3', label: '分组二的4月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.4', label: '分组一的5月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.4', label: '分组二的5月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.5', label: '分组一的6月', type: 'float', enableMock: true, mock: '0-100', }, { key: 'echarts.option.series.1.data.5', label: '分组二的6月', type: 'float', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '堆叠条形图', icon: 'l-duidietiaoxingtu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, yAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, xAxis: { type: 'value', max: 100, min: 0, }, series: [ { type: 'bar', stack: 'one', data: [40, 35, 80, 40, 45, 25], }, { type: 'bar', stack: 'one', data: [25, 40, 20, 30, 25, 40], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '分组一的1月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.0', label: '分组二的1月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.1', label: '分组一的2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.1.data.1', label: '分组二的2月', type: 'float', enableMock: true, mock: '0-70', }, { key: 'echarts.option.series.0.data.2', label: '分组一的3月', type: 'float', enableMock: true, mock: '8-80', }, { key: 'echarts.option.series.1.data.2', label: '分组二的3月', type: 'float', enableMock: true, mock: '1-70', }, { key: 'echarts.option.series.0.data.3', label: '分组一的4月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.3', label: '分组二的4月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.4', label: '分组一的5月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.4', label: '分组二的5月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.0.data.5', label: '分组一的6月', type: 'float', enableMock: true, mock: '0-100', }, { key: 'echarts.option.series.1.data.5', label: '分组二的6月', type: 'float', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '正负条形图', icon: 'l-zhengfutiaoxingtu', data: { name: 'echarts', width: 366, height: 206, externElement: true, disableAnchor: true, echarts: { option: { grid: { bottom: 16, left: 16, right: 16, top: 24, containLabel: true, }, yAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'], }, xAxis: { type: 'value', max: 100, min: -50, }, series: [ { type: 'bar', stack: 'one', data: [40, 35, 80, 40, 45, 25], }, { type: 'bar', stack: 'one', data: [25, 40, 20, 30, 25, 40], }, { type: 'bar', stack: 'one', data: [-5, -30, -10, -20, -25, -16], }, ], }, max: 30, }, realTimes: [ { key: 'echarts.option.series.0.data.0', label: '分组一的1月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.0', label: '分组二的1月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.2.data.0', label: '分组三的1月', type: 'float', enableMock: true, mock: '-10--2', }, { key: 'echarts.option.series.0.data.1', label: '分组一的2月', type: 'float', enableMock: true, mock: '0-50', }, { key: 'echarts.option.series.1.data.1', label: '分组二的2月', type: 'float', enableMock: true, mock: '0-70', }, { key: 'echarts.option.series.2.data.1', label: '分组三的2月', type: 'float', enableMock: true, mock: '-30--10', }, { key: 'echarts.option.series.0.data.2', label: '分组一的3月', type: 'float', enableMock: true, mock: '8-80', }, { key: 'echarts.option.series.1.data.2', label: '分组二的3月', type: 'float', enableMock: true, mock: '1-70', }, { key: 'echarts.option.series.2.data.2', label: '分组三的3月', type: 'float', enableMock: true, mock: '-30--1', }, { key: 'echarts.option.series.0.data.3', label: '分组一的4月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.3', label: '分组二的4月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.2.data.3', label: '分组三的4月', type: 'float', enableMock: true, mock: '-50--10', }, { key: 'echarts.option.series.0.data.4', label: '分组一的5月', type: 'float', enableMock: true, mock: '20-100', }, { key: 'echarts.option.series.1.data.4', label: '分组二的5月', type: 'float', enableMock: true, mock: '10-70', }, { key: 'echarts.option.series.2.data.4', label: '分组三的5月', type: 'float', enableMock: true, mock: '-40--10', }, { key: 'echarts.option.series.0.data.5', label: '分组一的6月', type: 'float', enableMock: true, mock: '0-100', }, { key: 'echarts.option.series.1.data.5', label: '分组二的6月', type: 'float', enableMock: true, mock: '30-80', }, { key: 'echarts.option.series.2.data.5', label: '分组三的6月', type: 'float', enableMock: true, mock: '-30--20', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '饼环图', show: true, list: [ { 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%', 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.0.value', label: '2D', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.1.value', label: '3D', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.2.value', label: '大屏', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.3.value', label: '物联网平台', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.4.value', label: '图形库', type: 'integer', enableMock: true, mock: '300-1000', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '环图', icon: 'l-huanxingtu', 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.0.value', label: '2D', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.1.value', label: '3D', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.2.value', label: '大屏', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.3.value', label: '物联网平台', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.4.value', label: '图形库', type: 'integer', enableMock: true, mock: '300-1000', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '圆角环图', icon: 'l-yuanjiaohuanxingtu', 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', }, itemStyle: { borderRadius: 4, borderWidth: 1, }, 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.0.value', label: '2D', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.1.value', label: '3D', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.2.value', label: '大屏', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.3.value', label: '物联网平台', type: 'integer', enableMock: true, mock: '300-1000', }, { key: 'echarts.option.series.0.data.4.value', label: '图形库', type: 'integer', enableMock: true, mock: '300-1000', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '散点图', show: true, list: [ { name: '散点图', icon: 'l-sandiantu', data: { width: 300, height: 200, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { grid: { bottom: 12, left: 16, right: 16, top: 24, containLabel: true, }, 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.0.0', label: '点1.X', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.0.1', label: '点1.Y', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.1.0', label: '点2.X', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.1.1', label: '点2.Y', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.2.0', label: '点3.X', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.2.1', label: '点3.Y', type: 'float', enableMock: true, mock: '10.00-16', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '涟漪散点图', icon: 'l-lianyisandianyu', data: { width: 300, height: 200, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { grid: { bottom: 12, left: 16, right: 16, top: 24, containLabel: true, }, xAxis: { axisLabel: { fontSize: 12, color: '#ffffff', }, }, yAxis: { axisLabel: { fontSize: 12, color: '#ffffff', }, }, series: [ { type: 'effectScatter', symbolSize: 8, data: [ [12.7, 15.2], [13.4, 4], [15.4, 2], ], }, { 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.0.0', label: '点1.X', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.0.1', label: '点1.Y', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.1.0', label: '点2.X', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.1.1', label: '点2.Y', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.2.0', label: '点3.X', type: 'float', enableMock: true, mock: '10.00-16', }, { key: 'echarts.option.series.0.data.2.1', label: '点3.Y', type: 'float', enableMock: true, mock: '10.00-16', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '雷达图', show: true, list: [ { name: '雷达图', icon: 'l-leidatu', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { radar: { indicator: [ { name: '销售', max: 65000 }, { name: '管理', max: 16000 }, { name: '数据', max: 30000 }, { name: '支持', max: 38000 }, { name: '开发', max: 52000 }, { name: '营销', max: 25000 }, ], splitLine: { lineStyle: { opacity: 0.3, }, }, splitArea: { show: false, }, axisLine: { lineStyle: { opacity: 0.1, }, }, }, series: [ { type: 'radar', lineStyle: { width: 1, opacity: 0.5 }, areaStyle: { opacity: 0.1 }, data: [ { value: [52000, 3000, 20000, 35000, 50000, 18000], name: '预算', }, { value: [60000, 14000, 28000, 26000, 42000, 21000], name: '消费', }, ], }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.0.data.0.value.0', label: '预算.销售', type: 'integer', enableMock: true, mock: '40000-65000', }, { key: 'echarts.option.series.0.data.0.value.1', label: '预算.管理', type: 'integer', enableMock: true, mock: '14000-16000', }, { key: 'echarts.option.series.0.data.0.value.2', label: '预算.数据', type: 'integer', enableMock: true, mock: '20000-30000', }, { key: 'echarts.option.series.0.data.0.value.3', label: '预算.支持', type: 'integer', enableMock: true, mock: '30000-38000', }, { key: 'echarts.option.series.0.data.0.value.4', label: '预算.开发', type: 'integer', enableMock: true, mock: '30000-52000', }, { key: 'echarts.option.series.0.data.0.value.5', label: '预算.营销', type: 'integer', enableMock: true, mock: '10000-25000', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '圆形雷达图', icon: 'l-yuanxingleidatu', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { radar: { shape: 'circle', indicator: [ { name: '销售', max: 65000 }, { name: '管理', max: 16000 }, { name: '数据', max: 30000 }, { name: '支持', max: 38000 }, { name: '开发', max: 52000 }, { name: '营销', max: 25000 }, ], splitLine: { lineStyle: { opacity: 0.3, }, }, splitArea: { show: false, }, axisLine: { lineStyle: { opacity: 0.1, }, }, }, series: [ { type: 'radar', lineStyle: { width: 1, opacity: 0.5 }, areaStyle: { opacity: 0.1 }, data: [ { value: [52000, 3000, 20000, 35000, 50000, 18000], name: '预算', }, { value: [60000, 14000, 28000, 26000, 42000, 21000], name: '消费', }, ], }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.0.data.0.value.0', label: '预算.销售', type: 'integer', enableMock: true, mock: '40000-65000', }, { key: 'echarts.option.series.0.data.0.value.1', label: '预算.管理', type: 'integer', enableMock: true, mock: '14000-16000', }, { key: 'echarts.option.series.0.data.0.value.2', label: '预算.数据', type: 'integer', enableMock: true, mock: '20000-30000', }, { key: 'echarts.option.series.0.data.0.value.3', label: '预算.支持', type: 'integer', enableMock: true, mock: '30000-38000', }, { key: 'echarts.option.series.0.data.0.value.4', label: '预算.开发', type: 'integer', enableMock: true, mock: '30000-52000', }, { key: 'echarts.option.series.0.data.0.value.5', label: '预算.营销', type: 'integer', enableMock: true, mock: '10000-25000', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '关系图', show: true, list: [ { name: '力引导布局', icon: 'l-liyindaobuju', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { tooltip: {}, series: [ { type: 'graph', layout: 'force', data: [ { id: '0', name: '1', symbolSize: 6, category: 0, }, { id: '1', name: '2', symbolSize: 6, category: 0, }, { id: '2', name: '3', symbolSize: 6, category: 0, }, { id: '3', name: '4', symbolSize: 6, category: 0, }, { id: '4', name: '5', symbolSize: 6, category: 0, }, { id: '5', name: '6', symbolSize: 6, category: 0, }, { id: '6', name: '7', symbolSize: 6, category: 1, }, { id: '7', name: '8', symbolSize: 6, category: 1, }, { id: '8', name: '9', symbolSize: 6, category: 2, }, { id: '9', name: '10', symbolSize: 6, category: 2, }, { id: '10', name: '11', symbolSize: 6, category: 2, }, { id: '11', name: '12', symbolSize: 6, category: 2, }, { id: '12', name: '13', symbolSize: 6, category: 2, }, { id: '13', name: '14', symbolSize: 6, category: 3, }, { id: '14', name: '15', symbolSize: 6, category: 3, }, { id: '15', name: '16', symbolSize: 6, category: 3, }, { id: '16', name: '17', symbolSize: 6, category: 3, }, { id: '17', name: '18', symbolSize: 6, category: 3, }, { id: '18', name: '19', symbolSize: 6, category: 3, }, ], links: [ { source: '0', target: '3' }, { source: '1', target: '3' }, { source: '2', target: '3' }, { source: '3', target: '5' }, { source: '4', target: '3' }, { source: '5', target: '8' }, { source: '6', target: '5' }, { source: '7', target: '5' }, { source: '8', target: '10' }, { source: '9', target: '8' }, { source: '10', target: '12' }, { source: '11', target: '12' }, { source: '12', target: '10' }, { source: '13', target: '12' }, { source: '14', target: '9' }, { source: '15', target: '14' }, { source: '16', target: '8' }, { source: '17', target: '12' }, { source: '18', target: '8' }, ], categories: [ { name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }, ], roam: true, force: { repulsion: 30, gravity: 0.03, edgeLength: 50, layoutAnimation: true, }, }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.0.data', label: 'data', type: 'array', }, { key: 'echarts.option.series.0.links', label: 'links', type: 'array', }, { key: 'echarts.option.series.0.categories', label: 'categories', type: 'array', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '知识图谱', icon: 'l-zhishitupu', data: { width: 400, height: 400, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { tooltip: {}, series: [ { type: 'graph', symbolSize: 58, layout: 'force', data: [ { name: '操作系统', category: 0, }, { name: '浏览器', category: 0, }, { name: 'HTML', category: 0, }, { name: 'JavaScript', category: 0, }, { name: 'CSS', category: 0, }, { name: 'Chrome', category: 1, }, { name: 'IE', category: 1, }, { name: 'Firefox', category: 1, }, { name: 'Safari', category: 1, }, ], links: [ { source: '浏览器', target: '操作系统', name: '包含', lineStyle: { color: '#4583ff' }, }, { source: 'HTML', target: '浏览器', name: '实现', lineStyle: { color: '#4583ff' }, }, { source: 'CSS', target: '浏览器', name: '实现', lineStyle: { color: '#4583ff' }, }, { source: 'JavaScript', target: '浏览器', name: '实现', lineStyle: { color: '#4583ff' }, }, { source: 'Chrome', target: '浏览器', name: '属于', lineStyle: { color: '#4583ff' }, }, { source: 'IE', target: '浏览器', name: '属于', lineStyle: { color: '#4583ff' }, }, { source: 'Firefox', target: '浏览器', name: '属于', lineStyle: { color: '#4583ff' }, }, { source: 'Safari', target: '浏览器', name: '属于', lineStyle: { color: '#4583ff' }, }, { source: 'Chrome', target: 'JavaScript', name: '关联', lineStyle: { color: '#4583ff' }, }, ], categories: [ { name: 'A', itemStyle: { color: '#4583ff', }, }, { name: 'B' }, { name: 'C' }, { name: 'D' }, ], roam: true, edgeSymbol: ['', 'arrow'], label: { show: true, }, edgeLabel: { normal: { show: true, color: '#4583ff', formatter(x) { return x.data.name; }, }, }, force: { repulsion: 500, edgeLength: 120, }, }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.0.data', label: 'data', type: 'array', }, { key: 'echarts.option.series.0.links', label: 'links', type: 'array', }, { key: 'echarts.option.series.0.categories', label: 'categories', type: 'array', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '桑葚图', show: true, list: [ { name: '桑基图', icon: 'l-sangjitu', data: { width: 300, height: 200, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { series: { right: 30.0, 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.data', label: 'data', type: 'array', }, { key: 'echarts.option.series.links', label: 'links', type: 'array', }, { key: 'echarts.option.series.links.0.value', label: 'a->a1', type: 'integer', enableMock: true, mock: '3-8', }, { key: 'echarts.option.series.links.1.value', label: 'a->a2', type: 'integer', enableMock: true, mock: '1-8', }, { key: 'echarts.option.series.links.2.value', label: 'b->b1', type: 'integer', enableMock: true, mock: '1-8', }, { key: 'echarts.option.series.links.3.value', label: 'a->b1', type: 'integer', enableMock: true, mock: '1-8', }, { key: 'echarts.option.series.links.4.value', label: 'b1->a1', type: 'integer', enableMock: true, mock: '1-8', }, { key: 'echarts.option.series.links.5.value', label: 'b1->c', type: 'integer', enableMock: true, mock: '1-8', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '自定义桑基图', icon: 'l-zidingyisangjitu', data: { width: 400, height: 500, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { series: { right: 30.0, type: 'sankey', layout: 'none', layoutIterations: 0, emphasis: { focus: 'adjacency', }, lineStyle: { color: 'source', opacity: 0.45, curveness: 0.5, }, label: { color: '#fff', fontSize: 10, }, data: [ { name: '华中', itemStyle: { color: 'rgba(0,176,80)', borderColor: 'rgba(0,176,80)', }, }, { name: '华南', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '华东', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '华北', itemStyle: { color: 'rgba(198,89,17)', borderColor: 'rgba(198,89,17)', }, }, { name: '西北', itemStyle: { color: 'rgba(112,173,71)', borderColor: 'rgba(112,173,71)', }, }, { name: '西南', itemStyle: { color: 'rgba(117,113,113)', borderColor: 'rgba(117,113,113)', }, }, { name: '北京', itemStyle: { color: 'rgba(198,89,17)', borderColor: 'rgba(198,89,17)', }, }, { name: '上海', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '武汉', itemStyle: { color: 'rgba(0,176,80)', borderColor: 'rgba(0,176,80)', }, }, { name: '济南', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '东莞', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '珠海', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '青岛', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '无锡', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '厦门', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '成都', itemStyle: { color: 'rgba(0,176,80)', borderColor: 'rgba(0,176,80)', }, }, { name: '杭州', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '金华', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '南京', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '西安', itemStyle: { color: 'rgba(112,173,71)', borderColor: 'rgba(112,173,71)', }, }, { name: '中山', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '天津', itemStyle: { color: 'rgba(198,89,17)', borderColor: 'rgba(198,89,17)', }, }, { name: '苏州', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '威海', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '银川', itemStyle: { color: 'rgba(112,173,71)', borderColor: 'rgba(112,173,71)', }, }, { name: '贵阳', itemStyle: { color: 'rgba(0,176,80)', borderColor: 'rgba(0,176,80)', }, }, { name: '佛山', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '东营', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '舟山', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '郑州', itemStyle: { color: 'rgba(0,176,80)', borderColor: 'rgba(0,176,80)', }, }, { name: '烟台', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '嘉兴', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '三亚', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '宁波', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '潍坊', itemStyle: { color: 'rgba(198,89,17)', borderColor: 'rgba(198,89,17)', }, }, { name: '合肥', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '湖州', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '枣庄', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '太原', itemStyle: { color: 'rgba(198,89,17)', borderColor: 'rgba(198,89,17)', }, }, { name: '海口', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '长沙', itemStyle: { color: 'rgba(0,176,80)', borderColor: 'rgba(0,176,80)', }, }, { name: '淄博', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '聊城', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '常州', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '济宁', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '南宁', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '梅州', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '遵义', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '南昌', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '宿迁', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '福州', itemStyle: { color: 'rgba(48,84,150)', borderColor: 'rgba(48,84,150)', }, }, { name: '桂林', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '广州', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '深圳', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '惠州', itemStyle: { color: 'rgba(112,48,160)', borderColor: 'rgba(112,48,160)', }, }, { name: '拉萨', itemStyle: { color: 'rgba(117,113,113)', borderColor: 'rgba(117,113,113)', }, }, ], links: [ { source: '武汉', target: '华中', value: 1 }, { source: '深圳', target: '华南', value: 1 }, { source: '北京', target: '华北', value: 1 }, { source: '广州', target: '华南', value: 1 }, { source: '上海', target: '华东', value: 1 }, { source: '济南', target: '华东', value: 1 }, { source: '东莞', target: '华南', value: 1 }, { source: '珠海', target: '华南', value: 1 }, { source: '青岛', target: '华东', value: 1 }, { source: '无锡', target: '华东', value: 1 }, { source: '厦门', target: '华东', value: 1 }, { source: '成都', target: '华中', value: 1 }, { source: '杭州', target: '华东', value: 1 }, { source: '金华', target: '华东', value: 1 }, { source: '南京', target: '华东', value: 1 }, { source: '西安', target: '西北', value: 1 }, { source: '中山', target: '华南', value: 1 }, { source: '天津', target: '华北', value: 1 }, { source: '苏州', target: '华东', value: 1 }, { source: '威海', target: '华东', value: 1 }, { source: '银川', target: '西北', value: 1 }, { source: '贵阳', target: '华中', value: 1 }, { source: '佛山', target: '华南', value: 1 }, { source: '东营', target: '华东', value: 1 }, { source: '舟山', target: '华东', value: 1 }, { source: '郑州', target: '华中', value: 1 }, { source: '烟台', target: '华东', value: 1 }, { source: '嘉兴', target: '华东', value: 1 }, { source: '三亚', target: '华南', value: 1 }, { source: '宁波', target: '华东', value: 1 }, { source: '潍坊', target: '华北', value: 1 }, { source: '合肥', target: '华东', value: 1 }, { source: '湖州', target: '华东', value: 1 }, { source: '枣庄', target: '华东', value: 1 }, { source: '太原', target: '华北', value: 1 }, { source: '海口', target: '华南', value: 1 }, { source: '长沙', target: '华中', value: 1 }, { source: '淄博', target: '华东', value: 1 }, { source: '聊城', target: '华东', value: 1 }, { source: '常州', target: '华东', value: 1 }, { source: '济宁', target: '华东', value: 1 }, { source: '南宁', target: '华南', value: 1 }, { source: '梅州', target: '华南', value: 1 }, { source: '遵义', target: '华东', value: 1 }, { source: '南昌', target: '华东', value: 1 }, { source: '宿迁', target: '华东', value: 1 }, { source: '福州', target: '华东', value: 1 }, { source: '桂林', target: '华南', value: 1 }, { source: '惠州', target: '华南', value: 1 }, { source: '拉萨', target: '西南', value: 1 }, ], }, }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.data', label: 'data', type: 'array', }, { key: 'echarts.option.series.links', label: 'links', type: 'array', }, { key: 'echarts.option.series.links.0.value', label: '武汉->华中', type: 'integer', enableMock: true, mock: '1-18', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '仪表盘', show: true, list: [ { name: '基础仪表盘', icon: 'l-dashboard-chart', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { fontSize: 10, series: [ { type: 'gauge', radius: '100%', axisLine: { roundCap: true, lineStyle: { color: [[1, 'rgba(107,157,215,.25)']], width: 8, }, }, axisTick: { distance: 4, lineStyle: { color: '#6B9DD7', }, }, splitLine: { distance: 4, lineStyle: { width: 2, color: 'rgb(107,157,215)', }, }, detail: { color: '#0c56eb', }, progress: { show: true, roundCap: true, width: 8, }, axisLabel: { color: '#ddd', }, itemStyle: { color: '#0c56eb', }, pointer: { itemStyle: { borderWidth: 0, }, }, data: [{ value: 70 }], }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.0.data.0.value', label: '值', type: 'integer', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '圆盘仪表盘', icon: 'l-yuanpanyibiaopan', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { fontSize: 10, series: [ { name: '最外部进度条', type: 'gauge', radius: '96%', splitNumber: 10, axisLine: { lineStyle: { color: [[1, 'rgba(107,157,215,.25)']], width: 8, }, }, progress: { show: true, width: 8, }, axisTick: { distance: 8, splitNumber: 5, lineStyle: { color: '#42E5FB', width: 1, }, length: 8, }, splitLine: { distance: 8, length: 15, lineStyle: { width: 2, color: '#42E5FB', }, }, axisLabel: { show: false, }, itemStyle: { show: false, }, detail: { color: '#ACCFFF', fontSize: 16, fontWeight: 400, offsetCenter: [0, '24%'], }, data: [{ value: 60 }], pointer: { length: '40%', radius: '20%', width: 4, itemStyle: { color: '#45CAED', borderWidth: 0, }, }, }, { name: '指针上的圆', type: 'pie', z: 5, hoverAnimation: false, legendHoverLink: false, radius: ['0%', '6%'], center: ['50%', '50%'], label: { normal: { show: false, }, }, labelLine: { normal: { show: false, }, }, data: [ { value: 10, itemStyle: { normal: { color: '#45CAED', borderWidth: 0, }, }, }, ], }, { name: '外层透明圆', type: 'pie', radius: '60%', startAngle: 0, endAngle: 360, hoverAnimation: false, center: ['50%', '50%'], avoidLabelOverlap: false, label: { show: false, }, labelLine: { show: false, }, data: [ { value: 1, }, ], itemStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#17A1FF', }, { offset: 1, color: 'rgba(17, 90, 233, 0.16)', }, ], }, opacity: 0.2, }, }, }, { name: '内圆', type: 'pie', radius: '48%', center: ['50%', '50%'], startAngle: 0, endAngle: 360, label: { show: false, }, labelLine: { show: false, }, data: [ { value: 1, }, ], itemStyle: { color: { colorStops: [ { offset: 0, color: '#23A6FF', }, { offset: 1, color: 'rgba(17, 90, 233, 0.21) ', }, ], x: 0, y: 0, x2: 0, y2: 1, type: 'linear', global: false, }, opacity: 0.5, borderWidth: 0, }, }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.0.data.0.value', label: '值', type: 'integer', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '进度仪表盘', icon: 'l-jinduyibiaopan', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { fontSize: 10, series: [ { name: '最外部环', type: 'gauge', radius: '96%', splitNumber: 10, axisLine: { lineStyle: { color: [[1, '#33507A']], width: 8, }, }, axisTick: { distance: 8, splitNumber: 10, lineStyle: { color: '#42E5FB', width: 1, }, length: 8, }, splitLine: { distance: 8, length: 15, lineStyle: { width: 2, color: '#42E5FB', }, }, axisLabel: { show: false, }, itemStyle: { show: false, }, detail: { show: false, }, title: { show: false, }, data: [], pointer: { show: false, }, }, { name: '仪表盘', type: 'gauge', radius: '70%', z: 4, axisLine: { lineStyle: { color: [[1, 'rgba(0,0,0,0)']], width: 20, }, }, axisLabel: { show: false, }, axisTick: { show: false, }, splitLine: { show: false, }, itemStyle: { color: 'rgba(0,191,194,0.5)', }, progress: { width: 20, show: true, }, detail: { offsetCenter: [0, 50], textStyle: { padding: [0, 0, 0, 0], fontSize: 30, color: '#468EFD', }, }, data: [ { value: 36, }, ], pointer: { width: 3, itemStyle: { borderWidth: 0, }, }, }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.1.data.0.value', label: '值', type: 'integer', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '蓝色科技1', icon: 'l-lansekeji1', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { fontSize: 10, series: [ { type: 'gauge', radius: '98%', splitNumber: 10, axisLine: { lineStyle: { color: [[1, 'rgba(107,157,215,.25)']], width: 8, }, }, axisLabel: { color: '#4d5bd1', distance: 16, }, axisTick: { distance: 16, splitNumber: 5, lineStyle: { color: '#468EFD', width: 1, }, length: 8, }, splitLine: { distance: 16, length: 16, lineStyle: { color: '#468EFD', }, }, itemStyle: { show: false, color: '#0c56eb', }, progress: { show: true, }, detail: { offsetCenter: [0, 50], textStyle: { padding: [0, 0, 0, 0], fontSize: 18, fontWeight: '700', color: '#0c56eb', }, }, data: [ { value: 58, }, ], pointer: { length: '75%', radius: '20%', width: 5, itemStyle: { borderWidth: 0, }, }, }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.0.data.0.value', label: '值', type: 'integer', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '蓝色科技2', icon: 'l-lansekeji2', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { fontSize: 10, series: [ { type: 'gauge', radius: '60%', splitNumber: 10, axisLine: { lineStyle: { color: [[1, 'rgba(107,157,215,.25)']], width: 8, }, }, axisLabel: { color: '#4d5bd1', distance: 16, }, axisTick: { distance: -50, splitNumber: 5, lineStyle: { color: '#468EFD', width: 1, }, length: 8, }, splitLine: { distance: -58, length: 16, lineStyle: { color: '#468EFD', }, }, itemStyle: { show: false, color: '#0c56eb', }, progress: { show: true, }, detail: { offsetCenter: [0, 50], textStyle: { padding: [0, 0, 0, 0], fontSize: 18, fontWeight: '700', color: '#0c56eb', }, }, data: [ { value: 58, }, ], pointer: { length: '75%', radius: '20%', width: 5, itemStyle: { borderWidth: 0, }, }, }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.0.data.0.value', label: '值', type: 'integer', enableMock: true, mock: '30-80', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '蓝色科技3', icon: 'l-lansekeji3', data: { width: 300, height: 300, disableAnchor: true, externElement: true, name: 'echarts', echarts: { option: { fontSize: 10, series: [ { name: '最外部进度条', type: 'gauge', radius: '100%', z: 3, axisLine: { lineStyle: { color: [[1, 'rgba(28,128,245,0)']], width: 3, }, }, axisLabel: { show: false, }, axisTick: { show: false, }, splitLine: { show: false, }, pointer: { show: false, }, progress: { show: true, width: 5, itemStyle: { color: 'rgba(133,165,255,0.3)', borderWidth: 0, }, }, detail: { offsetCenter: [0, 2], textStyle: { fontSize: 16, fontWeight: 400, color: '#EDFFFD', }, }, data: [ { value: 40, }, ], }, { name: '刻度线', type: 'gauge', radius: '80%', splitNumber: 10, axisLine: { lineStyle: { color: [[1, '#0063E7']], width: -3, }, }, axisLabel: { color: '#69b1ff', distance: 8, fontSize: 12, }, axisTick: { distance: 6, splitNumber: 5, lineStyle: { color: '#002c8c', width: 1, }, length: 4, }, splitLine: { distance: 6, length: 10, lineStyle: { color: '#002c8c', width: 2, }, }, progress: { show: true, width: 60, itemStyle: { color: 'rgba(145,207,255,0.12)', borderWidth: 0, }, }, detail: { show: false, }, pointer: { length: '100%', radius: '20%', width: 3, itemStyle: { borderWidth: 0, color: 'rgba(69,131,255,0.3)', }, }, anchor: { show: true, showAbove: true, size: 50, itemStyle: { color: 'rgb(42,65,111)', }, }, data: [ { value: 40, }, ], }, ], }, replaceMode: ReplaceMode.Replace, }, realTimes: [ { key: 'echarts.option.series.1.data.0.value', label: '值', type: 'integer', enableMock: true, mock: '30-80', triggers: [ { name: '触发器1', conditionType: 'and', conditions: [], actions: [ { action: 5, params: '', value: "let v = pen.echarts.option.series[1].data[0].value;meta2d.setValue({id:pen.id,'echarts.option.series.0.data.0.value':v},{doEvent:false});", targetType: 'id', props: [], input: '', }, ], }, ], }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { name: '地图', show: true, list: [ { name: '中国地图', icon: 'l-earth', data: { name: 'echarts', width: 500, height: 400, externElement: true, disableAnchor: true, echarts: { geoName: 'china', geoUrl: 'https://assets.le5lecdn.com/v/geo/china.json', option: { tooltip: {}, geo: { map: 'china', zoom: 1.6, center: [105, 35], label: { normal: { show: false, }, emphasis: { show: false, }, }, // 地图区域的样式设置 itemStyle: { normal: { borderColor: 'rgba(26,82,231, 1)', borderWidth: 1, areaColor: 'rgba(7, 52, 126, 0.3)', }, emphasis: { areaColor: '#1677ff80', borderColor: '#1677ff', }, }, }, series: [ { name: '涟漪散点', tooltip: { show: false, }, type: 'effectScatter', coordinateSystem: 'geo', data: [{ name: '武汉', value: [114.31, 30.52] }], symbolSize: 8, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', }, hoverAnimation: true, label: { show: true, formatter: '{b}', position: 'bottom', color: 'yellow', offset: [0, 4], }, itemStyle: { normal: { color: 'yellow', shadowBlur: 10, shadowColor: 'yellow', }, }, zlevel: 1, }, { name: '散点', tooltip: { show: false, }, type: 'scatter', coordinateSystem: 'geo', data: [ { name: '北京', value: [116.4551, 40.2539] }, { name: '上海', value: [121.4648, 31.2891] }, { name: '广州', value: [113.12244, 23.009505] }, { name: '杭州', value: [119.5313, 29.8773] }, { name: '成都', value: [103.9526, 30.7617] }, ], symbolSize: 8, label: { show: true, formatter: '{b}', position: 'bottom', color: '#36cfc9', offset: [0, -2], }, itemStyle: { normal: { color: '#36cfc9', }, }, zlevel: 1, }, { name: '数据', tooltip: { formatter: '{b}' }, animation: false, type: 'scatter', coordinateSystem: 'geo', symbol: 'pin', symbolSize: 40, label: { normal: { show: true, formatter: '{b}', textStyle: { color: '#fff', fontSize: 9, }, }, }, itemStyle: { normal: { color: '#F62157', }, }, zlevel: 6, data: [ { name: 128, value: [114.31, 30.52] }, { name: 96, value: [116.4551, 40.2539] }, { name: 94, value: [121.4648, 31.2891] }, { name: 86, value: [113.12244, 23.009505] }, { name: 92, value: [119.5313, 29.8773] }, { name: 82, value: [103.9526, 30.7617] }, ], }, ], }, }, realTimes: [ { key: 'echarts.option.series.2.data.0.name', label: '武汉', type: 'integer', enableMock: true, mock: '100-150', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '湖北地图', icon: 'l-hubei', data: { name: 'echarts', width: 500, height: 400, externElement: true, disableAnchor: true, echarts: { geoName: 'hubei', geoUrl: 'https://assets.le5lecdn.com/v/geo/hubei.json', option: { tooltip: {}, geo: { map: 'hubei', zoom: 1.2, label: { normal: { show: false, }, emphasis: { show: false, }, }, // 地图区域的样式设置 itemStyle: { normal: { areaColor: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#001d66a0', }, { offset: 1, color: '#061E3Da0', }, ], }, borderColor: 'rgba(26,82,231, 1)', borderWidth: 1, }, emphasis: { areaColor: '#1677ff80', borderColor: '#1677ff', }, }, }, series: [ { name: '涟漪', tooltip: { show: false, }, type: 'effectScatter', coordinateSystem: 'geo', data: [ { name: '武汉', value: [114.31, 30.52] }, { name: '襄阳', value: [112.12207, 31.933056] }, { name: '宜昌', value: [111.309082, 30.588625] }, { name: '荆州', value: [112.24292, 30.266177] }, ], rippleEffect: { scale: 10, brushType: 'stroke', }, showEffectOn: 'render', itemStyle: { normal: { shadowColor: '#0ff', shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, color: { colorStops: [ { offset: 0, color: '#61c0f1', }, { offset: 1, color: '#6f2eb6', }, ], x: 1, y: 0, x2: 0, y2: 0, type: 'linear', global: false, }, }, }, label: { normal: { color: '#fff', }, }, symbol: 'circle', symbolSize: [10, 5], }, { tooltip: { show: false, }, name: '图标', type: 'scatter', coordinateSystem: 'geo', symbol: 'image://https://assets.le5lecdn.com/v%2Fmaterial%2F%E5%B8%B8%E7%94%A8%E5%9B%BE%E6%A0%87%2F%E5%9C%B0%E5%9B%BE%E6%A0%87%E6%B3%A8.svg', symbolSize: [32, 32], symbolOffset: [0, -20], z: 9999, data: [ { name: '武汉', value: [114.31, 30.52] }, { name: '襄阳', value: [112.12207, 31.933056] }, { name: '宜昌', value: [111.309082, 30.588625] }, { name: '荆州', value: [112.24292, 30.266177] }, ], }, { type: 'scatter', coordinateSystem: 'geo', tooltip: { formatter: '统计：{b}' }, animation: false, label: { normal: { show: true, formatter: '{b}', color: '#fff', }, emphasis: { show: true, }, }, itemStyle: { color: '#4583ff70', }, symbol: 'image://https://assets.le5lecdn.com/v/material/%E9%9D%A2%E6%9D%BF/%E9%9D%A2%E6%9D%BF8.svg', symbolSize: [80, 36], symbolOffset: [0, -60], z: 999, data: [ { name: '2514', value: [114.31, 30.52] }, { name: '1265', value: [112.12207, 31.933056] }, { name: '1563', value: [111.309082, 30.588625] }, { name: '1654', value: [112.24292, 30.266177] }, ], }, ], }, }, realTimes: [ { key: 'echarts.option.series.2.data.0.name', label: '武汉', type: 'integer', enableMock: true, mock: '2000-3000', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, { name: '地图·流量', icon: 'l-dituliuliang', data: { name: 'echarts', width: 500, height: 400, externElement: true, disableAnchor: true, echarts: { geoName: 'china', geoUrl: 'https://assets.le5lecdn.com/v/geo/china.json', option: { tooltip: {}, geo: { map: 'china', zoom: 1.6, center: [105, 35], label: { normal: { show: true, fontSize: 10, textStyle: { color: '#fff', }, }, emphasis: { textStyle: { color: '#fff', }, }, }, // 地图区域的样式设置 itemStyle: { normal: { borderColor: 'rgba(26,82,231, 1)', borderWidth: 1, areaColor: 'rgba(7, 52, 126, 0.3)', }, emphasis: { areaColor: '#1677ff80', borderColor: '#1677ff', }, }, }, series: [ { name: '涟漪散点', tooltip: { show: false, }, type: 'effectScatter', coordinateSystem: 'geo', data: [ { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' }, }, { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' }, }, { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' }, }, { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' }, }, { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' }, }, { value: [123.1238, 42.1216], itemStyle: { color: '#f56321' }, }, { value: [119.4543, 25.9222], itemStyle: { color: '#f56f1c' }, }, { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' }, }, { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' }, }, { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' }, }, { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' }, }, { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' }, }, { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' }, }, { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' }, }, { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' }, }, { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' }, }, { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' }, }, { value: [114.31, 30.52] }, ], symbolSize: 8, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', }, hoverAnimation: true, label: { show: true, formatter: '{b}', position: 'bottom', color: 'yellow', offset: [0, 4], }, itemStyle: { normal: { color: '#1DE9B6', shadowBlur: 10, shadowColor: '#333', }, }, zlevel: 1, }, { type: 'lines', zlevel: 2, effect: { show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 7, //图标大小 }, lineStyle: { normal: { color: '#1DE9B6', width: 1, opacity: 0.1, //尾迹线条透明度 curveness: 0.3, //尾迹线条曲直度 }, }, data: [ { coords: [ [118.8062, 31.9208], [114.31, 30.52], ], lineStyle: { color: '#4ab2e5' }, }, { coords: [ [127.9688, 45.368], [114.31, 30.52], ], lineStyle: { color: '#4fb6d2' }, }, { coords: [ [110.3467, 41.4899], [114.31, 30.52], ], lineStyle: { color: '#52b9c7' }, }, { coords: [ [125.8154, 44.2584], [114.31, 30.52], ], lineStyle: { color: '#5abead' }, }, { coords: [ [116.4551, 40.2539], [114.31, 30.52], ], lineStyle: { color: '#f34e2b' }, }, { coords: [ [123.1238, 42.1216], [114.31, 30.52], ], lineStyle: { color: '#f56321' }, }, { coords: [ [119.4543, 25.9222], [114.31, 30.52], ], lineStyle: { color: '#f56f1c' }, }, { coords: [ [117.4219, 39.4189], [114.31, 30.52], ], lineStyle: { color: '#f58414' }, }, { coords: [ [112.3352, 37.9413], [114.31, 30.52], ], lineStyle: { color: '#f58f0e' }, }, { coords: [ [109.1162, 34.2004], [114.31, 30.52], ], lineStyle: { color: '#f5a305' }, }, { coords: [ [103.5901, 36.3043], [114.31, 30.52], ], lineStyle: { color: '#e7ab0b' }, }, { coords: [ [106.3586, 38.1775], [114.31, 30.52], ], lineStyle: { color: '#dfae10' }, }, { coords: [ [101.4038, 36.8207], [114.31, 30.52], ], lineStyle: { color: '#d5b314' }, }, { coords: [ [103.9526, 30.7617], [114.31, 30.52], ], lineStyle: { color: '#c1bb1f' }, }, { coords: [ [108.384366, 30.439702], [114.31, 30.52], ], lineStyle: { color: '#b9be23' }, }, { coords: [ [113.0823, 28.2568], [114.31, 30.52], ], lineStyle: { color: '#a6c62c' }, }, { coords: [ [102.9199, 25.46639], [114.31, 30.52], ], lineStyle: { color: '#96cc34' }, }, ], }, ], }, }, realTimes: [ { key: 'echarts.option.series.2.data.0.name', label: '武汉', type: 'integer', // enableMock: true, // mock: '100-150', }, ], props: { custom: [ { key: 'echarts', label: 'echarts配置', type: 'code', }, ], }, }, }, ], }, { 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', }, }, ], }, ];