<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>