|
42 | 42 |
|
43 | 43 | require([
|
44 | 44 | 'echarts'
|
45 |
| - // 'echarts/chart/line', |
46 |
| - // 'echarts/chart/bar', |
47 |
| - // 'echarts/chart/pie', |
48 |
| - // 'echarts/chart/scatter', |
49 |
| - // 'echarts/chart/custom', |
50 |
| - // 'echarts/chart/parallel', |
51 |
| - // 'echarts/chart/radar', |
52 |
| - // 'echarts/component/grid', |
53 |
| - // 'echarts/component/polar', |
54 |
| - // 'echarts/component/geo', |
55 |
| - // 'echarts/component/singleAxis', |
56 |
| - // 'echarts/component/legend', |
57 |
| - // 'echarts/component/tooltip', |
58 |
| - // 'echarts/component/toolbox', |
59 |
| - // 'echarts/component/visualMap', |
60 |
| - // 'echarts/component/dataZoom' |
61 | 45 | ], function (ec) {
|
62 | 46 | echarts = ec;
|
63 | 47 | chart = myChart = echarts.init(document.getElementById('main'));
|
64 | 48 |
|
65 |
| -var data = [ |
66 |
| - {name:'广州', value: 50}, |
67 |
| - {name:'深圳', value: 72}, |
68 |
| - {name:'珠海', value: 30}, |
69 |
| - {name:'佛山', value: 38}, |
70 |
| - {name:'杭州', value: 42}, |
71 |
| - {name:'舟山', value: 32}, |
72 |
| - {name:'宁波', value: 52} |
73 |
| -]; |
74 |
| - |
75 |
| - |
76 |
| -option = { |
77 |
| - tooltip : { |
78 |
| - trigger: 'item' |
79 |
| - }, |
80 |
| - legend: { |
81 |
| - data:['广州','深圳','珠海','佛山','杭州','舟山','宁波'], |
82 |
| - top: 0, |
83 |
| - left: 'center' |
84 |
| - }, |
85 |
| - xAxis : [ |
86 |
| - { |
87 |
| - type : 'category', |
88 |
| - data : [0], |
89 |
| - axisTick: {show: false}, |
90 |
| - axisLabel: {show: false} |
91 |
| - }, |
92 |
| - ], |
93 |
| - yAxis : [ |
94 |
| - { |
95 |
| - type : 'value' |
96 |
| - } |
97 |
| - ], |
98 |
| - series : echarts.util.map(data, function (item) { |
99 |
| - return { |
100 |
| - name: item.name, |
101 |
| - type: 'bar', |
102 |
| - label: { |
103 |
| - normal: { |
104 |
| - show: true, |
105 |
| - position: 'bottom', |
106 |
| - formatter: function (param) { |
107 |
| - return param.seriesName; |
108 |
| - } |
| 49 | + var data = [ |
| 50 | + {name:'广州', value: 50}, |
| 51 | + {name:'深圳', value: 72}, |
| 52 | + {name:'珠海', value: 30}, |
| 53 | + {name:'佛山', value: 38}, |
| 54 | + {name:'杭州', value: 42}, |
| 55 | + {name:'舟山', value: 32}, |
| 56 | + {name:'宁波', value: 52} |
| 57 | + ]; |
| 58 | + |
| 59 | + |
| 60 | + option = { |
| 61 | + tooltip : { |
| 62 | + trigger: 'item' |
| 63 | + }, |
| 64 | + legend: { |
| 65 | + data:['广州','深圳','珠海','佛山','杭州','舟山','宁波'], |
| 66 | + top: 0, |
| 67 | + left: 'center' |
| 68 | + }, |
| 69 | + xAxis : [ |
| 70 | + { |
| 71 | + type : 'category', |
| 72 | + data : [0], |
| 73 | + axisTick: {show: false}, |
| 74 | + axisLabel: {show: false} |
| 75 | + }, |
| 76 | + ], |
| 77 | + yAxis : [ |
| 78 | + { |
| 79 | + type : 'value' |
| 80 | + } |
| 81 | + ], |
| 82 | + series : echarts.util.map(data, function (item) { |
| 83 | + return { |
| 84 | + name: item.name, |
| 85 | + type: 'bar', |
| 86 | + label: { |
| 87 | + normal: { |
| 88 | + show: true, |
| 89 | + position: 'bottom', |
| 90 | + formatter: function (param) { |
| 91 | + return param.seriesName; |
| 92 | + } |
| 93 | + } |
| 94 | + }, |
| 95 | + data: [item.value] |
| 96 | + } |
| 97 | + }).concat([{ |
| 98 | + type: 'custom', |
| 99 | + renderItem: renderProvinceName, |
| 100 | + data: [0] |
| 101 | + }]) |
| 102 | + }; |
| 103 | + |
| 104 | + function renderProvinceName(param, api) { |
| 105 | + var currentSeriesIndices = api.currentSeriesIndices(); |
| 106 | + currentSeriesIndices.pop(); // remove custom series; |
| 107 | + |
| 108 | + var barLayout = api.barLayout({ |
| 109 | + barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length |
| 110 | + }); |
| 111 | + |
| 112 | + var nameTexts = echarts.util.map(currentSeriesIndices, function (serIdx, index) { |
| 113 | + var point = api.coord([0, 0]); |
| 114 | + point[0] += barLayout[index].offsetCenter; |
| 115 | + point[1] = api.getHeight() - 20; |
| 116 | + |
| 117 | + return { |
| 118 | + position: point, |
| 119 | + name: serIdx, |
| 120 | + type: 'circle', |
| 121 | + shape: { |
| 122 | + cx: 0, cy: 0, r: 10 |
| 123 | + }, |
| 124 | + style: { |
| 125 | + text: serIdx, |
| 126 | + fill: '#333', |
| 127 | + textFill: '#eee', |
| 128 | + stroke: null |
| 129 | + } |
| 130 | + }; |
| 131 | + }); |
| 132 | + |
| 133 | + return { |
| 134 | + type: 'group', |
| 135 | + diffChildrenByName: true, |
| 136 | + children: nameTexts |
| 137 | + }; |
109 | 138 | }
|
110 |
| - }, |
111 |
| - data: [item.value] |
112 |
| - } |
113 |
| - }).concat([{ |
114 |
| - type: 'custom', |
115 |
| - renderItem: renderProvinceName, |
116 |
| - data: [0] |
117 |
| - }]) |
118 |
| -}; |
119 |
| - |
120 |
| -function renderProvinceName(param, api) { |
121 |
| - var currentSeriesIndices = api.currentSeriesIndices(); |
122 |
| - currentSeriesIndices.pop(); // remove custom series; |
123 |
| - |
124 |
| - var barLayout = api.barLayout({ |
125 |
| - barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length |
126 |
| - }); |
127 |
| - |
128 |
| - var nameTexts = echarts.util.map(currentSeriesIndices, function (serIdx, index) { |
129 |
| - var point = api.coord([0, 0]); |
130 |
| - point[0] += barLayout[index].offsetCenter; |
131 |
| - point[1] = api.getHeight() - 20; |
132 |
| - |
133 |
| - return { |
134 |
| - position: point, |
135 |
| - name: serIdx, |
136 |
| - type: 'circle', |
137 |
| - shape: { |
138 |
| - cx: 0, cy: 0, r: 10 |
139 |
| - }, |
140 |
| - style: { |
141 |
| - text: serIdx, |
142 |
| - fill: '#333', |
143 |
| - stroke: null |
144 |
| - } |
145 |
| - }; |
146 |
| - }); |
147 |
| - |
148 |
| - return { |
149 |
| - type: 'group', |
150 |
| - diffChildrenByName: true, |
151 |
| - children: nameTexts |
152 |
| - }; |
153 |
| -} |
154 | 139 |
|
155 | 140 | chart.setOption(option);
|
156 | 141 | });
|
|
0 commit comments