|
|
@@ -8,75 +8,42 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="selectTab left_tab">
|
|
|
- <el-select
|
|
|
- v-model="left_value"
|
|
|
- placeholder="请选择"
|
|
|
- :popper-append-to-body="false"
|
|
|
- @change="changeChartsLeft"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in left_options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
+ <el-select v-model="left_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
|
|
|
+ <el-option v-for="item in left_options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="selectTab right_tab">
|
|
|
- <el-select
|
|
|
- v-model="right_value"
|
|
|
- placeholder="请选择"
|
|
|
- :popper-append-to-body="false"
|
|
|
- @change="changeChartsRight"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in right_options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
+ <el-select v-model="right_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsRight">
|
|
|
+ <el-option v-for="item in right_options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- style="position: absolute"
|
|
|
- v-show="
|
|
|
- left_value == left_options[1].value &&
|
|
|
- right_value == right_options[0].value
|
|
|
- "
|
|
|
- >
|
|
|
+ <div style="position: absolute" v-show="left_value == left_options[1].value &&
|
|
|
+ right_value == right_options[0].value
|
|
|
+ ">
|
|
|
<div class="dial_watch_legend">
|
|
|
<div class="item_tdgy">
|
|
|
<div class="icon_tdgy"></div>
|
|
|
<div class="text">
|
|
|
计划已入市面积
|
|
|
- <span>{{ store.state.cockpit_tdgy.jt_gy.jh }}</span
|
|
|
- >公顷
|
|
|
+ <span>{{ store.state.cockpit_tdgy.jt_gy.jh }}</span>公顷
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item_tdgy">
|
|
|
<div class="icon_tdgy"></div>
|
|
|
<div class="text">
|
|
|
已入市面积
|
|
|
- <span>{{ store.state.cockpit_tdgy.jt_gy.wc }}</span
|
|
|
- >公顷
|
|
|
+ <span>{{ store.state.cockpit_tdgy.jt_gy.wc }}</span>公顷
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="dial_watch"></div>
|
|
|
<div class="content">
|
|
|
<div class="infoLIst" v-if="jiDataInfo.length">
|
|
|
- <div
|
|
|
- class="infoItem"
|
|
|
- v-for="(item, index) in jiDataInfo"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <div
|
|
|
- :class="item.geom != '' ? 'itemIcon' : 'itemIcon2'"
|
|
|
- @click="flyDetails(item)"
|
|
|
- ></div>
|
|
|
+ <div class="infoItem" v-for="(item, index) in jiDataInfo" :key="index">
|
|
|
+ <div :class="item.geom != '' ? 'itemIcon' : 'itemIcon2'" @click="flyDetails(item)"></div>
|
|
|
<div class="itemCon">
|
|
|
<p>{{ item["项目名称"] }}</p>
|
|
|
<p>
|
|
|
@@ -85,50 +52,28 @@
|
|
|
<span>{{ item["出让面积(公顷)"] }}公顷</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
- <div
|
|
|
- :class="
|
|
|
- item['用地类型'] == '已出让' ? 'itemStatus1' : 'itemStatus2'
|
|
|
- "
|
|
|
- ></div>
|
|
|
+ <div :class="item['用地类型'] == '已出让' ? 'itemStatus1' : 'itemStatus2'
|
|
|
+ "></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-show="
|
|
|
- left_value == left_options[0].value &&
|
|
|
- right_value == right_options[0].value
|
|
|
- "
|
|
|
- >
|
|
|
- <DialWatch
|
|
|
- class="tdgy_gyjd"
|
|
|
- :dial_watch_info="dial_watch_info"
|
|
|
- ref="tdgy_gyjd"
|
|
|
- @draw_vector="switch_vector_tdgy_gy_jd"
|
|
|
- />
|
|
|
-
|
|
|
- <pie3d
|
|
|
- id="tdgy_echart_gyjd"
|
|
|
- unit="公顷"
|
|
|
- :legendFlag="true"
|
|
|
- ref="tdgy_echart_gyjd"
|
|
|
- ></pie3d>
|
|
|
+ <div v-show="left_value == left_options[0].value &&
|
|
|
+ right_value == right_options[0].value
|
|
|
+ ">
|
|
|
+ <DialWatch class="tdgy_gyjd" :dial_watch_info="dial_watch_info" ref="tdgy_gyjd"
|
|
|
+ @draw_vector="switch_vector_tdgy_gy_jd" />
|
|
|
+
|
|
|
+ <pie3d id="tdgy_echart_gyjd" unit="公顷" :legendFlag="true" ref="tdgy_echart_gyjd"></pie3d>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-show="
|
|
|
- left_value == left_options[0].value &&
|
|
|
- right_value == right_options[1].value
|
|
|
- "
|
|
|
- >
|
|
|
+ <div v-show="left_value == left_options[0].value &&
|
|
|
+ right_value == right_options[1].value
|
|
|
+ ">
|
|
|
<div id="gy_jg_echart"></div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- style="position: absolute"
|
|
|
- v-show="
|
|
|
- left_value == left_options[1].value &&
|
|
|
- right_value == right_options[1].value
|
|
|
- "
|
|
|
- >
|
|
|
+ <div style="position: absolute" v-show="left_value == left_options[1].value &&
|
|
|
+ right_value == right_options[1].value
|
|
|
+ ">
|
|
|
<div class="legend_jtgy">
|
|
|
<div class="legend_jtgy_left">
|
|
|
商业商服
|
|
|
@@ -141,19 +86,9 @@
|
|
|
完成率 <span class="legend_jtgy_unit">{{ accomplish_gyyd }}%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <pie3d
|
|
|
- id="tdgy_echart_sfyd"
|
|
|
- unit="公顷"
|
|
|
- :legendFlag="true"
|
|
|
- ref="tdgy_echart_sfyd"
|
|
|
- >
|
|
|
+ <pie3d id="tdgy_echart_sfyd" unit="公顷" :legendFlag="true" ref="tdgy_echart_sfyd">
|
|
|
</pie3d>
|
|
|
- <pie3d
|
|
|
- id="tdgy_echart_gyyd"
|
|
|
- unit="公顷"
|
|
|
- :legendFlag="true"
|
|
|
- ref="tdgy_echart_gyyd"
|
|
|
- ></pie3d>
|
|
|
+ <pie3d id="tdgy_echart_gyyd" unit="公顷" :legendFlag="true" ref="tdgy_echart_gyyd"></pie3d>
|
|
|
</div>
|
|
|
<div v-show="left_value == left_options[2].value">
|
|
|
<div class="conten_hy">
|
|
|
@@ -163,8 +98,7 @@
|
|
|
</div>
|
|
|
<div class="text_hy">
|
|
|
<p class="p_hy">完成出让海域</p>
|
|
|
- <span class="span_hy">{{ wccchy }}</span
|
|
|
- >公顷
|
|
|
+ <span class="span_hy">{{ wccchy }}</span>公顷
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
@@ -173,8 +107,7 @@
|
|
|
</div>
|
|
|
<div class="text_hy">
|
|
|
<p class="p_hy">完成出让项目</p>
|
|
|
- <span class="span_hy">{{ wcccxm }}</span
|
|
|
- >个
|
|
|
+ <span class="span_hy">{{ wcccxm }}</span>个
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -291,9 +224,9 @@ export default {
|
|
|
},
|
|
|
|
|
|
//方法集合
|
|
|
- beforeCreate() {}, //生命周期 - 创建之前
|
|
|
- created() {}, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
+ created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
methods: {
|
|
|
flyDetails(item) {
|
|
|
this.drawWktPloygon(item.geom, "#ff0000", item.id);
|
|
|
@@ -521,217 +454,399 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- init_gy_jg_echart() {
|
|
|
+ // init_gy_jg_echart() {
|
|
|
+ // var dom = document.getElementById("gy_jg_echart");
|
|
|
+ // var myChart = window.echarts.init(dom);
|
|
|
+ // // Mock数据
|
|
|
+ // const mockData = {
|
|
|
+ // xdata: store.state.cockpit_tdgy.gy_jg.xdata,
|
|
|
+ // result: store.state.cockpit_tdgy.gy_jg.result,
|
|
|
+ // };
|
|
|
+
|
|
|
+ // // const mockData1 = {
|
|
|
+ // // xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
|
|
|
+ // // result: [
|
|
|
+ // // { name: '计划收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
|
|
|
+ // // { name: '完成收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
|
|
|
+ // // ]
|
|
|
+ // // }
|
|
|
+
|
|
|
+ // const color = [
|
|
|
+ // [
|
|
|
+ // { offset: 0, color: "rgba(183, 117, 12, 0.8)" },
|
|
|
+ // { offset: 0.5, color: "rgba(183, 117, 12, 0.8)" },
|
|
|
+ // { offset: 0.5, color: "rgba(249, 180, 71, 0.8)" },
|
|
|
+ // { offset: 1, color: "rgba(249, 180, 71, 0.8)" },
|
|
|
+ // ],
|
|
|
+
|
|
|
+ // [
|
|
|
+ // { offset: 0, color: "rgba(34, 129, 209, 0.8)" },
|
|
|
+ // { offset: 0.5, color: "rgba(34, 129, 209, 0.8)" },
|
|
|
+ // { offset: 0.5, color: "rgba(97, 173, 237, 0.8)" },
|
|
|
+ // { offset: 1, color: "rgba(97, 173, 237, 0.8)" },
|
|
|
+ // ],
|
|
|
+ // ];
|
|
|
+ // const color2 = ["rgba(34, 129, 209, 0.8)", "rgba(34, 129, 209, 0.8)"];
|
|
|
+
|
|
|
+ // // tooltip
|
|
|
+ // const tooltip = {
|
|
|
+ // trigger: "axis",
|
|
|
+ // textStyle: { fontSize: "100%" },
|
|
|
+ // formatter: (params) => {
|
|
|
+ // let rander = params
|
|
|
+ // .map((item) => `<div>${item.seriesName}: ${item.value}</div>公顷`)
|
|
|
+ // .join("");
|
|
|
+ // return rander;
|
|
|
+ // },
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const legend = {
|
|
|
+ // data: ["计划收储", "完成收储"], //图例名称
|
|
|
+
|
|
|
+ // textStyle: { fontSize: 12, color: "#fff" },
|
|
|
+ // itemWidth: 24,
|
|
|
+ // itemHeight: 15,
|
|
|
+ // itemGap: 15,
|
|
|
+ // top: "0%",
|
|
|
+ // right: "2%",
|
|
|
+ // selectedMode: false,
|
|
|
+ // };
|
|
|
+ // const grid = { top: "20%", left: "12%", right: "2%", bottom: "10%" };
|
|
|
+ // // xAxis
|
|
|
+ // const xAxis = {
|
|
|
+ // axisTick: { show: false },
|
|
|
+ // axisLine: { lineStyle: { color: "#BCD3E5" } },
|
|
|
+ // axisLabel: {
|
|
|
+ // textStyle: { fontSize: 12, color: "#BCD3E5" },
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // interval: 0,
|
|
|
+ // formatter: function (value) {
|
|
|
+ // // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
+ // if (value.length > 4) {
|
|
|
+ // return `${value.slice(0, 4)}...`;
|
|
|
+ // } else {
|
|
|
+ // return value;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // data: mockData.xdata,
|
|
|
+ // };
|
|
|
+
|
|
|
+ // // yAxis
|
|
|
+ // const yAxis = [
|
|
|
+ // {
|
|
|
+ // min: 0,
|
|
|
+ // name: "公顷",
|
|
|
+ // type: "value",
|
|
|
+ // axisLine: {
|
|
|
+ // show: false,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: "#BCD3E5",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // show: true,
|
|
|
+ // lineStyle: {
|
|
|
+ // type: "dashed",
|
|
|
+ // color: "rgba(255,255,255,0.1)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // show: true,
|
|
|
+ // fontSize: 12,
|
|
|
+ // },
|
|
|
+ // boundaryGap: ["20%", "20%"],
|
|
|
+ // },
|
|
|
+ // ];
|
|
|
+ // // const yAxis = [{
|
|
|
+ // // axisTick: { show: false },
|
|
|
+ // // axisLine: { show: false },
|
|
|
+ // // splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
|
|
|
+ // // axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
|
|
|
+ // // }, {
|
|
|
+ // // show: false,
|
|
|
+ // // splitLine: { show: false },
|
|
|
+ // // axisLine: { show: false },
|
|
|
+ // // axisTick: { show: false },
|
|
|
+ // // }]
|
|
|
+ // const diamondData = mockData.result.reduce((pre, cur, index) => {
|
|
|
+ // pre[index] = cur.data.map(
|
|
|
+ // (el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0)
|
|
|
+ // );
|
|
|
+ // return pre;
|
|
|
+ // }, []);
|
|
|
+
|
|
|
+ // let series = mockData.result.reduce((p, c, i, array) => {
|
|
|
+ // p.push(
|
|
|
+ // {
|
|
|
+ // z: i + 1,
|
|
|
+ // stack: "总量",
|
|
|
+ // type: "bar",
|
|
|
+ // name: c.name,
|
|
|
+ // barGap: 18,
|
|
|
+ // barWidth: 18,
|
|
|
+ // data: c.data,
|
|
|
+ // itemStyle: {
|
|
|
+ // color: {
|
|
|
+ // type: "linear",
|
|
|
+ // x: 0,
|
|
|
+ // x2: 1,
|
|
|
+ // y: 0,
|
|
|
+ // y2: 0,
|
|
|
+ // colorStops: color[i],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // z: i + 10,
|
|
|
+ // type: "pictorialBar",
|
|
|
+ // symbolPosition: "end",
|
|
|
+ // symbol: "diamond",
|
|
|
+ // symbolOffset: [0, "-50%"],
|
|
|
+ // symbolSize: [18, 12],
|
|
|
+ // data: diamondData[i],
|
|
|
+ // itemStyle: { color: color2[i] },
|
|
|
+ // tooltip: { show: false },
|
|
|
+ // }
|
|
|
+ // );
|
|
|
+
|
|
|
+ // // 是否最后一个了？
|
|
|
+ // if (p.length === array.length * 2) {
|
|
|
+ // p.push({
|
|
|
+ // z: array.length * 2,
|
|
|
+ // type: "pictorialBar",
|
|
|
+ // symbolPosition: "start",
|
|
|
+ // data: mockData.result[0].data,
|
|
|
+ // symbol: "diamond",
|
|
|
+ // symbolOffset: ["0%", "50%"],
|
|
|
+ // symbolSize: [18, 10],
|
|
|
+ // itemStyle: {
|
|
|
+ // color: {
|
|
|
+ // type: "linear",
|
|
|
+ // x: 0,
|
|
|
+ // x2: 1,
|
|
|
+ // y: 0,
|
|
|
+ // y2: 0,
|
|
|
+ // colorStops: color[0],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // tooltip: { show: false },
|
|
|
+ // });
|
|
|
+ // return p;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // return p;
|
|
|
+ // }, []);
|
|
|
+
|
|
|
+ // const dataZoom = [
|
|
|
+ // {
|
|
|
+ // show: false,
|
|
|
+ // type: "slider",
|
|
|
+ // startValue: 0,
|
|
|
+ // endValue: 7,
|
|
|
+ // moveOnMouseWheel: true,
|
|
|
+ // moveOnMouseMove: true,
|
|
|
+ // zoomOnMouseWheel: false,
|
|
|
+ // },
|
|
|
+ // ];
|
|
|
+
|
|
|
+ // let option = {
|
|
|
+ // tooltip,
|
|
|
+ // legend,
|
|
|
+ // xAxis,
|
|
|
+ // yAxis,
|
|
|
+ // series,
|
|
|
+ // grid,
|
|
|
+ // dataZoom,
|
|
|
+ // backgroundColor: "rgba(0, 0, 0, 0)",
|
|
|
+ // };
|
|
|
+
|
|
|
+ // myChart.setOption(option);
|
|
|
+ // },
|
|
|
+ init_gy_jg_echart(xdata, result) {
|
|
|
var dom = document.getElementById("gy_jg_echart");
|
|
|
var myChart = window.echarts.init(dom);
|
|
|
- // Mock数据
|
|
|
- const mockData = {
|
|
|
- xdata: store.state.cockpit_tdgy.gy_jg.xdata,
|
|
|
- result: store.state.cockpit_tdgy.gy_jg.result,
|
|
|
- };
|
|
|
-
|
|
|
- // const mockData1 = {
|
|
|
- // xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
|
|
|
- // result: [
|
|
|
- // { name: '计划收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
|
|
|
- // { name: '完成收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
|
|
|
- // ]
|
|
|
- // }
|
|
|
|
|
|
- const color = [
|
|
|
- [
|
|
|
- { offset: 0, color: "rgba(183, 117, 12, 0.8)" },
|
|
|
- { offset: 0.5, color: "rgba(183, 117, 12, 0.8)" },
|
|
|
- { offset: 0.5, color: "rgba(249, 180, 71, 0.8)" },
|
|
|
- { offset: 1, color: "rgba(249, 180, 71, 0.8)" },
|
|
|
- ],
|
|
|
-
|
|
|
- [
|
|
|
- { offset: 0, color: "rgba(34, 129, 209, 0.8)" },
|
|
|
- { offset: 0.5, color: "rgba(34, 129, 209, 0.8)" },
|
|
|
- { offset: 0.5, color: "rgba(97, 173, 237, 0.8)" },
|
|
|
- { offset: 1, color: "rgba(97, 173, 237, 0.8)" },
|
|
|
- ],
|
|
|
- ];
|
|
|
- const color2 = ["rgba(34, 129, 209, 0.8)", "rgba(34, 129, 209, 0.8)"];
|
|
|
-
|
|
|
- // tooltip
|
|
|
- const tooltip = {
|
|
|
- trigger: "axis",
|
|
|
- textStyle: { fontSize: "100%" },
|
|
|
- formatter: (params) => {
|
|
|
- let rander = params
|
|
|
- .map((item) => `<div>${item.seriesName}: ${item.value}</div>公顷`)
|
|
|
- .join("");
|
|
|
- return rander;
|
|
|
+ var option = {
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: 'RGBA(20, 106, 178, 0.4)',
|
|
|
+ trigger: "axis",
|
|
|
+ textStyle: { fontSize: '100%' },
|
|
|
+ formatter: params => {
|
|
|
+ console.log('params: ', params);
|
|
|
+ let rander = params.map(item =>
|
|
|
+ `
|
|
|
+
|
|
|
+ <div style='
|
|
|
+ border:none;
|
|
|
+ border-radius:3px;
|
|
|
+ color:#FFF;
|
|
|
+ font-size:12px
|
|
|
+ '>
|
|
|
+ ${item.seriesName}: ${item.value}
|
|
|
+ </div>`).join('')
|
|
|
+ return rander
|
|
|
+ }
|
|
|
},
|
|
|
- };
|
|
|
-
|
|
|
- const legend = {
|
|
|
- data: ["计划收储", "完成收储"], //图例名称
|
|
|
-
|
|
|
- textStyle: { fontSize: 12, color: "#fff" },
|
|
|
- itemWidth: 24,
|
|
|
- itemHeight: 15,
|
|
|
- itemGap: 15,
|
|
|
- top: "0%",
|
|
|
- right: "2%",
|
|
|
- selectedMode: false,
|
|
|
- };
|
|
|
- const grid = { top: "20%", left: "12%", right: "2%", bottom: "10%" };
|
|
|
- // xAxis
|
|
|
- const xAxis = {
|
|
|
- axisTick: { show: false },
|
|
|
- axisLine: { lineStyle: { color: "#BCD3E5" } },
|
|
|
- axisLabel: {
|
|
|
- textStyle: { fontSize: 12, color: "#BCD3E5" },
|
|
|
+ grid: {
|
|
|
+ left: '2%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '15%',
|
|
|
+ top: '20%',
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- formatter: function (value) {
|
|
|
- // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
- if (value.length > 4) {
|
|
|
- return `${value.slice(0, 4)}...`;
|
|
|
- } else {
|
|
|
- return value;
|
|
|
- }
|
|
|
+ legend: {
|
|
|
+ data: ['完成收储', '计划收储'],
|
|
|
+ left: '7%',
|
|
|
+ top: '5%',
|
|
|
+ textStyle: {
|
|
|
+ color: "#666666"
|
|
|
},
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
+ itemGap: 25
|
|
|
},
|
|
|
- data: mockData.xdata,
|
|
|
- };
|
|
|
-
|
|
|
- // yAxis
|
|
|
- const yAxis = [
|
|
|
- {
|
|
|
- min: 0,
|
|
|
- name: "公顷",
|
|
|
- type: "value",
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "#BCD3E5",
|
|
|
+ xAxis: {
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLine: { lineStyle: { color: "#BCD3E5" } },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: { fontSize: 12, color: "#BCD3E5" },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (value) {
|
|
|
+ // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
+ if (value.length > 4) {
|
|
|
+ return `${value.slice(0, 4)}...`;
|
|
|
+ } else {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
+ data: xdata,
|
|
|
+ },
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- type: "dashed",
|
|
|
- color: "rgba(255,255,255,0.1)",
|
|
|
+ color: 'rgba(163, 163, 163, 0.5)',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#A0A4AA'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(65, 97, 128, 0.5)',
|
|
|
},
|
|
|
},
|
|
|
- axisTick: {
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#666666"
|
|
|
+ },
|
|
|
+ position: "right",
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#cdd5e2'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- show: true,
|
|
|
- fontSize: 12,
|
|
|
+ show: false,
|
|
|
+ formatter: "{value} %", //右侧Y轴文字显示
|
|
|
+ textStyle: {
|
|
|
+ color: "#666666"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: [{
|
|
|
+ "show": true,
|
|
|
+ "height": 12,
|
|
|
+ "xAxisIndex": [
|
|
|
+ 0
|
|
|
+ ],
|
|
|
+ top: '92%',
|
|
|
+ "start": 0,
|
|
|
+ "end": 8,
|
|
|
+ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
|
+ handleSize: '110%',
|
|
|
+ handleStyle: {
|
|
|
+ color: "#d3dee5",
|
|
|
+
|
|
|
},
|
|
|
- boundaryGap: ["20%", "20%"],
|
|
|
- },
|
|
|
- ];
|
|
|
- // const yAxis = [{
|
|
|
- // axisTick: { show: false },
|
|
|
- // axisLine: { show: false },
|
|
|
- // splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
|
|
|
- // axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
|
|
|
- // }, {
|
|
|
- // show: false,
|
|
|
- // splitLine: { show: false },
|
|
|
- // axisLine: { show: false },
|
|
|
- // axisTick: { show: false },
|
|
|
- // }]
|
|
|
- const diamondData = mockData.result.reduce((pre, cur, index) => {
|
|
|
- pre[index] = cur.data.map(
|
|
|
- (el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0)
|
|
|
- );
|
|
|
- return pre;
|
|
|
- }, []);
|
|
|
-
|
|
|
- let series = mockData.result.reduce((p, c, i, array) => {
|
|
|
- p.push(
|
|
|
- {
|
|
|
- z: i + 1,
|
|
|
- stack: "总量",
|
|
|
- type: "bar",
|
|
|
- name: c.name,
|
|
|
- barGap: 18,
|
|
|
- barWidth: 18,
|
|
|
- data: c.data,
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- x2: 1,
|
|
|
- y: 0,
|
|
|
- y2: 0,
|
|
|
- colorStops: color[i],
|
|
|
- },
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ },
|
|
|
+ borderColor: "#90979c"
|
|
|
+ }, {
|
|
|
+ "type": "inside",
|
|
|
+ "show": true,
|
|
|
+ "height": 15,
|
|
|
+ "start": 1,
|
|
|
+ "end": 35
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '完成收储',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '12px',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#12BDDF'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(24, 253, 255, 0)'
|
|
|
+ }]),
|
|
|
},
|
|
|
},
|
|
|
- {
|
|
|
- z: i + 10,
|
|
|
- type: "pictorialBar",
|
|
|
- symbolPosition: "end",
|
|
|
- symbol: "diamond",
|
|
|
- symbolOffset: [0, "-50%"],
|
|
|
- symbolSize: [18, 12],
|
|
|
- data: diamondData[i],
|
|
|
- itemStyle: { color: color2[i] },
|
|
|
- tooltip: { show: false },
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- // 是否最后一个了？
|
|
|
- if (p.length === array.length * 2) {
|
|
|
- p.push({
|
|
|
- z: array.length * 2,
|
|
|
- type: "pictorialBar",
|
|
|
- symbolPosition: "start",
|
|
|
- data: mockData.result[0].data,
|
|
|
- symbol: "diamond",
|
|
|
- symbolOffset: ["0%", "50%"],
|
|
|
- symbolSize: [18, 10],
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- x2: 1,
|
|
|
- y: 0,
|
|
|
- y2: 0,
|
|
|
- colorStops: color[0],
|
|
|
+ data: result[0].data
|
|
|
+ }
|
|
|
+ , {
|
|
|
+ name: "计划收储",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
+ smooth: true, //平滑曲线显示
|
|
|
+
|
|
|
+ symbol: "circle", //标记的图形为实心圆
|
|
|
+ symbolSize: 0, //标记的大小
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#0AF37A',
|
|
|
+ borderColor: '#0AF37A', //圆点透明 边框
|
|
|
+ borderWidth: 0,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#0AF37A"
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#46C118'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(12, 162, 13, 0)'
|
|
|
+ }])
|
|
|
},
|
|
|
},
|
|
|
- tooltip: { show: false },
|
|
|
- });
|
|
|
- return p;
|
|
|
+ },
|
|
|
+ data: result[1].data
|
|
|
}
|
|
|
-
|
|
|
- return p;
|
|
|
- }, []);
|
|
|
-
|
|
|
- const dataZoom = [
|
|
|
- {
|
|
|
- show: false,
|
|
|
- type: "slider",
|
|
|
- startValue: 0,
|
|
|
- endValue: 7,
|
|
|
- moveOnMouseWheel: true,
|
|
|
- moveOnMouseMove: true,
|
|
|
- zoomOnMouseWheel: false,
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- let option = {
|
|
|
- tooltip,
|
|
|
- legend,
|
|
|
- xAxis,
|
|
|
- yAxis,
|
|
|
- series,
|
|
|
- grid,
|
|
|
- dataZoom,
|
|
|
- backgroundColor: "rgba(0, 0, 0, 0)",
|
|
|
+ ]
|
|
|
};
|
|
|
-
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
changeChartsLeft() {
|
|
|
@@ -745,7 +860,7 @@ export default {
|
|
|
];
|
|
|
}
|
|
|
},
|
|
|
- changeChartsRight() {},
|
|
|
+ changeChartsRight() { },
|
|
|
async getInfo(params) {
|
|
|
let res = await QueryList({
|
|
|
jscType: "jsc_tdgy_jt_xx",
|
|
|
@@ -970,16 +1085,16 @@ export default {
|
|
|
data: [],
|
|
|
},
|
|
|
];
|
|
|
-
|
|
|
+ console.log(result, "dasdas");
|
|
|
data.data.forEach((res) => {
|
|
|
xdata.push(res.tdyt);
|
|
|
result[0].data.push(res.jh_crmj);
|
|
|
result[1].data.push(res.sj_crmj);
|
|
|
});
|
|
|
|
|
|
- store.state.cockpit_tdgy.gy_jg.xdata = xdata;
|
|
|
- store.state.cockpit_tdgy.gy_jg.result = result;
|
|
|
- that.init_gy_jg_echart();
|
|
|
+ // store.state.cockpit_tdgy.gy_jg.xdata = xdata;
|
|
|
+ // store.state.cockpit_tdgy.gy_jg.result = result;
|
|
|
+ that.init_gy_jg_echart(xdata, result);
|
|
|
},
|
|
|
async init_tdgy_jt_jd(params) {
|
|
|
const that = this;
|
|
|
@@ -1088,14 +1203,14 @@ export default {
|
|
|
// tdsy.init(viewer);
|
|
|
});
|
|
|
},
|
|
|
- beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
- updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
beforeDestroy() {
|
|
|
// 清楚定时器
|
|
|
}, //生命周期 - 销毁之前
|
|
|
- destroy() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
- deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
+ destroy() { }, //生命周期 - 销毁完成
|
|
|
+ activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
+ deactivated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -1179,17 +1294,12 @@ export default {
|
|
|
|
|
|
/deep/ .el-select-dropdown__list {
|
|
|
color: #bcd3e5 !important;
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(3, 115, 177, 0) 11%,
|
|
|
- rgba(3, 115, 177, 0.48) 100%
|
|
|
- );
|
|
|
- border-image: linear-gradient(
|
|
|
- 360deg,
|
|
|
+ background: linear-gradient(180deg,
|
|
|
+ rgba(3, 115, 177, 0) 11%,
|
|
|
+ rgba(3, 115, 177, 0.48) 100%);
|
|
|
+ border-image: linear-gradient(360deg,
|
|
|
rgba(75, 185, 250, 0.2),
|
|
|
- rgba(75, 185, 250, 0.05)
|
|
|
- )
|
|
|
- 1 1 !important;
|
|
|
+ rgba(75, 185, 250, 0.05)) 1 1 !important;
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
@@ -1275,6 +1385,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.itemCon {
|
|
|
+
|
|
|
// width: 13.5rem;
|
|
|
// height: 1.55rem;
|
|
|
// background-color: #faa012;
|
|
|
@@ -1338,11 +1449,9 @@ export default {
|
|
|
.icon_tdgy {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(37, 177, 255, 0.6) 0%,
|
|
|
- rgba(0, 48, 83, 0.48) 100%
|
|
|
- );
|
|
|
+ background: linear-gradient(180deg,
|
|
|
+ rgba(37, 177, 255, 0.6) 0%,
|
|
|
+ rgba(0, 48, 83, 0.48) 100%);
|
|
|
box-shadow: inset 0px 0 5px 0px #002b6c;
|
|
|
border-radius: 5px 5px 5px 5px;
|
|
|
border: 1px solid rgba(100, 218, 255, 0.5);
|
|
|
@@ -1402,11 +1511,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
#gy_jg_echart {
|
|
|
- //z-index: 1;
|
|
|
- left: -2rem;
|
|
|
+ left: 0rem;
|
|
|
top: 0.1rem;
|
|
|
- width: 30rem;
|
|
|
- height: 13rem;
|
|
|
+ width: 26rem;
|
|
|
+ height: 14rem;
|
|
|
}
|
|
|
|
|
|
.legend_jtgy {
|
|
|
@@ -1418,8 +1526,7 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: #ecf6ff;
|
|
|
|
|
|
- .legend_jtgy_left {
|
|
|
- }
|
|
|
+ .legend_jtgy_left {}
|
|
|
|
|
|
.legend_jtgy_right {
|
|
|
margin-top: 4rem;
|
zpf