|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row :gutter="40" class="panel-group">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card style="height: 400px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 城市餐饮基本指数
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;font-size: 16px;color: #999">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">餐饮发展指数</el-col>
|
|
|
+ <el-col :span="12">OTA评论数</el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row style="font-size: 34px;color: #090909">
|
|
|
+ <el-col :span="12">1</el-col>
|
|
|
+ <el-col :span="12">0</el-col>
|
|
|
+ </el-row>
|
|
|
+ <p style="text-align: left">餐饮类别覆盖率</p>
|
|
|
+ </div>
|
|
|
+ <div id="chart1" style="width: 100%;height:200px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card style="height: 400px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 城市商业发展指数
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;font-size: 16px;color: #999">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">快餐指数</el-col>
|
|
|
+ <el-col :span="8">便利指数</el-col>
|
|
|
+ <el-col :span="8">商圈指数</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="font-size: 34px;color: #090909">
|
|
|
+ <el-col :span="8">2</el-col>
|
|
|
+ <el-col :span="8">2.5</el-col>
|
|
|
+ <el-col :span="8">2.2</el-col>
|
|
|
+ </el-row>
|
|
|
+ <p style="text-align: left">商业入驻品牌覆盖率</p>
|
|
|
+ </div>
|
|
|
+ <div id="chart2" style="width: 100%;height:200px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card style="height: 400px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 城市文化休闲，体育健身指数
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;font-size: 16px;color: #999;">
|
|
|
+ <div style="height: 25px;"></div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">博物馆指数</el-col>
|
|
|
+ <el-col :span="12">图书馆指数</el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="height: 25px;"></div>
|
|
|
+ <el-row style="font-size: 34px;color: #090909;">
|
|
|
+ <el-col :span="12">2</el-col>
|
|
|
+ <el-col :span="12">0</el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="height: 50px;"></div>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">运动场所指数</el-col>
|
|
|
+ <el-col :span="12">咖啡馆指数</el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="height: 25px;"></div>
|
|
|
+ <el-row style="font-size: 34px;color: #090909">
|
|
|
+ <el-col :span="12">2</el-col>
|
|
|
+ <el-col :span="12">1.2</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card style="height: 400px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 城市酒店发展指数
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;font-size: 16px;color: #999">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">酒店发展指数</el-col>
|
|
|
+ <el-col :span="12">OTA评论数</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="font-size: 34px;color: #090909">
|
|
|
+ <el-col :span="12">0.03</el-col>
|
|
|
+ <el-col :span="12">0</el-col>
|
|
|
+ </el-row>
|
|
|
+ <p style="text-align: left">酒店类别覆盖率</p>
|
|
|
+ </div>
|
|
|
+ <div id="chart3" style="width: 100%;height:200px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="40" class="panel-group">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card style="height: 400px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 景点基本指数
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;font-size: 16px;color: #999;">
|
|
|
+ <div style="height: 25px;"></div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">景点发展指数</el-col>
|
|
|
+ <el-col :span="12">OTA评论数</el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="height: 25px;"></div>
|
|
|
+ <el-row style="font-size: 34px;color: #090909;">
|
|
|
+ <el-col :span="12">0.01</el-col>
|
|
|
+ <el-col :span="12">0</el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="height: 50px;"></div>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">旅游产品数</el-col>
|
|
|
+ <el-col :span="12">游记数量</el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="height: 25px;"></div>
|
|
|
+ <el-row style="font-size: 34px;color: #090909">
|
|
|
+ <el-col :span="12">8</el-col>
|
|
|
+ <el-col :span="12">6</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card style="height: 400px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 城市夜游产业监测
|
|
|
+ </div>
|
|
|
+ <div id="chart4" style="width: 100%;height:300px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card style="height: 400px">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ 景区消费便利性指数监测
|
|
|
+ </div>
|
|
|
+ <div id="chart5" style="width: 100%;height:300px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: 'first'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.buildBar('chart1', '#C25552', ['饭店', '餐厅', '自助餐', '快餐业'], { name: '占比', type: 'bar', stack: 'Total', data: [35, 28, 17, 21] })
|
|
|
+ this.buildBar('chart2', '#3A6CCE', ['皮具', '眼镜', '鞋包', '服饰'], { name: '占比', type: 'bar', stack: 'Total', data: [19, 23, 25, 32] })
|
|
|
+ this.buildBar('chart3', '#C25552', ['亲子酒店', '浪漫情侣', '商务出行', '客栈'], { name: '占比', type: 'bar', stack: 'Total', data: [22, 32, 26, 25] })
|
|
|
+ this.buildBar('chart4', '#C25552', ['食', '住', '行', '游', '购', '娱'], { name: '指标', type: 'line', stack: 'Total', data: [1.13, 3.6, 1.23, 1.23, 1.23, 2.6] })
|
|
|
+ this.buildBar('chart5', '#C25552', ['信息获取', '交通', '入园', '游玩'], { name: '指标', type: 'line', stack: 'Total', data: [7.8, 10.4, 10.4, 16] })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ buildBar(elementId, color, xAxis, seriesData) {
|
|
|
+ const chart = echarts.init(document.getElementById(elementId))
|
|
|
+ chart.setOption({
|
|
|
+ color: [color],
|
|
|
+ tooltip: { trigger: 'item' },
|
|
|
+ legend: { top: '0', right: '1%' },
|
|
|
+ grid: { left: 25, right: 0, bottom: 35, top: 25 },
|
|
|
+ xAxis: { type: 'category', axisLabel: { rotate: 25 }, data: xAxis },
|
|
|
+ yAxis: { type: 'value' },
|
|
|
+ series: [seriesData]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
