Echarts图表

package.json

@@ -21,6 +21,8 @@
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
     "draftjs-to-html": "^0.8.4",
+    "echarts": "^4.1.0",
+    "echarts-for-react": "^2.0.15-beta.0",
     "eslint": "5.6.0",
     "eslint-config-react-app": "^3.0.5",
     "eslint-loader": "2.1.1",

src/axios/index.js

@@ -74,7 +74,7 @@ export default class Axios {
         url: options.url,
         method: 'get',
         baseURL: baseApi,
-        timeout: 3000,
+        timeout: 5000,
         params: (options.data && options.data.params) || ''
       }).then((response) => {
         if (options.data && options.data.isShowLoading !== false) {

src/pages/echarts/bar/index.js

@@ -0,0 +1,99 @@
+// src/pages/echarts/bar/index.js
+import React from 'react';
+import {Card} from 'antd';
+import ReactEcharts from 'echarts-for-react';
+import echartTheme from './../echartTheme';
+import themeLight from './../themeLight';
+//按需加载
+import echarts from 'echarts/lib/echarts';
+//必需基础组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/markPoint';
+//导入矩形图
+import 'echarts/lib/chart/bar';
+
+
+export default class Bar extends React.Component {
+
+  componentWillMount() {
+    echarts.registerTheme('Default', echartTheme);
+    echarts.registerTheme('Light', themeLight);
+  }
+
+  getOption = () => {
+    let option = {
+      title: {
+        text: '用户骑行订单'
+      },
+      tooltip: { // 提示条
+        trigger: 'axis',
+      },
+      xAxis: { // X轴
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+      },
+      yAxis: {// Y轴
+        type: 'value'
+      },
+      series: [ // 整体数据源
+        {
+          name: '订单量',
+          type: 'bar',
+          barWidth: '60%',
+          data: [10, 52, 200, 334, 390, 330, 220]
+        }
+      ]
+    };
+    return option;
+  };
+
+  getOption2 = () => {
+    let option = {
+      title: {
+        text: '用户骑行订单'
+      },
+      legend: { // 图例
+        data: ['OFO', '摩拜', '小蓝']
+      },
+      tooltip: { // 提示条
+        trigger: 'axis',
+      },
+      xAxis: { // X轴
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+      },
+      yAxis: {// Y轴
+        type: 'value'
+      },
+      series: [ // 整体数据源
+        {
+          name: 'OFO',
+          type: 'bar',
+          data: [2000, 3000, 5500, 7000, 8000, 12000, 20000]
+        }, {
+          name: '摩拜',
+          type: 'bar',
+          data: [1500, 3000, 4500, 6000, 8000, 10000, 15000]
+        }, {
+          name: '小蓝',
+          type: 'bar',
+          data: [1000, 2500, 4000, 4500, 6000, 7000, 8000]
+        }
+      ]
+    };
+    return option;
+  };
+
+  render() {
+    return (
+      <div>
+        <Card title="基本柱形图表">
+          <ReactEcharts option={this.getOption()} theme="Default"/>
+        </Card>
+        <Card title="对比柱形图表" style={{marginTop: 10}}>
+          <ReactEcharts option={this.getOption2()} theme="Default" style={{height: 500}}/>
+        </Card>
+      </div>
+    );
+  }
+}

src/pages/echarts/echartTheme.js

@@ -0,0 +1,211 @@
+export default {
+  "color": [
+    "#f9c700",
+    "#ff5400",
+    "#6699cc",
+    "#9cb3c5",
+    "#e0e6ec",
+    "#666666",
+    "#787464",
+    "#cc7e63",
+    "#724e58",
+    "#4b565b"
+  ],
+  "backgroundColor": "#ffffff",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#cccccc"
+    },
+    "subtextStyle": {
+      "color": "#cccccc"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 1
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 2
+      }
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": false
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#f1f3f5"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#f1f3f5"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999",
+        "fontSize": "14"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#f1f3f5"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.3)",
+          "rgba(200,200,200,0.3)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#f1f3f5"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#f1f3f5"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999",
+        "fontSize": "14"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#f1f3f5"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.3)",
+          "rgba(200,200,200,0.3)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999999"
+      },
+      "emphasis": {
+        "borderColor": "#666666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#333333"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#cccccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#cccccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#293c55",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#293c55",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#a9334c"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#293c55",
+        "borderColor": "#293c55",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#293c55",
+        "borderColor": "#293c55",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#e43c59",
+      "borderColor": "rgba(194,53,49,0.5)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#293c55"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#293c55"
+        }
+      }
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#ffffff"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#ffffff"
+        }
+      }
+    }
+  }
+}