|
|
@@ -1,341 +1,163 @@
|
|
|
<template>
|
|
|
- <div class="wpjg">
|
|
|
- <div class="box">
|
|
|
- <div id="wpjp_echart">
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div class="wpjg">
|
|
|
+ <div class="box">
|
|
|
+ <div class="title">卫片监管</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="item">
|
|
|
+ <span class="dlabel">图斑变化数量：</span>
|
|
|
+ <span class="dvalue">{{ sdata.value || 0 }}个</span>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <span class="dlabel"> 图斑变化面积：</span>
|
|
|
+ <span class="dvalue">{{ sdata.value || 0 }}公顷</span>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <sankey id="wpjp_echart" ref="echartRef"></sankey>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import sankey from "../../components/echartsTemplate/sankey.vue";
|
|
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
-
|
|
|
+let lcolors = ["#1677CA", "#5BB57A", "#B1651F"];
|
|
|
+let rcolors = [
|
|
|
+ "#62ADED",
|
|
|
+ "#F26094",
|
|
|
+ "#FCED66",
|
|
|
+ "#75FF93",
|
|
|
+ "#E375FF",
|
|
|
+ "#62ECEC",
|
|
|
+ "#FF7F48",
|
|
|
+ "#1E803A",
|
|
|
+ "#D4E0FF",
|
|
|
+];
|
|
|
export default {
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- //监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- //监控data中的数据变化
|
|
|
- watch: {},
|
|
|
-
|
|
|
- beforeCreate() { }, //生命周期 - 创建之前
|
|
|
- created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- beforeMount() { }, //生命周期 - 挂载之前
|
|
|
- methods: {
|
|
|
- getRenKou() {
|
|
|
- var dom = document.getElementById('wpjp_echart');
|
|
|
- var myChart = window.echarts.init(dom);
|
|
|
-
|
|
|
- let data = [
|
|
|
- { name: '疑似新增建设', value: 30 },
|
|
|
- { name: '耕地变化', value: 40 },
|
|
|
- { name: '建设和设施农用地变化', value: 50 },
|
|
|
- { name: '非耕农用地变化', value: 24 },
|
|
|
- { name: '耕地变化', value: 24 },
|
|
|
- { name: '新增围填海', value: 24 },
|
|
|
- ]
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- for (var j = i + 1; j < data.length; j++) {
|
|
|
- //如果第一个比第二个大，就交换他们两个位置
|
|
|
- if (data[i].value < data[j].value) {
|
|
|
- var temp = data[i];
|
|
|
- data[i] = data[j];
|
|
|
- data[j] = temp;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- let pm = []
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- let k = i + 1
|
|
|
- pm.push('NO.' + k)
|
|
|
- }
|
|
|
- data.forEach(function (value, index, obj) {
|
|
|
- value.pm = pm[index]
|
|
|
- })
|
|
|
- const colors = ['rgb(96,149,239)', 'rgb(239,157,147)', 'rgb(232,191,72)', 'rgb(189,147,227)']
|
|
|
- const chartData = data.map((item, index) => ({
|
|
|
- value: item.value,
|
|
|
- name: item.name,
|
|
|
- pm: item.pm,
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 20,
|
|
|
- shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
|
|
|
- shadowOffsetx: 25,
|
|
|
- shadowOffsety: 20,
|
|
|
- color: colors[index % colors.length],
|
|
|
- },
|
|
|
- }))
|
|
|
- const sum = chartData.reduce((per, cur) => per + cur.value, 0)
|
|
|
- const gap = (1 * sum) / 100
|
|
|
- const pieData1 = []
|
|
|
- const gapData = {
|
|
|
- name: '',
|
|
|
- value: gap,
|
|
|
- itemStyle: {
|
|
|
- color: 'transparent',
|
|
|
- },
|
|
|
- }
|
|
|
- let totalRatio = []
|
|
|
- // let totalPercent = 0
|
|
|
- for (let i = 0; i < chartData.length; i++) {
|
|
|
- // 计算占比
|
|
|
- // let ratio = (chartData[i].value / sum).toFixed(2) * 100;
|
|
|
- // 累加占比到总占比中
|
|
|
- // totalRatio.push(ratio*100)
|
|
|
- let ratio = (chartData[i].value / sum) * 100
|
|
|
- let percent = Math.round(ratio)
|
|
|
- totalRatio.push(percent)
|
|
|
- // totalPercent += percent
|
|
|
- // 第一圈数据
|
|
|
- pieData1.push({
|
|
|
- ...chartData[i],
|
|
|
- })
|
|
|
- pieData1.push(gapData)
|
|
|
- }
|
|
|
- // 补充最后一项占比百分比保证之和为100%
|
|
|
- // totalRatio[0].value += 100 - totalPercent
|
|
|
- let option = {
|
|
|
- backgroundColor: 'rgba(1,1,1,0)',
|
|
|
- title: {
|
|
|
- show: true,
|
|
|
- // text: sum
|
|
|
- text: '变化类型',
|
|
|
- x: '49%',
|
|
|
- y: '32%',
|
|
|
- itemGap: 6,
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 11,
|
|
|
- fontWeight: '400',
|
|
|
- lineHeight: 8,
|
|
|
- },
|
|
|
- subtextStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 8,
|
|
|
- fontWeight: '400',
|
|
|
- lineHeight: 8,
|
|
|
- },
|
|
|
- textAlign: 'center',
|
|
|
- },
|
|
|
-
|
|
|
- // 图例
|
|
|
- legend: {
|
|
|
- show: true,
|
|
|
- orient: 'vertical',
|
|
|
- icon: 'rect',
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 10,
|
|
|
- },
|
|
|
- top: '5%',
|
|
|
- left: '70%',
|
|
|
- itemGap: 14,
|
|
|
- itemHeight: 14,
|
|
|
- itemWidth: 14,
|
|
|
- data: chartData,
|
|
|
- formatter: function (name) {
|
|
|
- const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
|
|
|
- // if (selectedItem) {
|
|
|
- // const { value } = selectedItem;
|
|
|
- // const { pm } = selectedItem;
|
|
|
- // const p = ((value / sum) * 100).toFixed(2);
|
|
|
- // const area = `${value}m²`;
|
|
|
-
|
|
|
- // return `{icon|${pm}} {name|${name}} {percent|${p}%} {area|${area}} `;
|
|
|
- // } else {
|
|
|
- // console.log(name);
|
|
|
-
|
|
|
- // return name;
|
|
|
- // }
|
|
|
-
|
|
|
- if (selectedItem) {
|
|
|
-
|
|
|
- return name + selectedItem.value + "个";
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- // 中间圆环
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- roundCap: true,
|
|
|
- radius: ['36%', '52%'],
|
|
|
- center: ['50%', '35%'],
|
|
|
- data: pieData1,
|
|
|
- labelLine: {
|
|
|
- length: 8,
|
|
|
- length2: 16,
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- },
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- fontFamily: 'ysbth',
|
|
|
- position: 'outside',
|
|
|
- padding: [0, -4, 0, -4],
|
|
|
- formatter(params) {
|
|
|
- if (params.name === '') {
|
|
|
- return ''
|
|
|
- }
|
|
|
- return `${params.percent.toFixed(0)}% `
|
|
|
- },
|
|
|
- color: '#fff',
|
|
|
- fontSize: '14px',
|
|
|
- lineHeight: 10,
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- // 鼠标移入时显示
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- // 最里面圆环
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- radius: ['28%', '30%'],
|
|
|
- center: ['50%', '35%'],
|
|
|
- animation: false,
|
|
|
- hoverAnimation: false,
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 100,
|
|
|
- },
|
|
|
- ],
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: '#3BC5EF',
|
|
|
- },
|
|
|
- },
|
|
|
- // 最里面圆环内的背景圆
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- startAngle: 90,
|
|
|
- radius: '28%',
|
|
|
- animation: false,
|
|
|
- hoverAnimation: false,
|
|
|
- center: ['50%', '35%'],
|
|
|
- itemStyle: {
|
|
|
- labelLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- color: {
|
|
|
- type: 'radial',
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(50,171,241, 0)',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(50,171,241, .4)',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(55,70,130, 0)',
|
|
|
- },
|
|
|
- ],
|
|
|
- global: false, // 缺省为 false
|
|
|
- },
|
|
|
- shadowBlur: 60,
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 100,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- // 最外面的圆环
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
|
|
|
- radius: ['53%', '54%'],
|
|
|
- center: ['50%', '35%'],
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- select: {
|
|
|
- display: false,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: totalRatio,
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
-
|
|
|
- myChart.setOption(option);
|
|
|
- },
|
|
|
+ components: { sankey },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sdata: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getComputedStyle() {
|
|
|
+ let data = [
|
|
|
+ { name: "农用地", itemStyle: { color: lcolors[0] } },
|
|
|
+ { name: "林地", itemStyle: { color: lcolors[1] } },
|
|
|
+ { name: "耕地", itemStyle: { color: lcolors[2] } },
|
|
|
+ { name: "a1" },
|
|
|
+ { name: "a2" },
|
|
|
+ { name: "b1" },
|
|
|
+ { name: "c" },
|
|
|
+ ];
|
|
|
+ let l = [
|
|
|
+ { source: "农用地", target: "a1", value: 5 },
|
|
|
+ { source: "农用地", target: "a2", value: 3 },
|
|
|
+ { source: "林地", target: "b1", value: 8 },
|
|
|
+ { source: "农用地", target: "b1", value: 3 },
|
|
|
+ { source: "林地", target: "a1", value: 1 },
|
|
|
+ { source: "林地", target: "c", value: 2 },
|
|
|
+ { source: "耕地", target: "c", value: 2 },
|
|
|
+ ];
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.echartRef.setOptions(data, l);
|
|
|
+ });
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getRenKou();
|
|
|
- },
|
|
|
- beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
- updated() { }, //生命周期 - 更新之后
|
|
|
- beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
- destroy() { },//生命周期 - 销毁完成
|
|
|
- activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
- deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getComputedStyle();
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.wpjg {
|
|
|
-
|
|
|
+ border-width: 0px;
|
|
|
+ position: absolute;
|
|
|
+ left: 1366px;
|
|
|
+ top: 68%;
|
|
|
+ width: 534px;
|
|
|
+ height: 260px;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ font-family: "Arial Normal", "Arial";
|
|
|
+ font-weight: 400;
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 13px;
|
|
|
+ letter-spacing: normal;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: normal;
|
|
|
+ text-transform: none;
|
|
|
border-width: 0px;
|
|
|
position: absolute;
|
|
|
- left: 1366px;
|
|
|
- top: 68%;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: flex;
|
|
|
+ left: 0px;
|
|
|
+ top: 0px;
|
|
|
+ width: 535px;
|
|
|
+ height: 260px;
|
|
|
+ background: inherit;
|
|
|
+ background-color: rgba(3, 25, 67, 0.698039215686274);
|
|
|
+ border: none;
|
|
|
+ border-radius: 0px;
|
|
|
+ box-shadow: none;
|
|
|
+ // background-repeat: no-repeat;
|
|
|
+ // background-size: 100% 47%;
|
|
|
+ // background-image: url("/static/images/cockpitNew/wpjg.png");
|
|
|
+ .title {
|
|
|
+ border-width: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ font-family: "Arial Negreta", "Arial Normal", "Arial";
|
|
|
+ font-weight: 700;
|
|
|
+ font-style: normal;
|
|
|
+ color: #00ffff;
|
|
|
+ padding: 2%;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
|
|
|
- .box {
|
|
|
- font-family: 'Arial Normal', 'Arial';
|
|
|
- font-weight: 400;
|
|
|
- font-style: normal;
|
|
|
- font-size: 13px;
|
|
|
- letter-spacing: normal;
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- line-height: normal;
|
|
|
- text-transform: none;
|
|
|
- border-width: 0px;
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- width: 535px;
|
|
|
- height: 260px;
|
|
|
- background: inherit;
|
|
|
- background-color: rgba(3, 25, 67, 0.698039215686274);
|
|
|
- border: none;
|
|
|
- border-radius: 0px;
|
|
|
- box-shadow: none;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 47%;
|
|
|
- background-image: url("/static/images/cockpitNew/wpjg.png");
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
|
|
|
+ .item {
|
|
|
+ width: 45%;
|
|
|
+ height: 30%;
|
|
|
+ display: inline-block;
|
|
|
+ // border: #00FFFF 1px solid;
|
|
|
+ }
|
|
|
|
|
|
- #wpjp_echart {
|
|
|
- width: 580px;
|
|
|
- height: 230px;
|
|
|
- position: relative;
|
|
|
- left: -28%;
|
|
|
- top: 40%;
|
|
|
- }
|
|
|
+ .dlabel {
|
|
|
+ font-family: HarmonyOS Sans Naskh Arabic UI,
|
|
|
+ HarmonyOS Sans Naskh Arabic UI;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #bcd3e5;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
|
|
|
+ .dvalue {
|
|
|
+ font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #64daff;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
|
|
|
+ #wpjp_echart {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ position: relative;
|
|
|
+ // left: -28%;
|
|
|
+ // top: 40%;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
