mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-04-06 03:58:00 +08:00
653 lines
18 KiB
Vue
653 lines
18 KiB
Vue
<template>
|
||
<div class="echarts-container">
|
||
<el-row :gutter="20">
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
|
||
<el-card shadow="hover">
|
||
<div slot="header">柱状图</div>
|
||
<div>
|
||
<vab-chart autoresize :options="chart1" />
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
|
||
<el-card shadow="hover">
|
||
<div slot="header">环形图</div>
|
||
<div>
|
||
<vab-chart
|
||
ref="myCircle"
|
||
theme="vab-echarts-theme"
|
||
:options="chart2"
|
||
class="my-circle"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
|
||
<el-card shadow="hover">
|
||
<div slot="header">关系图</div>
|
||
<div>
|
||
<vab-chart
|
||
ref="myLine1"
|
||
theme="vab-echarts-theme"
|
||
autoresize
|
||
:options="chart3"
|
||
class="my-line1"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||
<el-card class="card" shadow="never">
|
||
<div slot="header">
|
||
<span>中国地图</span>
|
||
</div>
|
||
<vab-chart
|
||
:autoresize="true"
|
||
theme="vab-echarts-theme"
|
||
:options="zgdt"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||
<el-card class="card" shadow="never">
|
||
<div slot="header">
|
||
<span>世界地图</span>
|
||
</div>
|
||
<vab-chart
|
||
:autoresize="true"
|
||
theme="vab-echarts-theme"
|
||
:options="sjdt"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
import VabChart from '@/plugins/echarts'
|
||
|
||
export default {
|
||
name: 'Echarts',
|
||
components: {
|
||
VabChart,
|
||
},
|
||
data() {
|
||
return {
|
||
chart1: {
|
||
grid: {
|
||
top: '25%',
|
||
bottom: '10%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
data: ['销售水量', '主营业务'],
|
||
},
|
||
xAxis: {
|
||
data: [
|
||
'当年完成水量',
|
||
'去年同期水量',
|
||
'滚动目标值水量',
|
||
'全年目标值水量',
|
||
'当年完成金额',
|
||
'去年同期金额',
|
||
'滚动目标金额',
|
||
'全年目标值',
|
||
],
|
||
axisLine: {
|
||
show: true, //隐藏X轴轴线
|
||
},
|
||
axisTick: {
|
||
show: true, //隐藏X轴刻度
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '亿元',
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '同比',
|
||
position: 'right',
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
formatter: '{value} %', //右侧Y轴文字显示
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
gridIndex: 0,
|
||
min: 50,
|
||
max: 100,
|
||
splitNumber: 8,
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '销售水量',
|
||
type: 'line',
|
||
smooth: true, //平滑曲线显示
|
||
itemStyle: {
|
||
color: '#058cff',
|
||
},
|
||
areaStyle: {
|
||
color: 'rgba(5,140,255, 0.2)',
|
||
},
|
||
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
|
||
},
|
||
{
|
||
name: '主营业务',
|
||
type: 'bar',
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#00FFE3',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#4693EC',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
|
||
},
|
||
],
|
||
},
|
||
chart2: {
|
||
tooltip: {
|
||
show: true,
|
||
formatter: '{b} : {c}',
|
||
},
|
||
|
||
legend: {
|
||
show: true,
|
||
icon: 'circle',
|
||
top: '10%',
|
||
left: '10%',
|
||
width: 50,
|
||
padding: [0, 5],
|
||
itemGap: 25,
|
||
data: ['已婚已育', '已婚未育', '未婚', '学生'],
|
||
selectedMode: true,
|
||
orient: 'vertical',
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Line 4',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
hoverAnimation: false,
|
||
radius: ['65%', '75%'],
|
||
|
||
data: [
|
||
{
|
||
value: 7645434,
|
||
name: '已婚已育',
|
||
},
|
||
{
|
||
value: 3612343,
|
||
name: '总数',
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(0,0,0,0)',
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
emphasis: {
|
||
color: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: 'Line 3',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['50%', '60%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
// shadowBlur: 15,
|
||
// shadowColor: 'white',
|
||
},
|
||
},
|
||
hoverAnimation: false,
|
||
|
||
data: [
|
||
{
|
||
value: 2632321,
|
||
name: '已婚未育',
|
||
},
|
||
{
|
||
value: 2212343,
|
||
name: '总数',
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(0,0,0,0)',
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
emphasis: {
|
||
color: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: 'Line 2',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
hoverAnimation: false,
|
||
radius: ['35%', '45%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
// shadowBlur: 15,
|
||
// shadowColor: 'white',
|
||
},
|
||
},
|
||
|
||
data: [
|
||
{
|
||
value: 1823323,
|
||
name: '未婚',
|
||
},
|
||
{
|
||
value: 1812343,
|
||
name: '总数',
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(0,0,0,0)',
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
emphasis: {
|
||
color: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
|
||
radius: ['20%', '30%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
// shadowBlur: 15,
|
||
// shadowColor: 'white',
|
||
},
|
||
},
|
||
hoverAnimation: false,
|
||
|
||
data: [
|
||
{
|
||
value: 1342221,
|
||
name: '学生',
|
||
},
|
||
{
|
||
value: 1912343,
|
||
name: '总数',
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(0,0,0,0)',
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
emphasis: {
|
||
color: 'rgba(0,0,0,0)',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
chart3: {
|
||
series: [
|
||
{
|
||
type: 'graph',
|
||
layout: 'force',
|
||
symbolSize: 58,
|
||
draggable: true,
|
||
roam: true,
|
||
focusNodeAdjacency: true,
|
||
categories: [
|
||
{
|
||
name: '公司',
|
||
itemStyle: {
|
||
color: '#006acc',
|
||
},
|
||
},
|
||
{
|
||
name: '董事',
|
||
itemStyle: {
|
||
color: '#ff7d18',
|
||
},
|
||
},
|
||
],
|
||
edgeSymbol: ['', 'arrow'],
|
||
edgeLabel: {
|
||
normal: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 20,
|
||
},
|
||
formatter(x) {
|
||
return x.data.name
|
||
},
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
force: {
|
||
repulsion: 2000,
|
||
edgeLength: 120,
|
||
},
|
||
data: [
|
||
{
|
||
name: '操作系统集团',
|
||
},
|
||
{
|
||
name: '浏览器有限公司',
|
||
},
|
||
{
|
||
name: 'HTML科技',
|
||
},
|
||
{
|
||
name: 'JavaScript科技',
|
||
},
|
||
{
|
||
name: 'CSS科技',
|
||
},
|
||
{
|
||
name: 'Chrome',
|
||
},
|
||
{
|
||
name: 'IE',
|
||
},
|
||
{
|
||
name: 'Firefox',
|
||
},
|
||
{
|
||
name: 'Safari',
|
||
},
|
||
],
|
||
links: [
|
||
{
|
||
source: '浏览器有限公司',
|
||
target: '操作系统集团',
|
||
name: '参股',
|
||
},
|
||
{
|
||
source: 'HTML科技',
|
||
target: '浏览器有限公司',
|
||
name: '参股',
|
||
},
|
||
{
|
||
source: 'CSS科技',
|
||
target: '浏览器有限公司',
|
||
name: '参股',
|
||
},
|
||
{
|
||
source: 'JavaScript科技',
|
||
target: '浏览器有限公司',
|
||
name: '参股',
|
||
},
|
||
{
|
||
source: 'Chrome',
|
||
target: '浏览器有限公司',
|
||
name: '董事',
|
||
},
|
||
{
|
||
source: 'IE',
|
||
target: '浏览器有限公司',
|
||
name: '董事',
|
||
},
|
||
{
|
||
source: 'Firefox',
|
||
target: '浏览器有限公司',
|
||
name: '董事',
|
||
},
|
||
{
|
||
source: 'Safari',
|
||
target: '浏览器有限公司',
|
||
name: '董事',
|
||
},
|
||
{
|
||
source: 'Chrome',
|
||
target: 'JavaScript科技',
|
||
name: '法人',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
//中国地图
|
||
zgdt: {
|
||
title: {
|
||
text: '2099年全国GDP分布',
|
||
subtext: '数据来自vue-admin-beautiful杜撰',
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
dataRange: {
|
||
orient: 'horizontal',
|
||
min: 0,
|
||
max: 55000,
|
||
text: ['高', '低'],
|
||
splitNumber: 0,
|
||
},
|
||
series: [
|
||
{
|
||
name: '2099年全国GDP分布',
|
||
type: 'map',
|
||
roam: false,
|
||
mapType: 'china',
|
||
mapLocation: {
|
||
x: 'center',
|
||
},
|
||
selectedMode: 'multiple',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
},
|
||
data: [
|
||
{ name: '西藏', value: 605.83 },
|
||
{ name: '青海', value: 1670.44 },
|
||
{ name: '宁夏', value: 2102.21 },
|
||
{ name: '海南', value: 2522.66 },
|
||
{ name: '甘肃', value: 5020.37 },
|
||
{ name: '贵州', value: 5701.84 },
|
||
{ name: '新疆', value: 6610.05 },
|
||
{ name: '云南', value: 8893.12 },
|
||
{ name: '重庆', value: 10011.37 },
|
||
{ name: '吉林', value: 10568.83 },
|
||
{ name: '山西', value: 11237.55 },
|
||
{ name: '天津', value: 11307.28 },
|
||
{ name: '江西', value: 11702.82 },
|
||
{ name: '广西', value: 11720.87 },
|
||
{ name: '陕西', value: 12512.3 },
|
||
{ name: '黑龙江', value: 12582 },
|
||
{ name: '内蒙古', value: 14359.88 },
|
||
{ name: '安徽', value: 15300.65 },
|
||
{ name: '北京', value: 16251.93 },
|
||
{ name: '福建', value: 17560.18 },
|
||
{ name: '上海', value: 19195.69 },
|
||
{ name: '湖北', value: 19632.26 },
|
||
{ name: '湖南', value: 19669.56 },
|
||
{ name: '四川', value: 21026.68 },
|
||
{ name: '辽宁', value: 22226.7 },
|
||
{ name: '河北', value: 24515.76 },
|
||
{ name: '河南', value: 26931.03 },
|
||
{ name: '浙江', value: 32318.85 },
|
||
{ name: '山东', value: 45361.85, selected: true },
|
||
{ name: '江苏', value: 49110.27 },
|
||
{ name: '广东', value: 53210.28 },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
//世界地图
|
||
sjdt: {
|
||
title: {
|
||
text: '2099年世界GDP（亿元）',
|
||
subtext: '数据来自vue-admin-beautiful杜撰',
|
||
},
|
||
dataRange: {
|
||
orient: 'horizontal',
|
||
min: 0,
|
||
max: 55000,
|
||
text: ['高', '低'],
|
||
splitNumber: 0,
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}',
|
||
},
|
||
series: [
|
||
{
|
||
name: '2099年世界GDP（亿元）',
|
||
type: 'map',
|
||
mapType: 'world',
|
||
selectedMode: 'multiple',
|
||
roam: false,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
},
|
||
},
|
||
data: [{ name: 'China', value: 99999, selected: true }],
|
||
},
|
||
],
|
||
},
|
||
}
|
||
},
|
||
mounted() {},
|
||
methods: {},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.echarts {
|
||
width: 100%;
|
||
}
|
||
</style>
|