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