|
|
@@ -1,96 +1,423 @@
|
|
|
<template>
|
|
|
- <div :class="className" :style="{ height: height, width: width }">
|
|
|
- <!-- <div ref="chart" :style="{ height: height, width: width }"></div> -->
|
|
|
+<!-- 首页 - littlegreen -->
|
|
|
+ <div :class="className" :style="{ height: '100%', width: width }">
|
|
|
+ <el-row
|
|
|
+ :gutter="20"
|
|
|
+ class="i-row"
|
|
|
+ style="margin-left: 0px; margin-right: 0px"
|
|
|
+ >
|
|
|
+ <el-col>
|
|
|
+ <el-card>
|
|
|
+ <div class="i-gq">
|
|
|
+ <h3 class="i-title">政府与企业总投入</h3>
|
|
|
+ <el-dropdown >
|
|
|
+ <span class="el-dropdown-link" style="color: black;font-size: 16px;font-weight: bold;">
|
|
|
+ {{ selectYear }}
|
|
|
+ <i class="el-icon-arrow-down el-icon--right" style="font-size: 16px;font-weight: bold;"></i>
|
|
|
+ <!-- <i class="el-icon-sort el-icon--right" style="font-size: 16px;font-weight: bold;transform:rotate(90deg)"></i> -->
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item v-for="(data, i) in yearDataList" :key="i" @click.native="handleDrop(data)">
|
|
|
+ {{data.name}}
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div>
|
|
|
+ <p class="i-name">土地/亩</p>
|
|
|
+ <p class="i-number">500</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6"
|
|
|
+ ><div>
|
|
|
+ <p class="i-name">电力/万千瓦时</p>
|
|
|
+ <p class="i-number">4185</p>
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="6"
|
|
|
+ ><div>
|
|
|
+ <p class="i-name">天然气/立方米</p>
|
|
|
+ <p class="i-number">33284</p>
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="6">
|
|
|
+ <div>
|
|
|
+ <p class="i-name">研发经费/万元</p>
|
|
|
+ <p class="i-number">14299</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row
|
|
|
+ :gutter="20"
|
|
|
+ class="i-row"
|
|
|
+ style="margin-left: 0px; margin-right: 0px"
|
|
|
+ >
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-card>
|
|
|
+ <h3 class="i-title">行业分类企业数量</h3>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div
|
|
|
+ ref="piechart"
|
|
|
+ :style="{ height: height, width: width }"
|
|
|
+ ></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" style="height: 100%">
|
|
|
+ <el-card>
|
|
|
+ <h3 class="i-title">产出总效益</h3>
|
|
|
+ <el-row
|
|
|
+ :style="{ height: height, width: width }"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-col :span="24"
|
|
|
+ ><div class="i-out-box">
|
|
|
+ <p class="i-name">工业总产值/万元</p>
|
|
|
+ <p class="i-number">54252622</p>
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="24"
|
|
|
+ ><div class="i-out-box">
|
|
|
+ <p class="i-name">应税收入/万元</p>
|
|
|
+ <p class="i-number">41857</p>
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="24"
|
|
|
+ ><div class="i-out-box">
|
|
|
+ <p class="i-name">实缴税金/万元</p>
|
|
|
+ <p class="i-number">33651</p>
|
|
|
+ </div></el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row
|
|
|
+ class="i-row"
|
|
|
+ :gutter="20"
|
|
|
+ style="margin-left: 0px; margin-right: 0px"
|
|
|
+ >
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-card>
|
|
|
+ <h3 class="i-title">行业分类企业数量</h3>
|
|
|
+ <div ref="chart" :style="{ height: height, width: width }"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import * as echarts from 'echarts';
|
|
|
-
|
|
|
+import * as echarts from "echarts";
|
|
|
+import resize from "./dashboard/mixins/resize";
|
|
|
export default {
|
|
|
+ mixins: [resize],
|
|
|
props: {
|
|
|
className: {
|
|
|
type: String,
|
|
|
- default: 'chart'
|
|
|
+ default: "chart",
|
|
|
},
|
|
|
width: {
|
|
|
type: String,
|
|
|
- default: '100%'
|
|
|
+ default: "100%",
|
|
|
},
|
|
|
height: {
|
|
|
type: String,
|
|
|
- default: '400px'
|
|
|
- }
|
|
|
+ default: "300px",
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
chart: null,
|
|
|
+ piechart: null,
|
|
|
+ yearDataList:[
|
|
|
+ {
|
|
|
+ name: "总和"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "2023"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "2024"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ selectYear: "总和"
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initChart();
|
|
|
+ this.initPieChart();
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
if (this.chart) {
|
|
|
this.chart.dispose();
|
|
|
}
|
|
|
+ if (this.piechart) {
|
|
|
+ this.piechart.dispose();
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 初始化柱状图
|
|
|
initChart() {
|
|
|
if (this.chart) {
|
|
|
this.chart.dispose();
|
|
|
}
|
|
|
this.chart = echarts.init(this.$refs.chart);
|
|
|
+ // 饼图
|
|
|
+ //
|
|
|
+ this.chart.setOption(
|
|
|
+ {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ left: 0,
|
|
|
+ start: 80,
|
|
|
+ end: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ yAxisIndex: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ top: "2%",
|
|
|
+ left: "4%",
|
|
|
+ right: "2%",
|
|
|
+ bottom: "2%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ // inverse: true,
|
|
|
+ data: [
|
|
|
+ "文教、工美、体育和娱乐用品制造业",
|
|
|
+ "文教、工美、体育和娱乐用品制造12",
|
|
|
+ "文教、工美、体育和娱乐用品制造业67",
|
|
|
+ "文教、工美、体育和娱乐用品制造业89",
|
|
|
+ "文教、工美、体育和娱乐用品制造业90",
|
|
|
+ "文教、工美、体育和娱乐用品制造业23",
|
|
|
+ "文教、工美、体育和娱乐用品制造业21",
|
|
|
+ "文教、工美、体育和娱乐用品制造业22",
|
|
|
+ "文教、工美、体育和娱乐用品制造业334",
|
|
|
+ "文教、工美、体育和娱乐用品制造业77",
|
|
|
+ "文教、工美、体育和娱乐用品制造业78",
|
|
|
+ "文教、工美、体育和娱乐用品制造业79",
|
|
|
+ "文教、工美、体育和娱乐用品制造业71",
|
|
|
+ "文教、工美、体育和娱乐用品制造业72",
|
|
|
+ "文教、工美、体育和娱乐用品制造业73",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // realtimeSort: true,
|
|
|
+ type: "bar",
|
|
|
+ data: [60, 50, 40, 30, 20, 10, 32, 45, 78, 99,33,44,55,66,77],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: "{c}",
|
|
|
+ position: "right",
|
|
|
+ },
|
|
|
+ barWidth: "30%",
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0.8, 0, 0, 0, [
|
|
|
+ { offset: 0, color: "#83bff6" },
|
|
|
+ { offset: 0.5, color: "#188df0" },
|
|
|
+ { offset: 1, color: "#188df0" },
|
|
|
+ ]),
|
|
|
+ barBorderRadius: [0, 50, 50, 0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
|
|
|
- const xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
|
- const yValues1 = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20];
|
|
|
- const yValues2 = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30];
|
|
|
-
|
|
|
- this.chart.setOption({
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['曲线 1', '曲线 2']
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: xValues,
|
|
|
- axisLabel: {
|
|
|
- fontSize: 12
|
|
|
+ // {
|
|
|
+ // title: {
|
|
|
+ // text: 'Referer of a Website',
|
|
|
+ // subtext: 'Fake Data',
|
|
|
+ // left: 'center'
|
|
|
+ // },
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: "item",
|
|
|
+ // },
|
|
|
+ // legend: {
|
|
|
+ // type: "scroll",
|
|
|
+ // scrollDataIndex: 0,
|
|
|
+ // orient: "vertical",
|
|
|
+ // left: 10,
|
|
|
+ // itemGap: 20,
|
|
|
+ // top: "middle",
|
|
|
+ // align: "left",
|
|
|
+ // icon: "circle",
|
|
|
+ // formatter: (name) => {
|
|
|
+ // if (!name) return "";
|
|
|
+ // return this.getEqualNewlineString(name, 10); // 根据你的需求修改参数
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // series: [
|
|
|
+ // {
|
|
|
+ // radius: ['20%', '100%'],
|
|
|
+ // center: ['65%', '50%'],
|
|
|
+ // avoidLabelOverlap: false,
|
|
|
+ // type: "pie",
|
|
|
+ // radius: "50%",
|
|
|
+ // data: [
|
|
|
+ // { value: 1048, name: "文教、工美、体育和娱乐用品制造业" },
|
|
|
+ // { value: 735, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
|
|
|
+ // { value: 580, name: "电气机械和器材制造业" },
|
|
|
+ // { value: 484, name: "印刷和记录媒介复制业" },
|
|
|
+ // { value: 300, name: "电气机械和器材制造业" },
|
|
|
+ // { value: 300, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
|
|
|
+ // { value: 300, name: "金属制品业" },
|
|
|
+ // { value: 300, name: "农副食品加工业" },
|
|
|
+ // { value: 300, name: "酒、饮料和精制茶制造业" },
|
|
|
+ // { value: 300, name: "造纸和纸制品业" },
|
|
|
+ // ],
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // labelLine: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //params 要处理的字符串
|
|
|
+ //length 每行显示长度
|
|
|
+ getEqualNewlineString(params, length) {
|
|
|
+ let text = "";
|
|
|
+ let count = Math.ceil(params.length / length); // 向上取整数
|
|
|
+ // 一行展示length个
|
|
|
+ if (count > 1) {
|
|
|
+ for (let z = 1; z <= count; z++) {
|
|
|
+ text += params.substr((z - 1) * length, length);
|
|
|
+ if (z < count) {
|
|
|
+ text += "\n";
|
|
|
}
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ text += params.substr(0, length);
|
|
|
+ }
|
|
|
+ return text;
|
|
|
+ },
|
|
|
+ // 初始化饼图
|
|
|
+ initPieChart() {
|
|
|
+ if (this.piechart) {
|
|
|
+ this.piechart.dispose();
|
|
|
+ }
|
|
|
+ this.piechart = echarts.init(this.$refs.piechart);
|
|
|
+ this.piechart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: '曲线 1',
|
|
|
- type: 'line',
|
|
|
- data: xValues.map((x, index) => [x, yValues1[index]]),
|
|
|
- color: '#4CAF50'
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "75%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 5,
|
|
|
+ borderColor: "#fff",
|
|
|
+ borderWidth: 2,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ // emphasis: {
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // fontSize: 40,
|
|
|
+ // fontWeight: "bold",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: "文教、工美、体育和娱乐用品制造业" },
|
|
|
+ { value: 735, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
|
|
|
+ { value: 580, name: "电气机械和器材制造业" },
|
|
|
+ { value: 484, name: "印刷和记录媒介复制业" },
|
|
|
+ { value: 300, name: "电气机械和器材制造业" },
|
|
|
+ { value: 300, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
|
|
|
+ { value: 300, name: "金属制品业" },
|
|
|
+ { value: 300, name: "农副食品加工业" },
|
|
|
+ { value: 300, name: "酒、饮料和精制茶制造业" },
|
|
|
+ { value: 300, name: "其他" },
|
|
|
+ ],
|
|
|
},
|
|
|
- {
|
|
|
- name: '曲线 2',
|
|
|
- type: 'line',
|
|
|
- data: xValues.map((x, index) => [x, yValues2[index]]),
|
|
|
- color: '#FF5722'
|
|
|
- }
|
|
|
- ]
|
|
|
+ ],
|
|
|
});
|
|
|
+ },
|
|
|
+ // 切换年份
|
|
|
+ handleDrop(e){
|
|
|
+ this.selectYear = e?.name
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.i-gq {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.i-row {
|
|
|
+ margin: 15px 0;
|
|
|
+ .i-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 10px 0 25px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .i-number {
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+ .i-name {
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .i-out-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0;
|
|
|
+ .i-name {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
littleblue55