mirror of
https://github.com/zuiidea/antd-admin
synced 2026-10-21 23:23:43 +00:00
chore code: clear some warnings and remove MapChart & AirportCoord
This commit is contained in:
baorong
@@ -50,57 +50,5 @@
|
||||
"Username": "Username",
|
||||
"Views": "Views",
|
||||
"Visibility": "Visibility",
|
||||
"You have viewed all notifications.": "You have viewed all notifications.",
|
||||
"XxmuIa": "/dashboard",
|
||||
"Bn3tSA": "Add Param",
|
||||
"Du6bPw": "Address",
|
||||
"RCU5PY": "Age",
|
||||
"JOrM7W": "Are you sure delete this record?",
|
||||
"VbeIOx": "Author",
|
||||
"kfcRb0": "Avatar",
|
||||
"NUrY9o": "Categories",
|
||||
"uFxfjI": "Clear notifications",
|
||||
"VbyRUy": "Comments",
|
||||
"hYgDIe": "Create",
|
||||
"Jd2r4y": "Create User",
|
||||
"rWPWqL": "CreateTime",
|
||||
"pvnfJD": "Dark",
|
||||
"cnGeoo": "Delete",
|
||||
"O3oNi5": "Email",
|
||||
"M9iqFS": "Female",
|
||||
"5iyJje": "Gender",
|
||||
"bVsnqU": "Hi,",
|
||||
"hG89Ed": "Image",
|
||||
"1njn7W": "Light",
|
||||
"CvCWBI": "Male",
|
||||
"6YtxFj": "Name",
|
||||
"fnzSx+": "NickName",
|
||||
"pAtylB": "Not Found",
|
||||
"FZg3wM": "Operation",
|
||||
"LnZ59a": "Params",
|
||||
"8ZsakT": "Password",
|
||||
"zmwvG2": "Phone",
|
||||
"sK+agT": "Pick an address",
|
||||
"f4wMI5": "Please pick an address",
|
||||
"Ef7VI0": "Publised",
|
||||
"iUSbjZ": "Publish Date",
|
||||
"OfhWJH": "Reset",
|
||||
"A1taO8": "Search",
|
||||
"BVgBUp": "Search Name",
|
||||
"JlFcis": "Send",
|
||||
"5lWFkC": "Sign in",
|
||||
"fcWrnU": "Sign out",
|
||||
"u/4llg": "Switch Theme",
|
||||
"OYHzN1": "Tags",
|
||||
"GqIw2D": "The input is not valid E-mail!",
|
||||
"y4Rltr": "The input is not valid phone!",
|
||||
"MHrjPM": "Title",
|
||||
"EPhORN": "Total {total} Items",
|
||||
"ejZKhw": "Unpublished",
|
||||
"EkH9pt": "Update",
|
||||
"99qsr/": "Update User",
|
||||
"7sNhEz": "Username",
|
||||
"1I6UoR": "Views",
|
||||
"2q/Q7x": "Visibility",
|
||||
"I4ObGc": "You have viewed all notifications."
|
||||
"You have viewed all notifications.": "You have viewed all notifications."
|
||||
}
|
||||
@@ -50,57 +50,5 @@
|
||||
"Username": "Usuário",
|
||||
"Views": "visualizações",
|
||||
"Visibility": "Visibilidade",
|
||||
"You have viewed all notifications.": "Você visualizou todas as notificações.",
|
||||
"XxmuIa": "",
|
||||
"Bn3tSA": "",
|
||||
"Du6bPw": "",
|
||||
"RCU5PY": "",
|
||||
"JOrM7W": "",
|
||||
"VbeIOx": "",
|
||||
"kfcRb0": "",
|
||||
"NUrY9o": "",
|
||||
"uFxfjI": "",
|
||||
"VbyRUy": "",
|
||||
"hYgDIe": "",
|
||||
"Jd2r4y": "",
|
||||
"rWPWqL": "",
|
||||
"pvnfJD": "",
|
||||
"cnGeoo": "",
|
||||
"O3oNi5": "",
|
||||
"M9iqFS": "",
|
||||
"5iyJje": "",
|
||||
"bVsnqU": "",
|
||||
"hG89Ed": "",
|
||||
"1njn7W": "",
|
||||
"CvCWBI": "",
|
||||
"6YtxFj": "",
|
||||
"fnzSx+": "",
|
||||
"pAtylB": "",
|
||||
"FZg3wM": "",
|
||||
"LnZ59a": "",
|
||||
"8ZsakT": "",
|
||||
"zmwvG2": "",
|
||||
"sK+agT": "",
|
||||
"f4wMI5": "",
|
||||
"Ef7VI0": "",
|
||||
"iUSbjZ": "",
|
||||
"OfhWJH": "",
|
||||
"A1taO8": "",
|
||||
"BVgBUp": "",
|
||||
"JlFcis": "",
|
||||
"5lWFkC": "",
|
||||
"fcWrnU": "",
|
||||
"u/4llg": "",
|
||||
"OYHzN1": "",
|
||||
"GqIw2D": "",
|
||||
"y4Rltr": "",
|
||||
"MHrjPM": "",
|
||||
"EPhORN": "",
|
||||
"ejZKhw": "",
|
||||
"EkH9pt": "",
|
||||
"99qsr/": "",
|
||||
"7sNhEz": "",
|
||||
"1I6UoR": "",
|
||||
"2q/Q7x": "",
|
||||
"I4ObGc": ""
|
||||
"You have viewed all notifications.": "Você visualizou todas as notificações."
|
||||
}
|
||||
|
||||
@@ -50,57 +50,5 @@
|
||||
"Username": "用户名",
|
||||
"Views": "浏览数",
|
||||
"Visibility": "可见性",
|
||||
"You have viewed all notifications.": "您已查看所有通知",
|
||||
"XxmuIa": "",
|
||||
"Bn3tSA": "",
|
||||
"Du6bPw": "",
|
||||
"RCU5PY": "",
|
||||
"JOrM7W": "",
|
||||
"VbeIOx": "",
|
||||
"kfcRb0": "",
|
||||
"NUrY9o": "",
|
||||
"uFxfjI": "",
|
||||
"VbyRUy": "",
|
||||
"hYgDIe": "",
|
||||
"Jd2r4y": "",
|
||||
"rWPWqL": "",
|
||||
"pvnfJD": "",
|
||||
"cnGeoo": "",
|
||||
"O3oNi5": "",
|
||||
"M9iqFS": "",
|
||||
"5iyJje": "",
|
||||
"bVsnqU": "",
|
||||
"hG89Ed": "",
|
||||
"1njn7W": "",
|
||||
"CvCWBI": "",
|
||||
"6YtxFj": "",
|
||||
"fnzSx+": "",
|
||||
"pAtylB": "",
|
||||
"FZg3wM": "",
|
||||
"LnZ59a": "",
|
||||
"8ZsakT": "",
|
||||
"zmwvG2": "",
|
||||
"sK+agT": "",
|
||||
"f4wMI5": "",
|
||||
"Ef7VI0": "",
|
||||
"iUSbjZ": "",
|
||||
"OfhWJH": "",
|
||||
"A1taO8": "",
|
||||
"BVgBUp": "",
|
||||
"JlFcis": "",
|
||||
"5lWFkC": "",
|
||||
"fcWrnU": "",
|
||||
"u/4llg": "",
|
||||
"OYHzN1": "",
|
||||
"GqIw2D": "",
|
||||
"y4Rltr": "",
|
||||
"MHrjPM": "",
|
||||
"EPhORN": "",
|
||||
"ejZKhw": "",
|
||||
"EkH9pt": "",
|
||||
"99qsr/": "",
|
||||
"7sNhEz": "",
|
||||
"1I6UoR": "",
|
||||
"2q/Q7x": "",
|
||||
"I4ObGc": ""
|
||||
"You have viewed all notifications.": "您已查看所有通知"
|
||||
}
|
||||
@@ -1,321 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('./map/js/china.js')
|
||||
|
||||
const AirportCoordComponent = () => {
|
||||
let geoCoordMap = {
|
||||
上海: [121.4648, 31.2891],
|
||||
东莞: [113.8953, 22.901],
|
||||
东营: [118.7073, 37.5513],
|
||||
中山: [113.4229, 22.478],
|
||||
临汾: [111.4783, 36.1615],
|
||||
临沂: [118.3118, 35.2936],
|
||||
丹东: [124.541, 40.4242],
|
||||
丽水: [119.5642, 28.1854],
|
||||
乌鲁木齐: [87.9236, 43.5883],
|
||||
佛山: [112.8955, 23.1097],
|
||||
保定: [115.0488, 39.0948],
|
||||
兰州: [103.5901, 36.3043],
|
||||
包头: [110.3467, 41.4899],
|
||||
北京: [116.4551, 40.2539],
|
||||
北海: [109.314, 21.6211],
|
||||
南京: [118.8062, 31.9208],
|
||||
南宁: [108.479, 23.1152],
|
||||
南昌: [116.0046, 28.6633],
|
||||
南通: [121.1023, 32.1625],
|
||||
厦门: [118.1689, 24.6478],
|
||||
台州: [121.1353, 28.6688],
|
||||
合肥: [117.29, 32.0581],
|
||||
呼和浩特: [111.4124, 40.4901],
|
||||
咸阳: [108.4131, 34.8706],
|
||||
哈尔滨: [127.9688, 45.368],
|
||||
唐山: [118.4766, 39.6826],
|
||||
嘉兴: [120.9155, 30.6354],
|
||||
大同: [113.7854, 39.8035],
|
||||
大连: [122.2229, 39.4409],
|
||||
天津: [117.4219, 39.4189],
|
||||
太原: [112.3352, 37.9413],
|
||||
威海: [121.9482, 37.1393],
|
||||
宁波: [121.5967, 29.6466],
|
||||
宝鸡: [107.1826, 34.3433],
|
||||
宿迁: [118.5535, 33.7775],
|
||||
常州: [119.4543, 31.5582],
|
||||
广州: [113.5107, 23.2196],
|
||||
廊坊: [116.521, 39.0509],
|
||||
延安: [109.1052, 36.4252],
|
||||
张家口: [115.1477, 40.8527],
|
||||
徐州: [117.5208, 34.3268],
|
||||
德州: [116.6858, 37.2107],
|
||||
惠州: [114.6204, 23.1647],
|
||||
成都: [103.9526, 30.7617],
|
||||
扬州: [119.4653, 32.8162],
|
||||
承德: [117.5757, 41.4075],
|
||||
拉萨: [91.1865, 30.1465],
|
||||
无锡: [120.3442, 31.5527],
|
||||
日照: [119.2786, 35.5023],
|
||||
昆明: [102.9199, 25.4663],
|
||||
杭州: [119.5313, 29.8773],
|
||||
枣庄: [117.323, 34.8926],
|
||||
柳州: [109.3799, 24.9774],
|
||||
株洲: [113.5327, 27.0319],
|
||||
武汉: [114.3896, 30.6628],
|
||||
汕头: [117.1692, 23.3405],
|
||||
江门: [112.6318, 22.1484],
|
||||
沈阳: [123.1238, 42.1216],
|
||||
沧州: [116.8286, 38.2104],
|
||||
河源: [114.917, 23.9722],
|
||||
泉州: [118.3228, 25.1147],
|
||||
泰安: [117.0264, 36.0516],
|
||||
泰州: [120.0586, 32.5525],
|
||||
济南: [117.1582, 36.8701],
|
||||
济宁: [116.8286, 35.3375],
|
||||
海口: [110.3893, 19.8516],
|
||||
淄博: [118.0371, 36.6064],
|
||||
淮安: [118.927, 33.4039],
|
||||
深圳: [114.5435, 22.5439],
|
||||
清远: [112.9175, 24.3292],
|
||||
温州: [120.498, 27.8119],
|
||||
渭南: [109.7864, 35.0299],
|
||||
湖州: [119.8608, 30.7782],
|
||||
湘潭: [112.5439, 27.7075],
|
||||
滨州: [117.8174, 37.4963],
|
||||
潍坊: [119.0918, 36.524],
|
||||
烟台: [120.7397, 37.5128],
|
||||
玉溪: [101.9312, 23.8898],
|
||||
珠海: [113.7305, 22.1155],
|
||||
盐城: [120.2234, 33.5577],
|
||||
盘锦: [121.9482, 41.0449],
|
||||
石家庄: [114.4995, 38.1006],
|
||||
福州: [119.4543, 25.9222],
|
||||
秦皇岛: [119.2126, 40.0232],
|
||||
绍兴: [120.564, 29.7565],
|
||||
聊城: [115.9167, 36.4032],
|
||||
肇庆: [112.1265, 23.5822],
|
||||
舟山: [122.2559, 30.2234],
|
||||
苏州: [120.6519, 31.3989],
|
||||
莱芜: [117.6526, 36.2714],
|
||||
菏泽: [115.6201, 35.2057],
|
||||
营口: [122.4316, 40.4297],
|
||||
葫芦岛: [120.1575, 40.578],
|
||||
衡水: [115.8838, 37.7161],
|
||||
衢州: [118.6853, 28.8666],
|
||||
西宁: [101.4038, 36.8207],
|
||||
西安: [109.1162, 34.2004],
|
||||
贵阳: [106.6992, 26.7682],
|
||||
连云港: [119.1248, 34.552],
|
||||
邢台: [114.8071, 37.2821],
|
||||
邯郸: [114.4775, 36.535],
|
||||
郑州: [113.4668, 34.6234],
|
||||
鄂尔多斯: [108.9734, 39.2487],
|
||||
重庆: [107.7539, 30.1904],
|
||||
金华: [120.0037, 29.1028],
|
||||
铜川: [109.0393, 35.1947],
|
||||
银川: [106.3586, 38.1775],
|
||||
镇江: [119.4763, 31.9702],
|
||||
长春: [125.8154, 44.2584],
|
||||
长沙: [113.0823, 28.2568],
|
||||
长治: [112.8625, 36.4746],
|
||||
阳泉: [113.4778, 38.0951],
|
||||
青岛: [120.4651, 36.3373],
|
||||
韶关: [113.7964, 24.7028],
|
||||
}
|
||||
|
||||
let BJData = [
|
||||
[{ name: '北京' }, { name: '上海', value: 95 }],
|
||||
[{ name: '北京' }, { name: '广州', value: 90 }],
|
||||
[{ name: '北京' }, { name: '大连', value: 80 }],
|
||||
[{ name: '北京' }, { name: '南宁', value: 70 }],
|
||||
[{ name: '北京' }, { name: '南昌', value: 60 }],
|
||||
[{ name: '北京' }, { name: '拉萨', value: 50 }],
|
||||
[{ name: '北京' }, { name: '长春', value: 40 }],
|
||||
[{ name: '北京' }, { name: '包头', value: 30 }],
|
||||
[{ name: '北京' }, { name: '重庆', value: 20 }],
|
||||
[{ name: '北京' }, { name: '常州', value: 10 }],
|
||||
]
|
||||
|
||||
let SHData = [
|
||||
[{ name: '上海' }, { name: '包头', value: 95 }],
|
||||
[{ name: '上海' }, { name: '昆明', value: 90 }],
|
||||
[{ name: '上海' }, { name: '广州', value: 80 }],
|
||||
[{ name: '上海' }, { name: '郑州', value: 70 }],
|
||||
[{ name: '上海' }, { name: '长春', value: 60 }],
|
||||
[{ name: '上海' }, { name: '重庆', value: 50 }],
|
||||
[{ name: '上海' }, { name: '长沙', value: 40 }],
|
||||
[{ name: '上海' }, { name: '北京', value: 30 }],
|
||||
[{ name: '上海' }, { name: '丹东', value: 20 }],
|
||||
[{ name: '上海' }, { name: '大连', value: 10 }],
|
||||
]
|
||||
|
||||
let GZData = [
|
||||
[{ name: '广州' }, { name: '福州', value: 95 }],
|
||||
[{ name: '广州' }, { name: '太原', value: 90 }],
|
||||
[{ name: '广州' }, { name: '长春', value: 80 }],
|
||||
[{ name: '广州' }, { name: '重庆', value: 70 }],
|
||||
[{ name: '广州' }, { name: '西安', value: 60 }],
|
||||
[{ name: '广州' }, { name: '成都', value: 50 }],
|
||||
[{ name: '广州' }, { name: '常州', value: 40 }],
|
||||
[{ name: '广州' }, { name: '北京', value: 30 }],
|
||||
[{ name: '广州' }, { name: '北海', value: 20 }],
|
||||
[{ name: '广州' }, { name: '海口', value: 10 }],
|
||||
]
|
||||
|
||||
let planePath =
|
||||
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
|
||||
|
||||
let convertData = function(data) {
|
||||
let res = []
|
||||
for (let i = 0; i < data.length; i += 1) {
|
||||
let dataItem = data[i]
|
||||
let fromCoord = geoCoordMap[dataItem[0].name]
|
||||
let toCoord = geoCoordMap[dataItem[1].name]
|
||||
if (fromCoord && toCoord) {
|
||||
res.push({
|
||||
fromName: dataItem[0].name,
|
||||
toName: dataItem[1].name,
|
||||
coords: [fromCoord, toCoord],
|
||||
})
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
let color = ['#a6c84c', '#ffa022', '#46bee9']
|
||||
let series = []
|
||||
;[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach((item, i) => {
|
||||
series.push(
|
||||
{
|
||||
name: `${item[0]} Top10`,
|
||||
type: 'lines',
|
||||
zlevel: 1,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 6,
|
||||
trailLength: 0.7,
|
||||
color: '#fff',
|
||||
symbolSize: 3,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
width: 0,
|
||||
curveness: 0.2,
|
||||
},
|
||||
},
|
||||
data: convertData(item[1]),
|
||||
},
|
||||
{
|
||||
name: `${item[0]} Top10`,
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: 10,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 6,
|
||||
trailLength: 0,
|
||||
symbol: planePath,
|
||||
symbolSize: 15,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
width: 1,
|
||||
opacity: 0.6,
|
||||
curveness: 0.2,
|
||||
},
|
||||
},
|
||||
data: convertData(item[1]),
|
||||
},
|
||||
{
|
||||
name: `${item[0]} Top10`,
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 2,
|
||||
rippleEffect: {
|
||||
brushType: 'stroke',
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}',
|
||||
},
|
||||
},
|
||||
symbolSize(val) {
|
||||
return val[2] / 8
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
},
|
||||
},
|
||||
data: item[1].map(dataItem => {
|
||||
return {
|
||||
name: dataItem[1].name,
|
||||
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
|
||||
}
|
||||
}),
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
let option = {
|
||||
backgroundColor: '#404a59',
|
||||
title: {
|
||||
text: '模拟迁徙',
|
||||
subtext: '数据纯属虚构',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
data: ['北京 Top10', '上海 Top10', '广州 Top10'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
selectedMode: 'single',
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#323c48',
|
||||
borderColor: '#404a59',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2a333d',
|
||||
},
|
||||
},
|
||||
},
|
||||
series,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a airport chart. </label>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '700px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AirportCoordComponent
|
||||
@@ -88,8 +88,8 @@ const option = {
|
||||
symbolSize(data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter(param) {
|
||||
return param.data[3]
|
||||
@@ -98,21 +98,19 @@ const option = {
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -122,8 +120,8 @@ const option = {
|
||||
symbolSize(data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter(param) {
|
||||
return param.data[3]
|
||||
@@ -132,21 +130,19 @@ const option = {
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@@ -29,23 +29,19 @@ class ChartAPIComponent extends React.Component {
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}预期',
|
||||
},
|
||||
emphasis: {
|
||||
formatter: '{b}预期',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{b}预期: {c}%',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.7,
|
||||
},
|
||||
opacity: 0.7,
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '访问' },
|
||||
@@ -62,24 +58,20 @@ class ChartAPIComponent extends React.Component {
|
||||
width: '80%',
|
||||
maxSize: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inside',
|
||||
formatter: '{c}%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
position: 'inside',
|
||||
formatter: '{c}%',
|
||||
color: '#fff',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{b}实际: {c}%',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
opacity: 0.5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
data: [
|
||||
{ value: 30, name: '访问' },
|
||||
|
||||
@@ -29,13 +29,15 @@ class ChartShowLoadingComponent extends React.Component {
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: '销售（sales）', max: 6500 },
|
||||
{ name: '销售（sales）', max: 7000 },
|
||||
{ name: '管理（Administration）', max: 16000 },
|
||||
{ name: '信息技术（Information Techology）', max: 30000 },
|
||||
{ name: '客服（Customer Support）', max: 38000 },
|
||||
{ name: '研发（Development）', max: 52000 },
|
||||
{ name: '市场（Marketing）', max: 25000 },
|
||||
],
|
||||
splitNumber: 5,
|
||||
alignTicks: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
@@ -41,8 +41,9 @@ const ChartWithEventComponent = () => {
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1548, name: '搜索引擎' },
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
itemStyle: {},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
|
||||
@@ -4,6 +4,7 @@ import ReactEcharts from 'echarts-for-react'
|
||||
class DynamicChartComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.echartsRef = React.createRef()
|
||||
this.timeTicket = null
|
||||
this.count = 51
|
||||
|
||||
@@ -99,6 +100,7 @@ class DynamicChartComponent extends React.Component {
|
||||
name: '价格',
|
||||
max: 20,
|
||||
min: 0,
|
||||
alignTicks: false,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
},
|
||||
{
|
||||
@@ -107,6 +109,7 @@ class DynamicChartComponent extends React.Component {
|
||||
name: '预购量',
|
||||
max: 1200,
|
||||
min: 0,
|
||||
alignTicks: false,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
},
|
||||
],
|
||||
@@ -117,9 +120,7 @@ class DynamicChartComponent extends React.Component {
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 4,
|
||||
},
|
||||
borderRadius: 4,
|
||||
},
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay(idx) {
|
||||
@@ -193,17 +194,13 @@ class DynamicChartComponent extends React.Component {
|
||||
|
||||
render() {
|
||||
let code =
|
||||
"<ReactEcharts ref='echartsInstance' \n" +
|
||||
"<ReactEcharts ref={this.echartsRef} \n" +
|
||||
' option={this.state.option} />\n'
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> use React state to render dynamic chart</label>
|
||||
<ReactEcharts
|
||||
ref="echarts_react"
|
||||
option={this.state.option}
|
||||
style={{ height: 400 }}
|
||||
/>
|
||||
<ReactEcharts ref={this.echartsRef} option={this.state.option} style={{ height: 400 }} />
|
||||
<label> code below: use state of react to render dynamic chart</label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
|
||||
@@ -7,10 +7,8 @@ import ThemeChartComponent from './ThemeChartComponent'
|
||||
import ChartShowLoadingComponent from './ChartShowLoadingComponent'
|
||||
import ChartAPIComponent from './ChartAPIComponent'
|
||||
import DynamicChartComponent from './DynamicChartComponent'
|
||||
import MapChartComponent from './MapChartComponent'
|
||||
|
||||
// v1.2.0 add 7 demo.
|
||||
import AirportCoordComponent from './AirportCoordComponent'
|
||||
// removed MapChartComponent and AirportCoordComponent
|
||||
import CalendarComponent from './CalendarComponent'
|
||||
import GaugeComponent from './GaugeComponent'
|
||||
import GCalendarComponent from './GCalendarComponent'
|
||||
@@ -28,8 +26,7 @@ const EchartsComponent = ({ type }) => {
|
||||
if (type === 'events') return <ChartWithEventComponent />
|
||||
if (type === 'theme') return <ThemeChartComponent />
|
||||
if (type === 'dynamic') return <DynamicChartComponent />
|
||||
if (type === 'map') return <MapChartComponent />
|
||||
if (type === 'airport') return <AirportCoordComponent />
|
||||
// map and airport chart types removed
|
||||
if (type === 'graph') return <GraphComponent />
|
||||
if (type === 'calendar') return <CalendarComponent />
|
||||
if (type === 'treemap') return <TreemapComponent />
|
||||
|
||||
@@ -37,13 +37,10 @@ class GaugeComponent extends React.Component {
|
||||
},
|
||||
axisLabel: {
|
||||
// 坐标轴小标记
|
||||
textStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
axisTick: {
|
||||
// 坐标轴小标记
|
||||
@@ -89,11 +86,9 @@ class GaugeComponent extends React.Component {
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 5,
|
||||
offsetCenter: [0, '50%'], // x, y，单位px
|
||||
textStyle: {
|
||||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
},
|
||||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
},
|
||||
data: [{ value: 40, name: 'km/h' }],
|
||||
},
|
||||
@@ -118,13 +113,10 @@ class GaugeComponent extends React.Component {
|
||||
},
|
||||
axisLabel: {
|
||||
// 坐标轴小标记
|
||||
textStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
axisTick: {
|
||||
// 坐标轴小标记
|
||||
@@ -172,11 +164,9 @@ class GaugeComponent extends React.Component {
|
||||
width: 80,
|
||||
height: 30,
|
||||
offsetCenter: [25, '20%'], // x, y，单位px
|
||||
textStyle: {
|
||||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
},
|
||||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
},
|
||||
data: [{ value: 1.5, name: 'x1000 r/min' }],
|
||||
},
|
||||
@@ -211,13 +201,10 @@ class GaugeComponent extends React.Component {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
formatter(v) {
|
||||
switch (`${v}`) {
|
||||
case '0':
|
||||
@@ -280,13 +267,10 @@ class GaugeComponent extends React.Component {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
formatter(v) {
|
||||
switch (`${v}`) {
|
||||
case '0':
|
||||
|
||||
@@ -1325,10 +1325,8 @@ const GraphComponent = () => {
|
||||
layout: 'force',
|
||||
animation: false,
|
||||
label: {
|
||||
normal: {
|
||||
position: 'right',
|
||||
formatter: '{b}',
|
||||
},
|
||||
position: 'right',
|
||||
formatter: '{b}',
|
||||
},
|
||||
draggable: true,
|
||||
data: webkitDep.nodes.map((node, idx) => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('echarts-liquidfill')
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-liquidfill'
|
||||
|
||||
const LiquidfillComponent = () => {
|
||||
const option = {
|
||||
@@ -17,6 +17,7 @@ const LiquidfillComponent = () => {
|
||||
<div className="parent">
|
||||
<label>render a Liquidfill chart:</label>
|
||||
<ReactEcharts
|
||||
echarts={echarts}
|
||||
option={option}
|
||||
style={{
|
||||
height: '400px',
|
||||
|
||||
@@ -430,16 +430,12 @@ const LunarCalendarComponent = () => {
|
||||
coordinateSystem: 'calendar',
|
||||
symbolSize: 1,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter(params) {
|
||||
let d = echarts.number.parseDate(params.value[0])
|
||||
return `${d.getDate()}\n\n${params.value[2]}\n\n`
|
||||
},
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
},
|
||||
show: true,
|
||||
formatter(params) {
|
||||
let d = echarts.number.parseDate(params.value[0])
|
||||
return `${d.getDate()}\n\n${params.value[2]}\n\n`
|
||||
},
|
||||
color: '#000',
|
||||
},
|
||||
data: lunarData,
|
||||
},
|
||||
@@ -448,17 +444,13 @@ const LunarCalendarComponent = () => {
|
||||
coordinateSystem: 'calendar',
|
||||
symbolSize: 1,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter(params) {
|
||||
return `\n\n\n${params.value[3] || ''}`
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
color: '#a00',
|
||||
},
|
||||
show: true,
|
||||
formatter(params) {
|
||||
return `\n\n\n${params.value[3] || ''}`
|
||||
},
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
color: '#a00',
|
||||
},
|
||||
data: lunarData,
|
||||
},
|
||||
|
||||
@@ -1,209 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('./map/js/china.js')
|
||||
|
||||
class MapChartComponent extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.timeTicket = null
|
||||
const randomData = () => {
|
||||
return Math.round(Math.random() * 1000)
|
||||
}
|
||||
const option = {
|
||||
title: {
|
||||
text: 'iphone销量',
|
||||
subtext: '纯属虚构',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['iphone3', 'iphone4', 'iphone5'],
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 2500,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text: ['高', '低'], // 文本，默认为数值文本
|
||||
calculable: true,
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'iphone3',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
roam: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: randomData() },
|
||||
{ name: '天津', value: randomData() },
|
||||
{ name: '上海', value: randomData() },
|
||||
{ name: '重庆', value: randomData() },
|
||||
{ name: '河北', value: randomData() },
|
||||
{ name: '河南', value: randomData() },
|
||||
{ name: '云南', value: randomData() },
|
||||
{ name: '辽宁', value: randomData() },
|
||||
{ name: '黑龙江', value: randomData() },
|
||||
{ name: '湖南', value: randomData() },
|
||||
{ name: '安徽', value: randomData() },
|
||||
{ name: '山东', value: randomData() },
|
||||
{ name: '新疆', value: randomData() },
|
||||
{ name: '江苏', value: randomData() },
|
||||
{ name: '浙江', value: randomData() },
|
||||
{ name: '江西', value: randomData() },
|
||||
{ name: '湖北', value: randomData() },
|
||||
{ name: '广西', value: randomData() },
|
||||
{ name: '甘肃', value: randomData() },
|
||||
{ name: '山西', value: randomData() },
|
||||
{ name: '内蒙古', value: randomData() },
|
||||
{ name: '陕西', value: randomData() },
|
||||
{ name: '吉林', value: randomData() },
|
||||
{ name: '福建', value: randomData() },
|
||||
{ name: '贵州', value: randomData() },
|
||||
{ name: '广东', value: randomData() },
|
||||
{ name: '青海', value: randomData() },
|
||||
{ name: '西藏', value: randomData() },
|
||||
{ name: '四川', value: randomData() },
|
||||
{ name: '宁夏', value: randomData() },
|
||||
{ name: '海南', value: randomData() },
|
||||
{ name: '台湾', value: randomData() },
|
||||
{ name: '香港', value: randomData() },
|
||||
{ name: '澳门', value: randomData() },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'iphone4',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: randomData() },
|
||||
{ name: '天津', value: randomData() },
|
||||
{ name: '上海', value: randomData() },
|
||||
{ name: '重庆', value: randomData() },
|
||||
{ name: '河北', value: randomData() },
|
||||
{ name: '安徽', value: randomData() },
|
||||
{ name: '新疆', value: randomData() },
|
||||
{ name: '浙江', value: randomData() },
|
||||
{ name: '江西', value: randomData() },
|
||||
{ name: '山西', value: randomData() },
|
||||
{ name: '内蒙古', value: randomData() },
|
||||
{ name: '吉林', value: randomData() },
|
||||
{ name: '福建', value: randomData() },
|
||||
{ name: '广东', value: randomData() },
|
||||
{ name: '西藏', value: randomData() },
|
||||
{ name: '四川', value: randomData() },
|
||||
{ name: '宁夏', value: randomData() },
|
||||
{ name: '香港', value: randomData() },
|
||||
{ name: '澳门', value: randomData() },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'iphone5',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: randomData() },
|
||||
{ name: '天津', value: randomData() },
|
||||
{ name: '上海', value: randomData() },
|
||||
{ name: '广东', value: randomData() },
|
||||
{ name: '台湾', value: randomData() },
|
||||
{ name: '香港', value: randomData() },
|
||||
{ name: '澳门', value: randomData() },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
this.state = {
|
||||
option,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
}
|
||||
this.timeTicket = setInterval(() => {
|
||||
const { option } = this.state
|
||||
const r = new Date().getSeconds()
|
||||
option.title.text = `iphone销量${r}`
|
||||
option.series[0].name = `iphone销量${r}`
|
||||
option.legend.data[0] = `iphone销量${r}`
|
||||
this.setState({ option })
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let code =
|
||||
"require('echarts/map/js/china.js'); \n" +
|
||||
'<ReactEcharts \n' +
|
||||
' option={this.state.option || {}} \n' +
|
||||
" style={{height: '350px', width: '100%'}} \n" +
|
||||
" className='react_for_echarts' />"
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label>
|
||||
{' '}
|
||||
render a china map. <strong>MAP charts</strong>:{' '}
|
||||
</label>
|
||||
<ReactEcharts
|
||||
option={this.state.option}
|
||||
style={{ height: '500px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
<label> code below: </label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MapChartComponent
|
||||
@@ -41,21 +41,21 @@ const SimpleChartComponent = () => {
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
areaStyle: {},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
areaStyle: {},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
areaStyle: {},
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -52,12 +52,12 @@ const ThemeChartComponent = () => {
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
emphasis: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
@@ -68,10 +68,8 @@ const ThemeChartComponent = () => {
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
|
||||
},
|
||||
@@ -80,10 +78,8 @@ const ThemeChartComponent = () => {
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
},
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
},
|
||||
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
|
||||
},
|
||||
|
||||
@@ -264,10 +264,8 @@ const option = {
|
||||
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1,
|
||||
},
|
||||
fontSize: 16,
|
||||
borderWidth: 1,
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
@@ -276,10 +274,8 @@ const option = {
|
||||
|
||||
emphasis: {
|
||||
label: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#900',
|
||||
},
|
||||
fontSize: 20,
|
||||
color: '#900',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900',
|
||||
|
||||
@@ -190,26 +190,20 @@ const TreemapComponent = () => {
|
||||
return [
|
||||
{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 0,
|
||||
gapWidth: 5,
|
||||
},
|
||||
borderWidth: 0,
|
||||
gapWidth: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
gapWidth: 1,
|
||||
},
|
||||
gapWidth: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
colorSaturation: [0.35, 0.5],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
gapWidth: 1,
|
||||
borderColorSaturation: 0.6,
|
||||
},
|
||||
gapWidth: 1,
|
||||
borderColorSaturation: 0.6,
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -248,9 +242,7 @@ const TreemapComponent = () => {
|
||||
formatter: '{b}',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#fff',
|
||||
},
|
||||
borderColor: '#fff',
|
||||
},
|
||||
levels: getLevelOption(),
|
||||
data: diskData,
|
||||
|
||||
@@ -31,14 +31,6 @@ const chartList = [
|
||||
label: 'DynamicChart',
|
||||
value: 'dynamic',
|
||||
},
|
||||
{
|
||||
label: 'MapChart',
|
||||
value: 'map',
|
||||
},
|
||||
{
|
||||
label: 'AirportCoord',
|
||||
value: 'airport',
|
||||
},
|
||||
{
|
||||
label: 'Graph',
|
||||
value: 'graph',
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,32 +1,6 @@
|
||||
/* global define */
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// eslint-disable-line
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory) // eslint-disable-line
|
||||
} else if (
|
||||
typeof exports === 'object' &&
|
||||
typeof exports.nodeName !== 'string'
|
||||
) {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
})(this, (exports, echarts) => {
|
||||
let log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
/* eslint-disable */
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
let colorPalette = [
|
||||
let colorPalette = [
|
||||
'#2ec7c9',
|
||||
'#b6a2de',
|
||||
'#5ab1ef',
|
||||
@@ -53,10 +27,8 @@
|
||||
color: colorPalette,
|
||||
|
||||
title: {
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
color: '#008acd',
|
||||
},
|
||||
fontWeight: 'normal',
|
||||
color: '#008acd',
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
@@ -66,9 +38,7 @@
|
||||
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: colorPalette[0],
|
||||
},
|
||||
borderColor: colorPalette[0],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -135,8 +105,10 @@
|
||||
color: '#008acd',
|
||||
},
|
||||
controlStyle: {
|
||||
normal: { color: '#008acd' },
|
||||
emphasis: { color: '#008acd' },
|
||||
color: '#008acd',
|
||||
},
|
||||
emphasis: {
|
||||
controlStyle: { color: '#008acd' },
|
||||
},
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 3,
|
||||
@@ -150,13 +122,11 @@
|
||||
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9',
|
||||
lineStyle: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9',
|
||||
lineStyle: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -167,19 +137,13 @@
|
||||
},
|
||||
|
||||
map: {
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#d87a80',
|
||||
},
|
||||
},
|
||||
},
|
||||
label: { color: '#d87a80' },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd',
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#fe994e',
|
||||
},
|
||||
},
|
||||
@@ -215,5 +179,8 @@
|
||||
},
|
||||
}
|
||||
|
||||
if (echarts && typeof echarts.registerTheme === 'function') {
|
||||
echarts.registerTheme('macarons', theme)
|
||||
})
|
||||
} else if (typeof console !== 'undefined' && console.error) {
|
||||
console.error('ECharts is not loaded, failed to register macarons theme')
|
||||
}
|
||||
|
||||
@@ -1,32 +1,6 @@
|
||||
/* global define */
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// eslint-disable-line
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory) // eslint-disable-line
|
||||
} else if (
|
||||
typeof exports === 'object' &&
|
||||
typeof exports.nodeName !== 'string'
|
||||
) {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
})(this, (exports, echarts) => {
|
||||
let log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
/* eslint-disable */
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
let colorPalette = [
|
||||
let colorPalette = [
|
||||
'#c12e34',
|
||||
'#e6b600',
|
||||
'#0098d9',
|
||||
@@ -41,9 +15,7 @@
|
||||
color: colorPalette,
|
||||
|
||||
title: {
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
@@ -52,9 +24,7 @@
|
||||
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: '#06467c',
|
||||
},
|
||||
borderColor: '#06467c',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -73,23 +43,19 @@
|
||||
color: '#005eaa',
|
||||
},
|
||||
controlStyle: {
|
||||
normal: {
|
||||
color: '#005eaa',
|
||||
borderColor: '#005eaa',
|
||||
},
|
||||
color: '#005eaa',
|
||||
borderColor: '#005eaa',
|
||||
},
|
||||
},
|
||||
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#c12e34',
|
||||
color0: '#2b821d',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#c12e34',
|
||||
color0: '#2b821d',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#c12e34',
|
||||
color0: '#2b821d',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -99,24 +65,14 @@
|
||||
},
|
||||
|
||||
map: {
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#c12e34',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#c12e34',
|
||||
},
|
||||
},
|
||||
},
|
||||
label: { color: '#c12e34' },
|
||||
emphasis: { label: { color: '#c12e34' } },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd',
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#e6b600',
|
||||
},
|
||||
},
|
||||
@@ -138,9 +94,7 @@
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'auto',
|
||||
},
|
||||
color: 'auto',
|
||||
},
|
||||
splitLine: {
|
||||
length: 12,
|
||||
@@ -154,9 +108,7 @@
|
||||
color: 'auto',
|
||||
},
|
||||
title: {
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
color: '#333',
|
||||
},
|
||||
detail: {
|
||||
textStyle: {
|
||||
@@ -165,5 +117,8 @@
|
||||
},
|
||||
},
|
||||
}
|
||||
if (echarts && typeof echarts.registerTheme === 'function') {
|
||||
echarts.registerTheme('shine', theme)
|
||||
})
|
||||
} else if (typeof console !== 'undefined' && console.error) {
|
||||
console.error('ECharts is not loaded, failed to register shine theme')
|
||||
}
|
||||
|
||||
@@ -2,10 +2,12 @@ import React from 'react'
|
||||
import Highcharts from 'highcharts'
|
||||
import HighchartsMore from 'highcharts/highcharts-more'
|
||||
import Exporting from 'highcharts/modules/exporting'
|
||||
import Accessibility from 'highcharts/modules/accessibility'
|
||||
import HighchartsReact from 'highcharts-react-official'
|
||||
|
||||
HighchartsMore(Highcharts)
|
||||
Exporting(Highcharts)
|
||||
Accessibility(Highcharts)
|
||||
|
||||
const config = {
|
||||
chart: {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import Highcharts from 'highcharts/highmaps'
|
||||
import Accessibility from 'highcharts/modules/accessibility'
|
||||
import HighchartsReact from 'highcharts-react-official'
|
||||
import maps from './mapdata/europe'
|
||||
|
||||
@@ -76,6 +77,8 @@ const config = {
|
||||
],
|
||||
}
|
||||
|
||||
Accessibility(Highcharts)
|
||||
|
||||
const HighmapsComponent = () => {
|
||||
return <HighchartsReact highcharts={Highcharts} constructorType={'mapChart'} options={config} />
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import Highcharts from 'highcharts/highstock'
|
||||
import Accessibility from 'highcharts/modules/accessibility'
|
||||
import HighchartsReact from 'highcharts-react-official'
|
||||
|
||||
const data = [
|
||||
@@ -103,4 +104,6 @@ const HighstockComponent = () => {
|
||||
)
|
||||
}
|
||||
|
||||
Accessibility(Highcharts)
|
||||
|
||||
export default HighstockComponent
|
||||
|
||||
@@ -37,7 +37,7 @@ function User({ avatar, username, sales = 0, sold = 0 }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<Button type="ghost" size="large">
|
||||
<Button size="large">
|
||||
View Profile
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -136,7 +136,7 @@ class Filter extends Component {
|
||||
{i18n._('Reset')}
|
||||
</Button>
|
||||
</div>
|
||||
<Button type="ghost" onClick={onAdd}>
|
||||
<Button onClick={onAdd}>
|
||||
{i18n._('Create')}
|
||||
</Button>
|
||||
</Row>
|
||||
|
||||
Reference in New Issue
Block a user