|
@@ -167,6 +167,27 @@ export default {
|
|
|
{ name: 'C', year: '2022', value: 11 },
|
|
|
{ name: 'D', year: '2022', value: 15 }
|
|
|
],
|
|
|
+ chart2: [
|
|
|
+ { name: 'A', year: '2019', value: 3 },
|
|
|
+ { name: 'B', year: '2019', value: 5 },
|
|
|
+ { name: 'C', year: '2019', value: 21 },
|
|
|
+ { name: 'D', year: '2019', value: 12 },
|
|
|
+
|
|
|
+ { name: 'A', year: '2020', value: 5 },
|
|
|
+ { name: 'B', year: '2020', value: 1 },
|
|
|
+ { name: 'C', year: '2020', value: 13 },
|
|
|
+ { name: 'D', year: '2020', value: 12 },
|
|
|
+
|
|
|
+ { name: 'A', year: '2021', value: 2 },
|
|
|
+ { name: 'B', year: '2021', value: 13 },
|
|
|
+ { name: 'C', year: '2021', value: 11 },
|
|
|
+ { name: 'D', year: '2021', value: 12 },
|
|
|
+
|
|
|
+ { name: 'A', year: '2022', value: 7 },
|
|
|
+ { name: 'B', year: '2022', value: 12 },
|
|
|
+ { name: 'C', year: '2022', value: 1 },
|
|
|
+ { name: 'D', year: '2022', value: 15 }
|
|
|
+ ],
|
|
|
chart3: [
|
|
|
{ year: '2001', population: 54.8 },
|
|
|
{ year: '2002', population: 38 },
|
|
@@ -202,14 +223,14 @@ export default {
|
|
|
methods: {
|
|
|
getChart () {
|
|
|
this.getChart1('chart1', this.chart1)
|
|
|
- this.getChart2('chart2', this.chart1)
|
|
|
+ this.getChart2('chart2', this.chart2)
|
|
|
this.getChart3('chart3', this.chart3)
|
|
|
this.getChart4('chart4', this.chart4)
|
|
|
},
|
|
|
getChart1 (id, data) {
|
|
|
registerTheme('myTheme', {
|
|
|
columnWidthRatio: 0.2,
|
|
|
- colors10: ['#FFDB5C', '#FF9F7F', '#FB7293', '#E7BCF3', '#E7BCF3', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4']
|
|
|
+ colors10: ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4']
|
|
|
})
|
|
|
const chart = new Chart({
|
|
|
container: id,
|
|
@@ -291,13 +312,13 @@ export default {
|
|
|
.color('name')
|
|
|
.shape('smooth')
|
|
|
|
|
|
- chart.theme({ 'styleSheet': { 'brandColor': '# ', 'paletteQualitative10': ['#FFDB5C', '#FF9F7F', '#FB7293', '#E7BCF3', '#E7BCF3', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4'], 'paletteQualitative20': ['#5B8FF9', '#CDDDFD', '#61DDAA', '#CDF3E4', '#65789B', '#CED4DE', '#F6BD16', '#FCEBB9', '#7262fd', '#D3CEFD', '#78D3F8', '#D3EEF9', '#9661BC', '#DECFEA', '#F6903D', '#FFE0C7', '#008685', '#BBDEDE', '#F08BB4', '#FFE0ED'] } })
|
|
|
+ chart.theme({ 'styleSheet': { 'brandColor': '# ', 'paletteQualitative10': ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4', '#F08BB4'], 'paletteQualitative20': ['#5B8FF9', '#CDDDFD', '#61DDAA', '#CDF3E4', '#65789B', '#CED4DE', '#F6BD16', '#FCEBB9', '#7262fd', '#D3CEFD', '#78D3F8', '#D3EEF9', '#9661BC', '#DECFEA', '#F6903D', '#FFE0C7', '#008685', '#BBDEDE', '#F08BB4', '#FFE0ED'] } })
|
|
|
chart.render()
|
|
|
},
|
|
|
getChart3 (id, data) {
|
|
|
registerTheme('myTheme', {
|
|
|
columnWidthRatio: 0.2,
|
|
|
- colors10: ['#FFDB5C', '#FF9F7F', '#FB7293', '#E7BCF3', '#E7BCF3', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4']
|
|
|
+ colors10: ['#0091F1', '#00E4EC', '#FDB628', '#EB6F49', '#00D98B', '#8256E8 ', '#9661BC', '#F6903D', '#008685', '#F08BB4']
|
|
|
})
|
|
|
const chart = new Chart({
|
|
|
container: id,
|
|
@@ -411,7 +432,7 @@ export default {
|
|
|
.view-container {
|
|
|
width:1920px;
|
|
|
height:1080px;
|
|
|
-background-color: rgba(4, 8, 20, 0.8);
|
|
|
+background-color: RGBA(0, 7, 73, 0.8);
|
|
|
padding:35px 21px;
|
|
|
}
|
|
|
.view-container::after {
|
|
@@ -460,6 +481,7 @@ padding-top:35px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: bold;
|
|
|
color: #A7DBFF;
|
|
|
+
|
|
|
line-height: 25px;
|
|
|
.box-title-text{
|
|
|
position: relative;
|
|
@@ -471,7 +493,7 @@ padding-top:35px;
|
|
|
position: absolute;
|
|
|
top:0;left:0;right:0;bottom:0;
|
|
|
z-index: -1;
|
|
|
- background-color: #16171C;
|
|
|
+ background-color: rgb(46, 37, 77);
|
|
|
border: 1px solid #0096FF;
|
|
|
border-top: none;
|
|
|
box-shadow: 0px 29px 30px 0px rgba(0, 128, 202, 0.3);
|
|
@@ -482,7 +504,7 @@ padding-top:35px;
|
|
|
padding: 20px;
|
|
|
.list{
|
|
|
padding: 22px 16px;
|
|
|
- background:RGBA(19, 42, 62, 1);
|
|
|
+ background:RGBA(12, 38, 70, 0.5);
|
|
|
color:rgba(0, 190, 189, 1);
|
|
|
border-bottom:1px solid RGBA(21, 72, 62, 1);
|
|
|
}
|