|
|
@@ -0,0 +1,235 @@
|
|
|
+<template>
|
|
|
+ <el-row>
|
|
|
+ <el-row class="movie-list">
|
|
|
+ <el-col :md="12" class="movie-list">
|
|
|
+ <el-card>
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>饼图</span>
|
|
|
+ </div>
|
|
|
+ <div id="chart2" style="height:400px;" />
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="12" class="movie-list">
|
|
|
+ <el-card>
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>金字塔图</span>
|
|
|
+ </div>
|
|
|
+ <div id="chart3" style="height:400px;" />
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'Dashboard',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initChart2()
|
|
|
+ this.initChart3()
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initChart2() {
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '5%',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ padAngle: 5,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 10
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 40,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: 'Search Engine' },
|
|
|
+ { value: 735, name: 'Direct' },
|
|
|
+ { value: 580, name: 'Email' },
|
|
|
+ { value: 484, name: 'Union Ads' },
|
|
|
+ { value: 300, name: 'Video Ads' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ const myChart = this.$echarts.init(document.getElementById('chart2'))
|
|
|
+ myChart.setOption(option, true)
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ if (myChart) {
|
|
|
+ myChart.resize()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChart3() {
|
|
|
+ var maleData = [
|
|
|
+ 14, 4, 10, 66,
|
|
|
+ 54, 98, 116, 144,
|
|
|
+ 210, 358, 484, 562,
|
|
|
+ 706, 671, 566, 345,
|
|
|
+ 200, 92, 24, 12,
|
|
|
+ 0.0
|
|
|
+ ]
|
|
|
+
|
|
|
+ var femaleData = [
|
|
|
+ 0, 0, 0, 15, 19,
|
|
|
+ 29, 30, 25, 27, 34,
|
|
|
+ 36, 48, 36, 56, 60,
|
|
|
+ 48, 36, 12, 8, 0,
|
|
|
+ 0.0
|
|
|
+ ]
|
|
|
+
|
|
|
+ var maleTotal = maleData.map(function(x) {
|
|
|
+ return Math.abs(x)
|
|
|
+ }).reduce(function(a, b) {
|
|
|
+ return a + b
|
|
|
+ })
|
|
|
+
|
|
|
+ var femaleTotal = femaleData.map(function(x) {
|
|
|
+ return Math.abs(x)
|
|
|
+ }).reduce(function(a, b) {
|
|
|
+ return a + b
|
|
|
+ })
|
|
|
+
|
|
|
+ var malePercentage = maleData.map(function(x) {
|
|
|
+ return -(x / maleTotal * 100)
|
|
|
+ })
|
|
|
+
|
|
|
+ var femalePercentage = femaleData.map(function(x) {
|
|
|
+ return x / femaleTotal * 100
|
|
|
+ })
|
|
|
+
|
|
|
+ const myChart = this.$echarts.init(document.getElementById('chart3'))
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: '唐朝人口金字塔', // 设置标题文本为“唐朝人口金字塔”
|
|
|
+ left: 'center', // 标题水平居中
|
|
|
+ top: '4%', // 标题距离顶部的距离为4%
|
|
|
+ textStyle: {
|
|
|
+ color: '#333', // 标题字体颜色
|
|
|
+ fontSize: 24, // 标题字体大小
|
|
|
+ fontWeight: 'bold', // 标题字体加粗
|
|
|
+ fontFamily: 'KaiTi, serif' // 标题字体样式，楷体或Serif字体
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis', // 提示框触发类型为坐标轴
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow' // 坐标轴指示器类型为阴影
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ return params[0].name + '<br/>' +
|
|
|
+ params[0].seriesName + ': ' + Math.abs(maleData[params[0].dataIndex]) + ' (' + Math.abs(params[0].data).toFixed(2) + '%)' + '<br/>' +
|
|
|
+ params[1].seriesName + ': ' + Math.abs(femaleData[params[0].dataIndex]) + ' (' + Math.abs(params[1].data).toFixed(2) + '%)'
|
|
|
+ // 提示框内容格式化函数，params参数包含了鼠标悬停时的数据
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['男性', '女性'], // 图例数据为“男性”和“女性”
|
|
|
+ align: 'left', // 图例左对齐
|
|
|
+ top: '6%', // 图例距离顶部的距离为6%
|
|
|
+ right: 2 // 图例距离右边的距离为2
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function(value) {
|
|
|
+ // 自定义X轴标签的格式化函数，返回绝对值百分比
|
|
|
+ return Math.abs(value) + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [
|
|
|
+ '0-4', '5-9', '10-14', '15-19',
|
|
|
+ '20-24', '25-29', '30-34', '35-39', '40-44',
|
|
|
+ '45-49', '50-54', '55-59', '60-64', '65-69',
|
|
|
+ '70-74', '75-79', '80-84', '85-89', '90-94',
|
|
|
+ '95-99', '100 + '
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '男性', // 数据系列的名称
|
|
|
+ type: 'bar', // 系列类型为条形图
|
|
|
+ stack: 'total', // 数据堆叠，同一个堆叠组的数据会堆叠显示
|
|
|
+ itemStyle: {
|
|
|
+ // 条形图的颜色渐变设置
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#3d8e86' },
|
|
|
+ { offset: 0.5, color: '#5da39d' },
|
|
|
+ { offset: 1, color: '#88bfb8' }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series' // 强调设置
|
|
|
+ },
|
|
|
+ data: malePercentage // 男性数据百分比
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '女性', // 数据系列的名称
|
|
|
+ type: 'bar', // 系列类型为条形图
|
|
|
+ stack: 'total', // 数据堆叠
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series' // 强调设置
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ // 条形图的颜色渐变设置
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#d2a36c' },
|
|
|
+ { offset: 0.5, color: '#d5c8a0' },
|
|
|
+ { offset: 1, color: '#dfd6b8' }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ data: femalePercentage // 女性数据百分比
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ myChart.setOption(option, true)
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ if (myChart) {
|
|
|
+ myChart.resize()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.movie-list {
|
|
|
+ padding-bottom: 3px;
|
|
|
+ padding-left: 3px;
|
|
|
+ padding-right: 3px;
|
|
|
+}
|
|
|
+</style>
|
