Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
V
VueElementTemplate
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄瑜
VueElementTemplate
Commits
67c4a3b4
Commit
67c4a3b4
authored
7 years ago
by
Pan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix case-sensitive bug
parent
c339b626
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
268 additions
and
0 deletions
+268
-0
mixChart.vue
src/components/Charts/mixChart.vue
+268
-0
No files found.
src/components/Charts/mixChart.vue
0 → 100644
View file @
67c4a3b4
<
template
>
<div
:class=
"className"
:id=
"id"
:style=
"
{height:height,width:width}">
</div>
</
template
>
<
script
>
import
echarts
from
'echarts'
;
export
default
{
props
:
{
className
:
{
type
:
String
,
default
:
'chart'
},
id
:
{
type
:
String
,
default
:
'chart'
},
width
:
{
type
:
String
,
default
:
'200px'
},
height
:
{
type
:
String
,
default
:
'200px'
}
},
data
()
{
return
{
chart
:
null
};
},
mounted
()
{
this
.
initChart
();
this
.
chart
=
null
;
},
beforeDestroy
()
{
if
(
!
this
.
chart
)
{
return
}
this
.
chart
.
dispose
();
this
.
chart
=
null
;
},
methods
:
{
initChart
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
const
xData
=
(
function
()
{
const
data
=
[];
for
(
let
i
=
1
;
i
<
13
;
i
++
)
{
data
.
push
(
i
+
'月份'
);
}
return
data
;
}());
this
.
chart
.
setOption
({
backgroundColor
:
'#344b58'
,
title
:
{
text
:
'统计'
,
x
:
'4%'
,
textStyle
:
{
color
:
'#fff'
,
fontSize
:
'22'
},
subtextStyle
:
{
color
:
'#90979c'
,
fontSize
:
'16'
}
},
tooltip
:
{
trigger
:
'axis'
,
axisPointer
:
{
textStyle
:
{
color
:
'#fff'
}
}
},
grid
:
{
borderWidth
:
0
,
top
:
110
,
bottom
:
95
,
textStyle
:
{
color
:
'#fff'
}
},
legend
:
{
x
:
'15%'
,
top
:
'10%'
,
textStyle
:
{
color
:
'#90979c'
},
data
:
[
'女'
,
'男'
,
'平均'
]
},
calculable
:
true
,
xAxis
:
[{
type
:
'category'
,
axisLine
:
{
lineStyle
:
{
color
:
'#90979c'
}
},
splitLine
:
{
show
:
false
},
axisTick
:
{
show
:
false
},
splitArea
:
{
show
:
false
},
axisLabel
:
{
interval
:
0
},
data
:
xData
}],
yAxis
:
[{
type
:
'value'
,
splitLine
:
{
show
:
false
},
axisLine
:
{
lineStyle
:
{
color
:
'#90979c'
}
},
axisTick
:
{
show
:
false
},
axisLabel
:
{
interval
:
0
},
splitArea
:
{
show
:
false
}
}],
dataZoom
:
[{
show
:
true
,
height
:
30
,
xAxisIndex
:
[
0
],
bottom
:
30
,
start
:
10
,
end
:
80
,
handleIcon
:
'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z'
,
handleSize
:
'110%'
,
handleStyle
:
{
color
:
'#d3dee5'
},
textStyle
:
{
color
:
'#fff'
},
borderColor
:
'#90979c'
},
{
type
:
'inside'
,
show
:
true
,
height
:
15
,
start
:
1
,
end
:
35
}],
series
:
[{
name
:
'女'
,
type
:
'bar'
,
stack
:
'总量'
,
barMaxWidth
:
35
,
barGap
:
'10%'
,
itemStyle
:
{
normal
:
{
color
:
'rgba(255,144,128,1)'
,
label
:
{
show
:
true
,
textStyle
:
{
color
:
'#fff'
},
position
:
'insideTop'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
}
}
},
data
:
[
709
,
1917
,
2455
,
2610
,
1719
,
1433
,
1544
,
3285
,
5208
,
3372
,
2484
,
4078
]
},
{
name
:
'男'
,
type
:
'bar'
,
stack
:
'总量'
,
itemStyle
:
{
normal
:
{
color
:
'rgba(0,191,183,1)'
,
barBorderRadius
:
0
,
label
:
{
show
:
true
,
position
:
'top'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
}
}
},
data
:
[
327
,
1776
,
507
,
1200
,
800
,
482
,
204
,
1390
,
1001
,
951
,
381
,
220
]
},
{
name
:
'平均'
,
type
:
'line'
,
stack
:
'总量'
,
symbolSize
:
10
,
symbol
:
'circle'
,
itemStyle
:
{
normal
:
{
color
:
'rgba(252,230,48,1)'
,
barBorderRadius
:
0
,
label
:
{
show
:
true
,
position
:
'top'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
}
}
},
data
:
[
1036
,
3693
,
2962
,
3810
,
2519
,
1915
,
1748
,
4675
,
6209
,
4323
,
2865
,
4298
]
}
]
})
}
}
}
</
script
>
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment