94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<template>
|
||
<el-main>
|
||
<el-row :gutter="15">
|
||
|
||
<el-col :lg="8">
|
||
<el-card shadow="never">
|
||
<scEcharts height="300px" :option="option1"></scEcharts>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :lg="8">
|
||
<el-card shadow="never">
|
||
<scEcharts height="300px" :option="option2"></scEcharts>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
</template>
|
||
|
||
<script>
|
||
import scEcharts from '@/components/scEcharts';
|
||
|
||
/**
|
||
* 引入组件 @/components/scEcharts
|
||
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
|
||
* 支持props包括 height，width，option
|
||
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
|
||
*/
|
||
|
||
export default {
|
||
name: 'chart',
|
||
components: {
|
||
scEcharts
|
||
},
|
||
data() {
|
||
return {
|
||
option1: {
|
||
title: {
|
||
text: '预制棒',
|
||
// subtext: '',
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '60%'],
|
||
label: false,
|
||
data: [
|
||
{value: 1048, name: '搜索引擎'},
|
||
{value: 735, name: '直接访问'},
|
||
{value: 580, name: '邮件营销'},
|
||
{value: 484, name: '联盟广告'},
|
||
{value: 300, name: '视频广告'}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
option2: {
|
||
title: {
|
||
text: '预制管',
|
||
// subtext: '',
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '60%'],
|
||
label: false,
|
||
data: [
|
||
{value: 1048, name: '搜索引擎'},
|
||
{value: 735, name: '直接访问'},
|
||
{value: 580, name: '邮件营销'},
|
||
{value: 484, name: '联盟广告'},
|
||
{value: 300, name: '视频广告'}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|