|
@@ -206,6 +206,10 @@ const generateData = (count, min, max) => {
|
|
206
|
|
206
|
|
|
207
|
const multiLineChartOption = (xAxisData, series) => ({
|
207
|
const multiLineChartOption = (xAxisData, series) => ({
|
|
208
|
grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
|
208
|
grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
|
|
|
|
209
|
+ tooltip: {
|
|
|
|
210
|
+ trigger: 'axis',
|
|
|
|
211
|
+ axisPointer: { type: 'cross' }
|
|
|
|
212
|
+ },
|
|
209
|
xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
|
213
|
xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
|
|
210
|
yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
|
214
|
yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
|
|
211
|
legend: {
|
215
|
legend: {
|
|
@@ -230,6 +234,10 @@ const multiLineChartOption = (xAxisData, series) => ({
|
|
230
|
|
234
|
|
|
231
|
const horizontalBarChartOption = (data, color) => ({
|
235
|
const horizontalBarChartOption = (data, color) => ({
|
|
232
|
grid: { left: '20%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
|
236
|
grid: { left: '20%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
|
|
|
|
237
|
+ tooltip: {
|
|
|
|
238
|
+ trigger: 'axis',
|
|
|
|
239
|
+ axisPointer: { type: 'shadow' }
|
|
|
|
240
|
+ },
|
|
233
|
xAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
|
241
|
xAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
|
|
234
|
yAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
|
242
|
yAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
|
|
235
|
series: [{
|
243
|
series: [{
|
|
@@ -243,6 +251,10 @@ const horizontalBarChartOption = (data, color) => ({
|
|
243
|
|
251
|
|
|
244
|
const barLineChartOption = (xAxisData, barData, lineData) => ({
|
252
|
const barLineChartOption = (xAxisData, barData, lineData) => ({
|
|
245
|
grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
|
253
|
grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
|
|
|
|
254
|
+ tooltip: {
|
|
|
|
255
|
+ trigger: 'axis',
|
|
|
|
256
|
+ axisPointer: { type: 'cross' }
|
|
|
|
257
|
+ },
|
|
246
|
xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
|
258
|
xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
|
|
247
|
yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
|
259
|
yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
|
|
248
|
legend: {
|
260
|
legend: {
|