mirror of
https://github.com/zuiidea/antd-admin
synced 2026-10-21 06:53:47 +00:00
fix all echarts example
This commit is contained in:
zuiidea
@@ -1,48 +1,49 @@
|
||||
{
|
||||
"extends": "airbnb",
|
||||
"rules": {
|
||||
"semi": [2, "never"],
|
||||
"no-console": 0,
|
||||
"arrow-body-style": [0, "never"],
|
||||
"comma-dangle": [2, "always-multiline"],
|
||||
"global-require": 0,
|
||||
"func-names": 0,
|
||||
"prefer-const": 0,
|
||||
"import/no-unresolved": 0,
|
||||
"import/extensions": 0,
|
||||
"max-len": 0,
|
||||
"react/jsx-first-prop-new-line": 0,
|
||||
"react/jsx-filename-extension": 0,
|
||||
"space-before-function-paren": [2, "always"],
|
||||
"no-unused-expressions": [0, {
|
||||
"allowShortCircuit": true,
|
||||
"allowTernary": true
|
||||
}],
|
||||
"arrow-body-style": [0, "never"],
|
||||
"func-names": 0,
|
||||
"prefer-const": 0,
|
||||
"no-console": 0,
|
||||
"no-extend-native": 0,
|
||||
"no-param-reassign": 0,
|
||||
"no-restricted-syntax": 0,
|
||||
"no-eval": 0,
|
||||
"no-continue": 0,
|
||||
"react/jsx-no-bind": 0,
|
||||
"no-mixed-operators": 0,
|
||||
"no-plusplus": 0,
|
||||
"no-unused-vars": [2, { "ignoreRestSiblings": true }],
|
||||
"no-underscore-dangle": 0,
|
||||
"global-require": 0,
|
||||
"import/no-unresolved": 0,
|
||||
"import/extensions": 0,
|
||||
"space-before-function-paren": [2, "always"],
|
||||
"semi": [2, "never"],
|
||||
"import/no-extraneous-dependencies": 0,
|
||||
"import/prefer-default-export": 0,
|
||||
"jsx-a11y/no-static-element-interactions": 0,
|
||||
"jsx-a11y/click-events-have-key-events": 0,
|
||||
"jsx-a11y/href-no-hash": 0,
|
||||
"jsx-a11y/anchor-is-valid": 0,
|
||||
"jsx-a11y/label-has-for": 0,
|
||||
"react/no-array-index-key": 0,
|
||||
"react/require-default-props": 0,
|
||||
"react/forbid-prop-types": 0,
|
||||
"react/no-string-refs": 0,
|
||||
"react/no-find-dom-node": 0,
|
||||
"react/prefer-stateless-function": 0,
|
||||
"import/no-extraneous-dependencies": 0,
|
||||
"import/prefer-default-export": 0,
|
||||
"react/no-danger": 0,
|
||||
"jsx-a11y/no-static-element-interactions": 0,
|
||||
"jsx-a11y/click-events-have-key-events": 0,
|
||||
"react/jsx-closing-tag-location": 0,
|
||||
"react/sort-comp": 0,
|
||||
"no-mixed-operators": 0,
|
||||
"jsx-a11y/label-has-for": 0,
|
||||
"no-plusplus": 0
|
||||
"react/jsx-no-bind": 0,
|
||||
"react/no-danger": 0,
|
||||
"react/jsx-first-prop-new-line": 0,
|
||||
"react/jsx-filename-extension": 0
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "antd-admin",
|
||||
"version": "4.3.8",
|
||||
"version": "4.3.9",
|
||||
"dependencies": {
|
||||
"antd": "3.0.3",
|
||||
"axios": "^0.17.1",
|
||||
|
||||
@@ -3,187 +3,187 @@ import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('echarts/map/js/china.js')
|
||||
|
||||
const AirportCoordComponent = React.createClass({
|
||||
getOtion () {
|
||||
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],
|
||||
}
|
||||
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 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 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 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 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],
|
||||
})
|
||||
}
|
||||
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
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
let color = ['#a6c84c', '#ffa022', '#46bee9']
|
||||
let series = [];
|
||||
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach((item, i) => {
|
||||
series.push({
|
||||
let color = ['#a6c84c', '#ffa022', '#46bee9']
|
||||
let series = [];
|
||||
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach((item, i) => {
|
||||
series.push(
|
||||
{
|
||||
name: `${item[0]} Top10`,
|
||||
type: 'lines',
|
||||
zlevel: 1,
|
||||
@@ -255,68 +255,67 @@ const AirportCoordComponent = React.createClass({
|
||||
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 option
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a airport chart. </label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
style={{ height: '700px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
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
|
||||
|
||||
@@ -2,8 +2,8 @@ import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
import echarts from 'echarts'
|
||||
|
||||
const CalendarComponent = React.createClass({
|
||||
getVirtulData (year) {
|
||||
const CalendarComponent = () => {
|
||||
const getVirtulData = (year) => {
|
||||
year = year || '2017'
|
||||
let date = +echarts.number.parseDate(`${year}-01-01`)
|
||||
let end = +echarts.number.parseDate(`${+year + 1}-01-01`)
|
||||
@@ -16,185 +16,182 @@ const CalendarComponent = React.createClass({
|
||||
])
|
||||
}
|
||||
return data
|
||||
},
|
||||
getOtion () {
|
||||
let graphData = [[
|
||||
1485878400000,
|
||||
260,
|
||||
], [
|
||||
1486137600000,
|
||||
200,
|
||||
], [
|
||||
1486569600000,
|
||||
279,
|
||||
], [
|
||||
1486915200000,
|
||||
847,
|
||||
], [
|
||||
1487347200000,
|
||||
241,
|
||||
], [
|
||||
1487779200000,
|
||||
411,
|
||||
], [
|
||||
1488124800000,
|
||||
985,
|
||||
],
|
||||
]
|
||||
}
|
||||
|
||||
let links = graphData.map((item, idx) => {
|
||||
return {
|
||||
source: idx,
|
||||
target: idx + 1,
|
||||
}
|
||||
})
|
||||
links.pop()
|
||||
let graphData = [[
|
||||
1485878400000,
|
||||
260,
|
||||
], [
|
||||
1486137600000,
|
||||
200,
|
||||
], [
|
||||
1486569600000,
|
||||
279,
|
||||
], [
|
||||
1486915200000,
|
||||
847,
|
||||
], [
|
||||
1487347200000,
|
||||
241,
|
||||
], [
|
||||
1487779200000,
|
||||
411,
|
||||
], [
|
||||
1488124800000,
|
||||
985,
|
||||
],
|
||||
]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
position: 'top',
|
||||
},
|
||||
visualMap: [{
|
||||
min: 0,
|
||||
max: 1000,
|
||||
calculable: true,
|
||||
seriesIndex: [2, 3, 4],
|
||||
orient: 'horizontal',
|
||||
left: '55%',
|
||||
bottom: 20,
|
||||
}, {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
inRange: {
|
||||
color: ['grey'],
|
||||
opacity: [0, 0.3],
|
||||
},
|
||||
controller: {
|
||||
inRange: {
|
||||
opacity: [0.3, 0.6],
|
||||
},
|
||||
outOfRange: {
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
calculable: true,
|
||||
seriesIndex: [1],
|
||||
orient: 'horizontal',
|
||||
left: '10%',
|
||||
bottom: 20,
|
||||
}],
|
||||
|
||||
calendar: [
|
||||
{
|
||||
orient: 'vertical',
|
||||
yearLabel: {
|
||||
margin: 40,
|
||||
},
|
||||
monthLabel: {
|
||||
nameMap: 'cn',
|
||||
margin: 20,
|
||||
},
|
||||
dayLabel: {
|
||||
firstDay: 1,
|
||||
nameMap: 'cn',
|
||||
},
|
||||
cellSize: 40,
|
||||
range: '2017-02',
|
||||
},
|
||||
{
|
||||
orient: 'vertical',
|
||||
yearLabel: {
|
||||
margin: 40,
|
||||
},
|
||||
monthLabel: {
|
||||
margin: 20,
|
||||
},
|
||||
cellSize: 40,
|
||||
left: 460,
|
||||
range: '2017-01',
|
||||
},
|
||||
{
|
||||
orient: 'vertical',
|
||||
yearLabel: {
|
||||
margin: 40,
|
||||
},
|
||||
monthLabel: {
|
||||
margin: 20,
|
||||
},
|
||||
cellSize: 40,
|
||||
top: 350,
|
||||
range: '2017-03',
|
||||
},
|
||||
{
|
||||
orient: 'vertical',
|
||||
yearLabel: {
|
||||
margin: 40,
|
||||
},
|
||||
dayLabel: {
|
||||
firstDay: 1,
|
||||
nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
},
|
||||
monthLabel: {
|
||||
nameMap: 'cn',
|
||||
margin: 20,
|
||||
},
|
||||
cellSize: 40,
|
||||
top: 350,
|
||||
left: 460,
|
||||
range: '2017-04',
|
||||
}],
|
||||
|
||||
series: [{
|
||||
type: 'graph',
|
||||
edgeSymbol: ['none', 'arrow'],
|
||||
coordinateSystem: 'calendar',
|
||||
links,
|
||||
symbolSize: 10,
|
||||
calendarIndex: 0,
|
||||
data: graphData,
|
||||
}, {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
data: this.getVirtulData(2017),
|
||||
}, {
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 1,
|
||||
symbolSize (val) {
|
||||
return val[1] / 40
|
||||
},
|
||||
data: this.getVirtulData(2017),
|
||||
}, {
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 2,
|
||||
symbolSize (val) {
|
||||
return val[1] / 60
|
||||
},
|
||||
data: this.getVirtulData(2017),
|
||||
}, {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 3,
|
||||
data: this.getVirtulData(2017),
|
||||
}],
|
||||
let links = graphData.map((item, idx) => {
|
||||
return {
|
||||
source: idx,
|
||||
target: idx + 1,
|
||||
}
|
||||
return option
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a calendar-charts </label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
style={{ height: '700px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
})
|
||||
links.pop()
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
position: 'top',
|
||||
},
|
||||
visualMap: [{
|
||||
min: 0,
|
||||
max: 1000,
|
||||
calculable: true,
|
||||
seriesIndex: [2, 3, 4],
|
||||
orient: 'horizontal',
|
||||
left: '55%',
|
||||
bottom: 20,
|
||||
}, {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
inRange: {
|
||||
color: ['grey'],
|
||||
opacity: [0, 0.3],
|
||||
},
|
||||
controller: {
|
||||
inRange: {
|
||||
opacity: [0.3, 0.6],
|
||||
},
|
||||
outOfRange: {
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
calculable: true,
|
||||
seriesIndex: [1],
|
||||
orient: 'horizontal',
|
||||
left: '10%',
|
||||
bottom: 20,
|
||||
}],
|
||||
|
||||
calendar: [
|
||||
{
|
||||
orient: 'vertical',
|
||||
yearLabel: {
|
||||
margin: 40,
|
||||
},
|
||||
monthLabel: {
|
||||
nameMap: 'cn',
|
||||
margin: 20,
|
||||
},
|
||||
dayLabel: {
|
||||
firstDay: 1,
|
||||
nameMap: 'cn',
|
||||
},
|
||||
cellSize: 40,
|
||||
range: '2017-02',
|
||||
},
|
||||
{
|
||||
orient: 'vertical',
|
||||
yearLabel: {
|
||||
margin: 40,
|
||||
},
|
||||
monthLabel: {
|
||||
margin: 20,
|
||||
},
|
||||
cellSize: 40,
|
||||
left: 460,
|
||||
range: '2017-01',
|
||||
},
|
||||
{
|
||||
orient: 'vertical',
|
||||
yearLabel: {
|
||||
margin: 40,
|
||||
},
|
||||
monthLabel: {
|
||||
margin: 20,
|
||||
},
|
||||
cellSize: 40,
|
||||
top: 350,
|
||||
range: '2017-03',
|
||||
},
|
||||
{
|
||||
orient: 'vertical',
|
||||
yearLabel: {
|
||||
margin: 40,
|
||||
},
|
||||
dayLabel: {
|
||||
firstDay: 1,
|
||||
nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
},
|
||||
monthLabel: {
|
||||
nameMap: 'cn',
|
||||
margin: 20,
|
||||
},
|
||||
cellSize: 40,
|
||||
top: 350,
|
||||
left: 460,
|
||||
range: '2017-04',
|
||||
}],
|
||||
|
||||
series: [{
|
||||
type: 'graph',
|
||||
edgeSymbol: ['none', 'arrow'],
|
||||
coordinateSystem: 'calendar',
|
||||
links,
|
||||
symbolSize: 10,
|
||||
calendarIndex: 0,
|
||||
data: graphData,
|
||||
}, {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
data: getVirtulData(2017),
|
||||
}, {
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 1,
|
||||
symbolSize (val) {
|
||||
return val[1] / 40
|
||||
},
|
||||
data: getVirtulData(2017),
|
||||
}, {
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 2,
|
||||
symbolSize (val) {
|
||||
return val[1] / 60
|
||||
},
|
||||
data: getVirtulData(2017),
|
||||
}, {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 3,
|
||||
data: getVirtulData(2017),
|
||||
}],
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a calendar-charts </label>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '700px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CalendarComponent
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
const ChartAPIComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
getOtion () {
|
||||
class ChartAPIComponent extends React.Component {
|
||||
render () {
|
||||
const option = {
|
||||
title: {
|
||||
text: '漏斗图',
|
||||
@@ -94,9 +92,6 @@ const ChartAPIComponent = React.createClass({
|
||||
],
|
||||
}
|
||||
|
||||
return option
|
||||
},
|
||||
render () {
|
||||
let code = '<ReactEcharts ref={(e) => { this.echarts_react = e; }} \n' +
|
||||
' option={this.getOtion()} /> \n' +
|
||||
'\n' +
|
||||
@@ -107,7 +102,7 @@ const ChartAPIComponent = React.createClass({
|
||||
<div className="parent">
|
||||
<label> use echarts API With <strong> getEchartsInstance() </strong>: (the API will return the echarts instance, then you can use any API of echarts.)</label>
|
||||
<ReactEcharts ref={(e) => { this.echarts_react = e }}
|
||||
option={this.getOtion()}
|
||||
option={option}
|
||||
/>
|
||||
<label> code below: (echarts API list see: http://echarts.baidu.com/api.html#echartsInstance)</label>
|
||||
<pre>
|
||||
@@ -116,7 +111,7 @@ const ChartAPIComponent = React.createClass({
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default ChartAPIComponent
|
||||
|
||||
@@ -1,67 +1,70 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
const ChartShowLoadingComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
class ChartShowLoadingComponent extends React.Component {
|
||||
constructor () {
|
||||
super()
|
||||
this._t = null
|
||||
this.onChartReady = this.onChartReady.bind(this)
|
||||
}
|
||||
componentWillUnmount () {
|
||||
clearTimeout(this._t)
|
||||
},
|
||||
}
|
||||
|
||||
onChartReady (chart) {
|
||||
this._t = setTimeout(() => {
|
||||
chart.hideLoading()
|
||||
}, 3000)
|
||||
},
|
||||
getOtion () {
|
||||
const option = {
|
||||
title: {
|
||||
text: '基础雷达图',
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ name: '销售（sales）', max: 6500 },
|
||||
{ name: '管理（Administration）', max: 16000 },
|
||||
{ name: '信息技术（Information Techology）', max: 30000 },
|
||||
{ name: '客服（Customer Support）', max: 38000 },
|
||||
{ name: '研发（Development）', max: 52000 },
|
||||
{ name: '市场（Marketing）', max: 25000 },
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
name: '预算 vs 开销（Budget vs spending）',
|
||||
type: 'radar',
|
||||
// areaStyle: {normal: {}},
|
||||
data: [
|
||||
{
|
||||
value: [4300, 10000, 28000, 35000, 50000, 19000],
|
||||
name: '预算分配（Allocated Budget）',
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name: '实际开销（Actual Spending）',
|
||||
},
|
||||
],
|
||||
}],
|
||||
}
|
||||
return option
|
||||
},
|
||||
getLoadingOption () {
|
||||
const option = {
|
||||
text: '加载中...',
|
||||
color: '#4413c2',
|
||||
textColor: '#270240',
|
||||
maskColor: 'rgba(194, 88, 86, 0.3)',
|
||||
zlevel: 0,
|
||||
}
|
||||
return option
|
||||
},
|
||||
_t: null,
|
||||
}
|
||||
|
||||
render () {
|
||||
const getOtion = () => {
|
||||
const option = {
|
||||
title: {
|
||||
text: '基础雷达图',
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: '销售（sales）', max: 6500 },
|
||||
{ name: '管理（Administration）', max: 16000 },
|
||||
{ name: '信息技术（Information Techology）', max: 30000 },
|
||||
{ name: '客服（Customer Support）', max: 38000 },
|
||||
{ name: '研发（Development）', max: 52000 },
|
||||
{ name: '市场（Marketing）', max: 25000 },
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
name: '预算 vs 开销（Budget vs spending）',
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: [4300, 10000, 28000, 35000, 50000, 19000],
|
||||
name: '预算分配（Allocated Budget）',
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name: '实际开销（Actual Spending）',
|
||||
},
|
||||
],
|
||||
}],
|
||||
}
|
||||
return option
|
||||
}
|
||||
const getLoadingOption = () => {
|
||||
const option = {
|
||||
text: '加载中...',
|
||||
color: '#4413c2',
|
||||
textColor: '#270240',
|
||||
maskColor: 'rgba(194, 88, 86, 0.3)',
|
||||
zlevel: 0,
|
||||
}
|
||||
return option
|
||||
}
|
||||
|
||||
let code = 'onChartReady: function(chart) {\n' +
|
||||
" 'chart.hideLoading();\n" +
|
||||
'}\n\n' +
|
||||
@@ -76,9 +79,9 @@ const ChartShowLoadingComponent = React.createClass({
|
||||
<div className="parent">
|
||||
<label> Chart loading With <strong> showLoading </strong>: (when chart ready, hide the loading mask.)</label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
option={getOtion()}
|
||||
onChartReady={this.onChartReady}
|
||||
loadingOption={this.getLoadingOption()}
|
||||
loadingOption={getLoadingOption()}
|
||||
showLoading
|
||||
/>
|
||||
<label> code below: </label>
|
||||
@@ -88,7 +91,7 @@ const ChartShowLoadingComponent = React.createClass({
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default ChartShowLoadingComponent
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
const ChartWithEventComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
onChartReady (echart) {
|
||||
const ChartWithEventComponent = () => {
|
||||
const onChartReady = (echart) => {
|
||||
console.log('echart is ready', echart)
|
||||
},
|
||||
onChartLegendselectchanged (param, echart) {
|
||||
}
|
||||
const onChartLegendselectchanged = (param, echart) => {
|
||||
console.log(param, echart)
|
||||
},
|
||||
onChartClick (param, echart) {
|
||||
}
|
||||
const onChartClick = (param, echart) => {
|
||||
console.log(param, echart)
|
||||
},
|
||||
getOtion () {
|
||||
}
|
||||
const getOtion = () => {
|
||||
const option = {
|
||||
title: {
|
||||
text: '某站点用户访问来源',
|
||||
@@ -53,40 +51,39 @@ const ChartWithEventComponent = React.createClass({
|
||||
],
|
||||
}
|
||||
return option
|
||||
},
|
||||
render () {
|
||||
let onEvents = {
|
||||
click: this.onChartClick,
|
||||
legendselectchanged: this.onChartLegendselectchanged,
|
||||
}
|
||||
let code = 'let onEvents = {\n' +
|
||||
" 'click': this.onChartClick,\n" +
|
||||
" 'legendselectchanged': this.onChartLegendselectchanged\n" +
|
||||
}
|
||||
|
||||
let onEvents = {
|
||||
click: onChartClick,
|
||||
legendselectchanged: onChartLegendselectchanged,
|
||||
}
|
||||
let code = 'let onEvents = {\n' +
|
||||
" 'click': onChartClick,\n" +
|
||||
" 'legendselectchanged': onChartLegendselectchanged\n" +
|
||||
'}\n\n' +
|
||||
'<ReactEcharts \n' +
|
||||
' option={this.getOtion()} \n' +
|
||||
' option={getOtion()} \n' +
|
||||
' style={{height: 300}} \n' +
|
||||
' onChartReady={this.onChartReady} \n' +
|
||||
' onChartReady={onChartReady} \n' +
|
||||
' onEvents={onEvents} />'
|
||||
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> Chart With event <strong> onEvents </strong>: (Click the chart, and watch the console)</label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
style={{ height: 300 }}
|
||||
onChartReady={this.onChartReady}
|
||||
onEvents={onEvents}
|
||||
/>
|
||||
<label> code below: </label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> Chart With event <strong> onEvents </strong>: (Click the chart, and watch the console)</label>
|
||||
<ReactEcharts
|
||||
option={getOtion()}
|
||||
style={{ height: 300 }}
|
||||
onChartReady={onChartReady}
|
||||
onEvents={onEvents}
|
||||
/>
|
||||
<label> code below: </label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChartWithEventComponent
|
||||
|
||||
@@ -192,8 +192,4 @@ class DynamicChartComponent extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
// const DynamicChartComponent = React.createClass({
|
||||
//
|
||||
// })
|
||||
|
||||
export default DynamicChartComponent
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
// import SimpleChartComponent from './SimpleChartComponent'
|
||||
// import ChartWithEventComponent from './ChartWithEventComponent'
|
||||
// import ThemeChartComponent from './ThemeChartComponent'
|
||||
// import ChartShowLoadingComponent from './ChartShowLoadingComponent'
|
||||
// import ChartAPIComponent from './ChartAPIComponent'
|
||||
import SimpleChartComponent from './SimpleChartComponent'
|
||||
import ChartWithEventComponent from './ChartWithEventComponent'
|
||||
import ThemeChartComponent from './ThemeChartComponent'
|
||||
import ChartShowLoadingComponent from './ChartShowLoadingComponent'
|
||||
import ChartAPIComponent from './ChartAPIComponent'
|
||||
import DynamicChartComponent from './DynamicChartComponent'
|
||||
// import MapChartComponent from './MapChartComponent'
|
||||
import MapChartComponent from './MapChartComponent'
|
||||
|
||||
// v1.2.0 add 7 demo.
|
||||
// import AirportCoordComponent from './AirportCoordComponent'
|
||||
// import CalendarComponent from './CalendarComponent'
|
||||
// import GaugeComponent from './GaugeComponent'
|
||||
// import GCalendarComponent from './GCalendarComponent'
|
||||
// import GraphComponent from './GraphComponent'
|
||||
// import LunarCalendarComponent from './LunarCalendarComponent'
|
||||
// import TreemapComponent from './TreemapComponent'
|
||||
// import LiquidfillComponent from './LiquidfillComponent'
|
||||
// import BubbleGradientComponent from './BubbleGradientComponent'
|
||||
// import TransparentBar3DComPonent from './TransparentBar3DComPonent'
|
||||
// import MoonComponent from './MoonComponent'
|
||||
import AirportCoordComponent from './AirportCoordComponent'
|
||||
import CalendarComponent from './CalendarComponent'
|
||||
import GaugeComponent from './GaugeComponent'
|
||||
import GCalendarComponent from './GCalendarComponent'
|
||||
import GraphComponent from './GraphComponent'
|
||||
import LunarCalendarComponent from './LunarCalendarComponent'
|
||||
import TreemapComponent from './TreemapComponent'
|
||||
import LiquidfillComponent from './LiquidfillComponent'
|
||||
import BubbleGradientComponent from './BubbleGradientComponent'
|
||||
import TransparentBar3DComPonent from './TransparentBar3DComPonent'
|
||||
import MoonComponent from './MoonComponent'
|
||||
|
||||
const EchartsComponent = ({ type }) => {
|
||||
// if (type === 'simple') return (<SimpleChartComponent />)
|
||||
// if (type === 'loading') return (<ChartShowLoadingComponent />)
|
||||
// if (type === 'api') return (<ChartAPIComponent />)
|
||||
// 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 />)
|
||||
// if (type === 'graph') return (<GraphComponent />)
|
||||
// if (type === 'calendar') return (<CalendarComponent />)
|
||||
// if (type === 'treemap') return (<TreemapComponent />)
|
||||
// if (type === 'gauge') return (<GaugeComponent />)
|
||||
// if (type === 'gcalendar') return (<GCalendarComponent />)
|
||||
// if (type === 'lunar') return (<LunarCalendarComponent />)
|
||||
// if (type === 'liquid') return (<LiquidfillComponent />)
|
||||
// if (type === 'BubbleGradientComponent') return (<BubbleGradientComponent />)
|
||||
// if (type === 'TransparentBar3DComPonent') return (<TransparentBar3DComPonent />)
|
||||
// if (type === 'MoonComponent') return (<MoonComponent />)
|
||||
if (type === 'simple') return (<SimpleChartComponent />)
|
||||
if (type === 'loading') return (<ChartShowLoadingComponent />)
|
||||
if (type === 'api') return (<ChartAPIComponent />)
|
||||
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 />)
|
||||
if (type === 'graph') return (<GraphComponent />)
|
||||
if (type === 'calendar') return (<CalendarComponent />)
|
||||
if (type === 'treemap') return (<TreemapComponent />)
|
||||
if (type === 'gauge') return (<GaugeComponent />)
|
||||
if (type === 'gcalendar') return (<GCalendarComponent />)
|
||||
if (type === 'lunar') return (<LunarCalendarComponent />)
|
||||
if (type === 'liquid') return (<LiquidfillComponent />)
|
||||
if (type === 'BubbleGradientComponent') return (<BubbleGradientComponent />)
|
||||
if (type === 'TransparentBar3DComPonent') return (<TransparentBar3DComPonent />)
|
||||
if (type === 'MoonComponent') return (<MoonComponent />)
|
||||
return (<DynamicChartComponent />)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@ import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
import echarts from 'echarts'
|
||||
|
||||
const GCalendarComponent = React.createClass({
|
||||
getVirtulData (year) {
|
||||
const GCalendarComponent = () => {
|
||||
const getVirtulData = (year) => {
|
||||
year = year || '2017'
|
||||
let date = +echarts.number.parseDate(`${year}-01-01`)
|
||||
let end = +echarts.number.parseDate(`${+year + 1}-01-01`)
|
||||
@@ -16,58 +16,55 @@ const GCalendarComponent = React.createClass({
|
||||
])
|
||||
}
|
||||
return data
|
||||
},
|
||||
getOtion () {
|
||||
const option = {
|
||||
tooltip: {
|
||||
position: 'top',
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
calculable: true,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: 'top',
|
||||
},
|
||||
}
|
||||
|
||||
calendar: [{
|
||||
range: '2017',
|
||||
cellSize: ['auto', 20],
|
||||
}, {
|
||||
top: 260,
|
||||
range: '2016',
|
||||
cellSize: ['auto', 20],
|
||||
}],
|
||||
const option = {
|
||||
tooltip: {
|
||||
position: 'top',
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
calculable: true,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: 'top',
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 0,
|
||||
data: this.getVirtulData(2017),
|
||||
}, {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 1,
|
||||
data: this.getVirtulData(2016),
|
||||
}],
|
||||
}
|
||||
return option
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a calendar like github commit history. </label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
style={{ height: '500px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
calendar: [{
|
||||
range: '2017',
|
||||
cellSize: ['auto', 20],
|
||||
}, {
|
||||
top: 260,
|
||||
range: '2016',
|
||||
cellSize: ['auto', 20],
|
||||
}],
|
||||
|
||||
series: [{
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 0,
|
||||
data: getVirtulData(2017),
|
||||
}, {
|
||||
type: 'heatmap',
|
||||
coordinateSystem: 'calendar',
|
||||
calendarIndex: 1,
|
||||
data: getVirtulData(2016),
|
||||
}],
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a calendar like github commit history. </label>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '500px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GCalendarComponent
|
||||
|
||||
@@ -1,30 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
const GaugeComponent = React.createClass({
|
||||
getInitialState () {
|
||||
return { option: this.getOtion() }
|
||||
},
|
||||
componentDidMount () {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
}
|
||||
this.timeTicket = setInterval(() => {
|
||||
let option = this.state.option
|
||||
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
|
||||
option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0
|
||||
option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0
|
||||
option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0
|
||||
this.setState({ option })
|
||||
}, 1000)
|
||||
},
|
||||
componentWillUnmount () {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
}
|
||||
},
|
||||
getOtion () {
|
||||
let option = {
|
||||
class GaugeComponent extends React.Component {
|
||||
constructor () {
|
||||
super()
|
||||
const option = {
|
||||
backgroundColor: '#1b1b1b',
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{c} {b}',
|
||||
@@ -214,10 +194,10 @@ const GaugeComponent = React.createClass({
|
||||
},
|
||||
formatter (v) {
|
||||
switch (`${v}`) {
|
||||
case '0' : return 'E'
|
||||
case '1' : return 'Gas'
|
||||
case '2' : return 'F'
|
||||
default : return null
|
||||
case '0': return 'E'
|
||||
case '1': return 'Gas'
|
||||
case '2': return 'F'
|
||||
default: return null
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -273,10 +253,10 @@ const GaugeComponent = React.createClass({
|
||||
},
|
||||
formatter (v) {
|
||||
switch (`${v}`) {
|
||||
case '0' : return 'H'
|
||||
case '1' : return 'Water'
|
||||
case '2' : return 'C'
|
||||
default : return null
|
||||
case '0': return 'H'
|
||||
case '1': return 'Water'
|
||||
case '2': return 'C'
|
||||
default: return null
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -304,9 +284,31 @@ const GaugeComponent = React.createClass({
|
||||
},
|
||||
],
|
||||
}
|
||||
return option
|
||||
},
|
||||
timeTicket: null,
|
||||
this.state = {
|
||||
option,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
}
|
||||
this.timeTicket = setInterval(() => {
|
||||
let { option } = this.state
|
||||
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
|
||||
option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0
|
||||
option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0
|
||||
option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0
|
||||
this.setState({ option })
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="examples">
|
||||
@@ -320,7 +322,7 @@ const GaugeComponent = React.createClass({
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default GaugeComponent
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -3,32 +3,29 @@ import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('echarts-liquidfill')
|
||||
|
||||
const LiquidfillComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
getOption () {
|
||||
let option = {
|
||||
series: [{
|
||||
const LiquidfillComponent = () => {
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'liquidFill',
|
||||
data: [0.6],
|
||||
}],
|
||||
}
|
||||
return option
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a Liquidfill chart: </label>
|
||||
<ReactEcharts
|
||||
option={this.getOption()}
|
||||
style={{ height: '400px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
},
|
||||
],
|
||||
}
|
||||
return (<div className="examples">
|
||||
<div className="parent">
|
||||
<label>
|
||||
render a Liquidfill chart:
|
||||
</label>
|
||||
<ReactEcharts option={option}
|
||||
style={{
|
||||
height: '400px',
|
||||
width: '100%',
|
||||
}}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default LiquidfillComponent
|
||||
|
||||
@@ -2,8 +2,8 @@ import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
import echarts from 'echarts'
|
||||
|
||||
const LunarCalendarComponent = React.createClass({
|
||||
getOtion () {
|
||||
const LunarCalendarComponent = () => {
|
||||
const getOtion = () => {
|
||||
let dateList = [
|
||||
['2017-1-1', '初四'],
|
||||
['2017-1-2', '初五'],
|
||||
@@ -473,21 +473,20 @@ const LunarCalendarComponent = React.createClass({
|
||||
}],
|
||||
}
|
||||
return option
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a lunar calendar chart. </label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
style={{ height: '500px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a lunar calendar chart. </label>
|
||||
<ReactEcharts
|
||||
option={getOtion()}
|
||||
style={{ height: '500px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LunarCalendarComponent
|
||||
|
||||
@@ -4,45 +4,41 @@ import { Link } from 'react-router'
|
||||
import DynamicChartComponent from './DynamicChartComponent.js'
|
||||
|
||||
|
||||
const MainPageComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<h1> echarts-for-react {this.props.params.type} </h1>
|
||||
<h3> A very simple echarts(v3.0) wrapper for React. <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a></h3>
|
||||
const MainPageComponent = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1> echarts-for-react {this.props.params.type} </h1>
|
||||
<h3> A very simple echarts(v3.0) wrapper for React. <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a></h3>
|
||||
|
||||
<AdSense.Google client="ca-pub-7292810486004926"
|
||||
slot="7806394673"
|
||||
/>
|
||||
<AdSense.Google client="ca-pub-7292810486004926"
|
||||
slot="7806394673"
|
||||
/>
|
||||
|
||||
<h4>
|
||||
<Link to="/echarts/simple">Simple demo</Link> |
|
||||
<Link to="/echarts/loading">Echarts loading</Link> |
|
||||
<Link to="/echarts/api">Echarts API</Link> |
|
||||
<Link to="/echarts/events">Echarts events</Link> |
|
||||
<Link to="/echarts/theme">Echarts theme</Link> |
|
||||
<Link to="/echarts/dynamic">Dynamic chart</Link> |
|
||||
<Link to="/echarts/map">Map chart</Link>
|
||||
</h4>
|
||||
<h4>
|
||||
<span style={{ color: 'red' }}>New</span>:
|
||||
<Link to="/echarts/airport">Airport</Link> |
|
||||
<Link to="/echarts/graph">Graph</Link> |
|
||||
<Link to="/echarts/calendar">Calendar</Link> |
|
||||
<Link to="/echarts/treemap">Treemap</Link> |
|
||||
<Link to="/echarts/gauge">Gauge</Link> |
|
||||
<Link to="/echarts/gcalendar">GCalendar</Link> |
|
||||
<Link to="/echarts/lunar">Lunar</Link> |
|
||||
<Link to="/echarts/liquid">Liquidfill</Link>
|
||||
</h4>
|
||||
{this.props.children || <DynamicChartComponent />}
|
||||
<h4>
|
||||
<Link to="/echarts/simple">Simple demo</Link> |
|
||||
<Link to="/echarts/loading">Echarts loading</Link> |
|
||||
<Link to="/echarts/api">Echarts API</Link> |
|
||||
<Link to="/echarts/events">Echarts events</Link> |
|
||||
<Link to="/echarts/theme">Echarts theme</Link> |
|
||||
<Link to="/echarts/dynamic">Dynamic chart</Link> |
|
||||
<Link to="/echarts/map">Map chart</Link>
|
||||
</h4>
|
||||
<h4>
|
||||
<span style={{ color: 'red' }}>New</span>:
|
||||
<Link to="/echarts/airport">Airport</Link> |
|
||||
<Link to="/echarts/graph">Graph</Link> |
|
||||
<Link to="/echarts/calendar">Calendar</Link> |
|
||||
<Link to="/echarts/treemap">Treemap</Link> |
|
||||
<Link to="/echarts/gauge">Gauge</Link> |
|
||||
<Link to="/echarts/gcalendar">GCalendar</Link> |
|
||||
<Link to="/echarts/lunar">Lunar</Link> |
|
||||
<Link to="/echarts/liquid">Liquidfill</Link>
|
||||
</h4>
|
||||
{this.props.children || <DynamicChartComponent />}
|
||||
|
||||
<h3>Get it on GitHub! <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a></h3>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
<h3>Get it on GitHub! <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a></h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainPageComponent
|
||||
|
||||
@@ -3,31 +3,13 @@ import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('echarts/map/js/china.js')
|
||||
|
||||
const MapChartComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
getInitialState () {
|
||||
return { option: this.getOtion() }
|
||||
},
|
||||
componentDidMount () {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
class MapChartComponent extends React.Component {
|
||||
constructor () {
|
||||
super()
|
||||
this.timeTicket = null
|
||||
const randomData = () => {
|
||||
return Math.round(Math.random() * 1000)
|
||||
}
|
||||
this.timeTicket = setInterval(() => {
|
||||
const option = this.state.option
|
||||
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)
|
||||
}
|
||||
},
|
||||
getOtion () {
|
||||
const option = {
|
||||
title: {
|
||||
text: 'iphone销量',
|
||||
@@ -76,40 +58,40 @@ const MapChartComponent = React.createClass({
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: this.randomData() },
|
||||
{ name: '天津', value: this.randomData() },
|
||||
{ name: '上海', value: this.randomData() },
|
||||
{ name: '重庆', value: this.randomData() },
|
||||
{ name: '河北', value: this.randomData() },
|
||||
{ name: '河南', value: this.randomData() },
|
||||
{ name: '云南', value: this.randomData() },
|
||||
{ name: '辽宁', value: this.randomData() },
|
||||
{ name: '黑龙江', value: this.randomData() },
|
||||
{ name: '湖南', value: this.randomData() },
|
||||
{ name: '安徽', value: this.randomData() },
|
||||
{ name: '山东', value: this.randomData() },
|
||||
{ name: '新疆', value: this.randomData() },
|
||||
{ name: '江苏', value: this.randomData() },
|
||||
{ name: '浙江', value: this.randomData() },
|
||||
{ name: '江西', value: this.randomData() },
|
||||
{ name: '湖北', value: this.randomData() },
|
||||
{ name: '广西', value: this.randomData() },
|
||||
{ name: '甘肃', value: this.randomData() },
|
||||
{ name: '山西', value: this.randomData() },
|
||||
{ name: '内蒙古', value: this.randomData() },
|
||||
{ name: '陕西', value: this.randomData() },
|
||||
{ name: '吉林', value: this.randomData() },
|
||||
{ name: '福建', value: this.randomData() },
|
||||
{ name: '贵州', value: this.randomData() },
|
||||
{ name: '广东', value: this.randomData() },
|
||||
{ name: '青海', value: this.randomData() },
|
||||
{ name: '西藏', value: this.randomData() },
|
||||
{ name: '四川', value: this.randomData() },
|
||||
{ name: '宁夏', value: this.randomData() },
|
||||
{ name: '海南', value: this.randomData() },
|
||||
{ name: '台湾', value: this.randomData() },
|
||||
{ name: '香港', value: this.randomData() },
|
||||
{ name: '澳门', value: this.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: '澳门', value: randomData() },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -125,25 +107,25 @@ const MapChartComponent = React.createClass({
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: this.randomData() },
|
||||
{ name: '天津', value: this.randomData() },
|
||||
{ name: '上海', value: this.randomData() },
|
||||
{ name: '重庆', value: this.randomData() },
|
||||
{ name: '河北', value: this.randomData() },
|
||||
{ name: '安徽', value: this.randomData() },
|
||||
{ name: '新疆', value: this.randomData() },
|
||||
{ name: '浙江', value: this.randomData() },
|
||||
{ name: '江西', value: this.randomData() },
|
||||
{ name: '山西', value: this.randomData() },
|
||||
{ name: '内蒙古', value: this.randomData() },
|
||||
{ name: '吉林', value: this.randomData() },
|
||||
{ name: '福建', value: this.randomData() },
|
||||
{ name: '广东', value: this.randomData() },
|
||||
{ name: '西藏', value: this.randomData() },
|
||||
{ name: '四川', value: this.randomData() },
|
||||
{ name: '宁夏', value: this.randomData() },
|
||||
{ name: '香港', value: this.randomData() },
|
||||
{ name: '澳门', value: this.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() },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -159,23 +141,42 @@ const MapChartComponent = React.createClass({
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: this.randomData() },
|
||||
{ name: '天津', value: this.randomData() },
|
||||
{ name: '上海', value: this.randomData() },
|
||||
{ name: '广东', value: this.randomData() },
|
||||
{ name: '台湾', value: this.randomData() },
|
||||
{ name: '香港', value: this.randomData() },
|
||||
{ name: '澳门', value: this.randomData() },
|
||||
{ name: '北京', value: randomData() },
|
||||
{ name: '天津', value: randomData() },
|
||||
{ name: '上海', value: randomData() },
|
||||
{ name: '广东', value: randomData() },
|
||||
{ name: '台湾', value: randomData() },
|
||||
{ name: '香港', value: randomData() },
|
||||
{ name: '澳门', value: randomData() },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
return option
|
||||
},
|
||||
randomData () {
|
||||
return Math.round(Math.random() * 1000)
|
||||
},
|
||||
timeTicket: null,
|
||||
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' +
|
||||
@@ -198,7 +199,7 @@ const MapChartComponent = React.createClass({
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default MapChartComponent
|
||||
|
||||
@@ -1,55 +1,43 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
// require.config({
|
||||
// paths: {
|
||||
// echarts:'../node_modules/echarts',
|
||||
// }
|
||||
// });
|
||||
const ModuleLoadChartComponent = () => {
|
||||
const option = {
|
||||
title: { text: 'ECharts 入门示例' },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
}],
|
||||
}
|
||||
|
||||
const ModuleLoadChartComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
getOtion () {
|
||||
const option = {
|
||||
title: { text: 'ECharts 入门示例' },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
||||
},
|
||||
yAxis: {},
|
||||
series: [{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
}],
|
||||
}
|
||||
return option
|
||||
},
|
||||
render () {
|
||||
let code = '<ReactEcharts \n' +
|
||||
let code = '<ReactEcharts \n' +
|
||||
' option={this.getOtion()} \n' +
|
||||
" style={{height: '350px', width: '100%'}} \n" +
|
||||
" modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']} \n" +
|
||||
" className='react_for_echarts' />"
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> load echarts module as you wish <strong>reduce the file size</strong>: </label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
style={{ height: '350px', width: '100%' }}
|
||||
modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
<label> code below: </label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> load echarts module as you wish <strong>reduce the file size</strong>: </label>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '350px', width: '100%' }}
|
||||
modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
<label> code below: </label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModuleLoadChartComponent
|
||||
|
||||
@@ -2,91 +2,85 @@ import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
import './theme/macarons.js'
|
||||
|
||||
class SimpleChartComponent extends React.Component {
|
||||
getOtion () {
|
||||
const option = {
|
||||
title: {
|
||||
text: '堆叠区域图',
|
||||
const SimpleChartComponent = () => {
|
||||
const option = {
|
||||
title: {
|
||||
text: '堆叠区域图',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告'],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告'],
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
],
|
||||
}
|
||||
return option
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
render () {
|
||||
let code = '<ReactEcharts \n' +
|
||||
let code = '<ReactEcharts \n' +
|
||||
' option={this.getOtion()} \n' +
|
||||
" style={{height: '350px', width: '100%'}} \n" +
|
||||
" className='react_for_echarts' />"
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a Simple echart With <strong>option and height</strong>: </label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
style={{ height: '350px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
theme="macarons"
|
||||
/>
|
||||
<label> code below: </label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a Simple echart With <strong>option and height</strong>: </label>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '350px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
theme="macarons"
|
||||
/>
|
||||
<label> code below: </label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -3,113 +3,106 @@ import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
import echarts from 'echarts'
|
||||
|
||||
const ThemeChartComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
getOtion () {
|
||||
const option = {
|
||||
title: {
|
||||
text: '阶梯瀑布图',
|
||||
subtext: 'From ExcelHome',
|
||||
sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5',
|
||||
const ThemeChartComponent = () => {
|
||||
const option = {
|
||||
title: {
|
||||
text: '阶梯瀑布图',
|
||||
subtext: 'From ExcelHome',
|
||||
sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['支出', '收入'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
splitLine: { show: false },
|
||||
data: ['11月1日', '11月2日', '11月3日', '11月4日', '11月5日', '11月6日', '11月7日', '11月8日', '11月9日', '11月10日', '11月11日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
emphasis: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['支出', '收入'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
splitLine: { show: false },
|
||||
data: ['11月1日', '11月2日', '11月3日', '11月4日', '11月5日', '11月6日', '11月7日', '11月8日', '11月9日', '11月10日', '11月11日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '辅助',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
emphasis: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
},
|
||||
data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
|
||||
},
|
||||
],
|
||||
}
|
||||
return option
|
||||
},
|
||||
registerTheme () {
|
||||
echarts.registerTheme('my_theme', {
|
||||
backgroundColor: '#f4cccc',
|
||||
})
|
||||
},
|
||||
render () {
|
||||
this.registerTheme()
|
||||
let code = "echarts.registerTheme('my_theme', {\n" +
|
||||
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
echarts.registerTheme('my_theme', {
|
||||
backgroundColor: '#f4cccc',
|
||||
})
|
||||
|
||||
let code = "echarts.registerTheme('my_theme', {\n" +
|
||||
" backgroundColor: '#f4cccc'\n" +
|
||||
'});\n\n' +
|
||||
'<ReactEcharts \n' +
|
||||
' option={this.getOtion()} \n' +
|
||||
" theme='my_theme' />"
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a echart With <strong>theme</strong>, should <strong>echarts.registerTheme(themeName, themeObj)</strong> before use.</label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
theme="my_theme"
|
||||
/>
|
||||
<label> the theme object format: https://github.com/ecomfe/echarts/blob/master/theme/dark.js</label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a echart With <strong>theme</strong>, should <strong>echarts.registerTheme(themeName, themeObj)</strong> before use.</label>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
theme="my_theme"
|
||||
/>
|
||||
<label> the theme object format: https://github.com/ecomfe/echarts/blob/master/theme/dark.js</label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeChartComponent
|
||||
|
||||
@@ -2,265 +2,260 @@ import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
import echarts from 'echarts'
|
||||
|
||||
const TreemapComponent = React.createClass({
|
||||
getOtion () {
|
||||
let diskData = [
|
||||
{
|
||||
value: 180,
|
||||
name: 'Accounts',
|
||||
path: 'Accounts',
|
||||
children: [
|
||||
{
|
||||
value: 76,
|
||||
name: 'Access',
|
||||
path: 'Accounts/Access',
|
||||
children: [
|
||||
{
|
||||
value: 12,
|
||||
name: 'DefaultAccessPlugin.bundle',
|
||||
path: 'Accounts/Access/DefaultAccessPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: 'FacebookAccessPlugin.bundle',
|
||||
path: 'Accounts/Access/FacebookAccessPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: 'LinkedInAccessPlugin.bundle',
|
||||
path: 'Accounts/Access/LinkedInAccessPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
name: 'TencentWeiboAccessPlugin.bundle',
|
||||
path: 'Accounts/Access/TencentWeiboAccessPlugin.bundle',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 92,
|
||||
name: 'Authentication',
|
||||
path: 'Accounts/Authentication',
|
||||
children: [
|
||||
{
|
||||
value: 24,
|
||||
name: 'FacebookAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/FacebookAuthenticationPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
name: 'LinkedInAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/LinkedInAuthenticationPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: 'TencentWeiboAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
name: 'TwitterAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/TwitterAuthenticationPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
name: 'WeiboAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/WeiboAuthenticationPlugin.bundle',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
name: 'Notification',
|
||||
path: 'Accounts/Notification',
|
||||
children: [
|
||||
{
|
||||
value: 12,
|
||||
name: 'SPAAccountsNotificationPlugin.bundle',
|
||||
path: 'Accounts/Notification/SPAAccountsNotificationPlugin.bundle',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 1904,
|
||||
name: 'AddressBook Plug-Ins',
|
||||
path: 'AddressBook Plug-Ins',
|
||||
children: [
|
||||
{
|
||||
value: 744,
|
||||
name: 'CardDAVPlugin.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 744,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: 'DirectoryServices.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 28,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 680,
|
||||
name: 'Exchange.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/Exchange.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 680,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/Exchange.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 432,
|
||||
name: 'LDAP.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/LDAP.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 432,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/LDAP.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: 'LocalSource.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/LocalSource.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 20,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/LocalSource.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 36,
|
||||
name: 'Assistant',
|
||||
path: 'Assistant',
|
||||
children: [
|
||||
{
|
||||
value: 36,
|
||||
name: 'Plugins',
|
||||
path: 'Assistant/Plugins',
|
||||
children: [
|
||||
{
|
||||
value: 36,
|
||||
name: 'AddressBook.assistantBundle',
|
||||
path: 'Assistant/Plugins/AddressBook.assistantBundle',
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
name: 'GenericAddressHandler.addresshandler',
|
||||
path: 'Recents/Plugins/GenericAddressHandler.addresshandler',
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
name: 'MapsRecents.addresshandler',
|
||||
path: 'Recents/Plugins/MapsRecents.addresshandler',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
let formatUtil = echarts.format
|
||||
function getLevelOption () {
|
||||
return [{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 0,
|
||||
gapWidth: 5,
|
||||
},
|
||||
const TreemapComponent = () => {
|
||||
let diskData = [
|
||||
{
|
||||
value: 180,
|
||||
name: 'Accounts',
|
||||
path: 'Accounts',
|
||||
children: [
|
||||
{
|
||||
value: 76,
|
||||
name: 'Access',
|
||||
path: 'Accounts/Access',
|
||||
children: [
|
||||
{
|
||||
value: 12,
|
||||
name: 'DefaultAccessPlugin.bundle',
|
||||
path: 'Accounts/Access/DefaultAccessPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: 'FacebookAccessPlugin.bundle',
|
||||
path: 'Accounts/Access/FacebookAccessPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: 'LinkedInAccessPlugin.bundle',
|
||||
path: 'Accounts/Access/LinkedInAccessPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
name: 'TencentWeiboAccessPlugin.bundle',
|
||||
path: 'Accounts/Access/TencentWeiboAccessPlugin.bundle',
|
||||
},
|
||||
],
|
||||
},
|
||||
}, {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
gapWidth: 1,
|
||||
},
|
||||
{
|
||||
value: 92,
|
||||
name: 'Authentication',
|
||||
path: 'Accounts/Authentication',
|
||||
children: [
|
||||
{
|
||||
value: 24,
|
||||
name: 'FacebookAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/FacebookAuthenticationPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
name: 'LinkedInAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/LinkedInAuthenticationPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: 'TencentWeiboAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
name: 'TwitterAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/TwitterAuthenticationPlugin.bundle',
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
name: 'WeiboAuthenticationPlugin.bundle',
|
||||
path: 'Accounts/Authentication/WeiboAuthenticationPlugin.bundle',
|
||||
},
|
||||
],
|
||||
},
|
||||
}, {
|
||||
colorSaturation: [0.35, 0.5],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
gapWidth: 1,
|
||||
borderColorSaturation: 0.6,
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
name: 'Notification',
|
||||
path: 'Accounts/Notification',
|
||||
children: [
|
||||
{
|
||||
value: 12,
|
||||
name: 'SPAAccountsNotificationPlugin.bundle',
|
||||
path: 'Accounts/Notification/SPAAccountsNotificationPlugin.bundle',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 1904,
|
||||
name: 'AddressBook Plug-Ins',
|
||||
path: 'AddressBook Plug-Ins',
|
||||
children: [
|
||||
{
|
||||
value: 744,
|
||||
name: 'CardDAVPlugin.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 744,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: 'DirectoryServices.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 28,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 680,
|
||||
name: 'Exchange.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/Exchange.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 680,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/Exchange.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 432,
|
||||
name: 'LDAP.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/LDAP.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 432,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/LDAP.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: 'LocalSource.sourcebundle',
|
||||
path: 'AddressBook Plug-Ins/LocalSource.sourcebundle',
|
||||
children: [
|
||||
{
|
||||
value: 20,
|
||||
name: 'Contents',
|
||||
path: 'AddressBook Plug-Ins/LocalSource.sourcebundle/Contents',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 36,
|
||||
name: 'Assistant',
|
||||
path: 'Assistant',
|
||||
children: [
|
||||
{
|
||||
value: 36,
|
||||
name: 'Plugins',
|
||||
path: 'Assistant/Plugins',
|
||||
children: [
|
||||
{
|
||||
value: 36,
|
||||
name: 'AddressBook.assistantBundle',
|
||||
path: 'Assistant/Plugins/AddressBook.assistantBundle',
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
name: 'GenericAddressHandler.addresshandler',
|
||||
path: 'Recents/Plugins/GenericAddressHandler.addresshandler',
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
name: 'MapsRecents.addresshandler',
|
||||
path: 'Recents/Plugins/MapsRecents.addresshandler',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
let formatUtil = echarts.format
|
||||
function getLevelOption () {
|
||||
return [{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 0,
|
||||
gapWidth: 5,
|
||||
},
|
||||
}]
|
||||
}
|
||||
const option = {
|
||||
title: {
|
||||
text: 'Disk Usage',
|
||||
left: 'center',
|
||||
},
|
||||
}, {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
gapWidth: 1,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
colorSaturation: [0.35, 0.5],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
gapWidth: 1,
|
||||
borderColorSaturation: 0.6,
|
||||
},
|
||||
},
|
||||
}]
|
||||
}
|
||||
const option = {
|
||||
title: {
|
||||
text: 'Disk Usage',
|
||||
left: 'center',
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter (info) {
|
||||
let value = info.value
|
||||
let treePathInfo = info.treePathInfo
|
||||
let treePath = []
|
||||
tooltip: {
|
||||
formatter (info) {
|
||||
let { value, treePathInfo } = info
|
||||
let treePath = []
|
||||
|
||||
for (let i = 1; i < treePathInfo.length; i++) {
|
||||
treePath.push(treePathInfo[i].name)
|
||||
}
|
||||
for (let i = 1; i < treePathInfo.length; i++) {
|
||||
treePath.push(treePathInfo[i].name)
|
||||
}
|
||||
|
||||
return [
|
||||
`<div class="tooltip-title">${formatUtil.encodeHTML(treePath.join('/'))}</div>`,
|
||||
`Disk Usage: ${formatUtil.addCommas(value)} KB`,
|
||||
].join('')
|
||||
return [
|
||||
`<div class="tooltip-title">${formatUtil.encodeHTML(treePath.join('/'))}</div>`,
|
||||
`Disk Usage: ${formatUtil.addCommas(value)} KB`,
|
||||
].join('')
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Disk Usage',
|
||||
type: 'treemap',
|
||||
visibleMin: 300,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#fff',
|
||||
},
|
||||
},
|
||||
levels: getLevelOption(),
|
||||
data: diskData,
|
||||
}],
|
||||
}
|
||||
|
||||
series: [{
|
||||
name: 'Disk Usage',
|
||||
type: 'treemap',
|
||||
visibleMin: 300,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#fff',
|
||||
},
|
||||
},
|
||||
levels: getLevelOption(),
|
||||
data: diskData,
|
||||
}],
|
||||
}
|
||||
return option
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a disk usage treemap. </label>
|
||||
<ReactEcharts
|
||||
option={this.getOtion()}
|
||||
style={{ height: '500px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a disk usage treemap. </label>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '500px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TreemapComponent
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import { Radio } from 'antd'
|
||||
import { Page } from 'components'
|
||||
import EchartsComponent from './EchartsComponent'
|
||||
import styles from './index.less'
|
||||
|
||||
@@ -94,7 +95,7 @@ class Chart extends React.Component {
|
||||
})
|
||||
}
|
||||
render () {
|
||||
return (<div className="content-inner" id="EChartsMain">
|
||||
return (<Page inner id="EChartsMain">
|
||||
<RadioGroup options={chartList} defaultValue="dynamic" onChange={this.handleRadioGroupChange} />
|
||||
<div className={styles.chart}>
|
||||
<EchartsComponent type={this.state.type} />
|
||||
@@ -102,7 +103,7 @@ class Chart extends React.Component {
|
||||
<div style={{ pading: 24, marginTop: 24 }}>
|
||||
All demos from <a href="https://github.com/hustcc/echarts-for-react">https://github.com/hustcc/echarts-for-react</a>
|
||||
</div>
|
||||
</div>)
|
||||
</Page>)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -257,7 +257,6 @@ const CardinalAreaChart = () => (
|
||||
const AreaChartPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary"
|
||||
size="large"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
|
||||
@@ -168,7 +168,9 @@ const getPath = (x, y, width, height) => {
|
||||
}
|
||||
|
||||
const TriangleBar = (props) => {
|
||||
const { fill, x, y, width, height } = props
|
||||
const {
|
||||
fill, x, y, width, height,
|
||||
} = props
|
||||
return <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />
|
||||
}
|
||||
|
||||
@@ -201,7 +203,6 @@ const CustomShapeBarChart = () => (
|
||||
const BarChartPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary"
|
||||
size="large"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
|
||||
@@ -179,7 +179,6 @@ const CustomizedDotLineChart = () => (
|
||||
const LineChartPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary"
|
||||
size="large"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import { Radio } from 'antd'
|
||||
import { Page } from 'components'
|
||||
import ReChartsComponent from './ReChartsComponent'
|
||||
import styles from './index.less'
|
||||
|
||||
@@ -34,12 +35,12 @@ class Chart extends React.Component {
|
||||
})
|
||||
}
|
||||
render () {
|
||||
return (<div className="content-inner">
|
||||
return (<Page inner>
|
||||
<RadioGroup options={chartList} defaultValue="lineChart" onChange={this.handleRadioGroupChange} />
|
||||
<div className={styles.chart}>
|
||||
<ReChartsComponent type={this.state.type} />
|
||||
</div>
|
||||
</div>)
|
||||
</Page>)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import { Radio } from 'antd'
|
||||
import { Page } from 'components'
|
||||
import HighChartsComponent from './HighChartsComponent'
|
||||
import styles from './index.less'
|
||||
|
||||
@@ -34,12 +35,12 @@ class Chart extends React.Component {
|
||||
})
|
||||
}
|
||||
render () {
|
||||
return (<div className="content-inner">
|
||||
return (<Page inner>
|
||||
<RadioGroup options={chartList} defaultValue="Highstock" onChange={this.handleRadioGroupChange} />
|
||||
<div className={styles.chart}>
|
||||
<HighChartsComponent type={this.state.type} />
|
||||
</div>
|
||||
</div>)
|
||||
</Page>)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user