1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| /**
| * 徐祥健<xuxj@hugeinfo.com.cn>
| * 2018年7月16日 19:18
| *
| */
|
|
| import React from 'react';
| //导入echarts
| import echarts from 'echarts/lib/echarts'; //必须
| import 'echarts/lib/chart/bar'; //图表类型
| import 'echarts/lib/component/tooltip';
| import 'echarts/lib/component/legend';//标题插件
| import 'echarts/lib/component/grid';
| import 'echarts/lib/component/toolbox';
|
| import './style.scss';
|
|
| export default class BarView extends React.Component {
|
| componentDidMount() {
| console.log('componentDidMount');
| this.init();
| }
| componentDidUpdate() {
| this.init();
| }
| init() {
| const { countArr, dateArr } = this.props;
| // 基于准备好的dom，初始化echarts实例
| var myChart = echarts.init(document.getElementById('main'));
| // 绘制图表
| myChart.setOption({
| backgroundColor: '#FFFFFF',
| tooltip: {
| trigger: 'axis',
| axisPointer: { // 坐标轴指示器，坐标轴触发有效
| type: 'line' // 默认为直线，可选为：'line' | 'shadow'
| }
| },
| grid: {
| left: '3%',
| right: '4%',
| bottom: '3%',
| containLabel: true
| },
| xAxis: [
| {
| type: 'category',
| data: dateArr,
| axisTick: {
| alignWithLabel: true
| }
| }
| ],
| yAxis: [
| {
| type: 'value'
| }
| ],
| series: [
| {
| name: '访问量统计',
| type: 'bar',
| barWidth: '60%',
| data: countArr,
| itemStyle: {
| normal: {
| color: new echarts.graphic.LinearGradient(
| 0, 0, 0, 1, [{
| offset: 0,
| color: '#0286ff'
| },
| {
| offset: 1,
| color: '#00feff'
| }
| ]
| )
| }
| },
| }
|
| ]
| });
| setTimeout(myChart.resize);
| }
|
| render() {
| return (
| <div className="bar-view-main">
| <div id="main" style={{ width: "100%", height: '300px' }}></div>
| </div>
| );
| }
|
|
| }
|
|
