[Update] 修改echarts

This commit is contained in:
ibuler
2020-05-20 14:30:39 +08:00
parent 8c46abbd64
commit b8825f10f1
4 changed files with 12 additions and 20 deletions

View File

@@ -45,6 +45,9 @@ import VueLogger from 'vuejs-logger'
import loggerOptions from './utils/logger' import loggerOptions from './utils/logger'
Vue.use(VueLogger, loggerOptions) Vue.use(VueLogger, loggerOptions)
import ECharts from 'vue-echarts'
Vue.component('echarts', ECharts)
import service from '@/utils/request' import service from '@/utils/request'
// lodash // lodash

View File

@@ -3,22 +3,20 @@
<small>活跃用户资产占比</small> <small>活跃用户资产占比</small>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<echarts :options="option" /> <echarts :options="option" :autoresize="true" />
</el-col> </el-col>
<el-col :md="12" :sm="24"> <el-col :md="12" :sm="24">
<echarts :options="option" /> <echarts :options="option" :autoresize="true" />
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/pie' import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip' import 'echarts/lib/component/tooltip'
export default { export default {
name: 'LoginActivePin', name: 'LoginActivePin',
components: { 'echarts': ECharts },
data() { data() {
return { return {
option: { option: {
@@ -65,7 +63,7 @@ export default {
<style scoped> <style scoped>
.echarts { .echarts {
width: 150px; width: 100%;
height: 250px; height: 250px;
} }
</style> </style>

View File

@@ -3,12 +3,10 @@
</template> </template>
<script> <script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line' import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend'
export default { export default {
name: 'LoginMetric', name: 'LoginMetric',
components: { 'echarts': ECharts },
data: function() { data: function() {
return { return {
options: { options: {
@@ -25,11 +23,7 @@ export default {
} }
}, },
legend: { legend: {
data: ['LoginCount', 'ActiveUser', 'ActiveAsset'], data: ['LoginCount', 'ActiveUser', 'ActiveAsset']
formatter: function(name) {
const map = { LoginCount: '登录数量', ActiveUser: '用户', ActiveAsset: '资产' }
return map[name]
}
}, },
grid: { grid: {
left: '3%', left: '3%',
@@ -70,6 +64,7 @@ export default {
type: 'value' type: 'value'
} }
], ],
animationDuration: 1000,
series: [ series: [
{ {
name: 'LoginCount', name: 'LoginCount',

View File

@@ -12,13 +12,10 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :md="6" :sm="24"> <el-col :lg="18" :sm="24">
<LoginTop class="card-item" />
</el-col>
<el-col :md="12" :sm="24">
<LoginMetric class="card-item" style="margin-top: -30px" heigth="300px" /> <LoginMetric class="card-item" style="margin-top: -30px" heigth="300px" />
</el-col> </el-col>
<el-col :md="6" :sm="24"> <el-col :lg="6" :sm="24">
<LoginActivePin class="card-item" /> <LoginActivePin class="card-item" />
</el-col> </el-col>
</el-row> </el-row>
@@ -26,13 +23,12 @@
</template> </template>
<script> <script>
import LoginTop from './LoginTop'
import LoginMetric from './LoginMetric' import LoginMetric from './LoginMetric'
import LoginActivePin from './LoginActivePin' import LoginActivePin from './LoginActivePin'
export default { export default {
name: 'DatesLoginSummary', name: 'DatesLoginSummary',
components: { LoginTop, LoginMetric, LoginActivePin }, components: { LoginMetric, LoginActivePin },
data() { data() {
return { return {
active: 'weekly' active: 'weekly'