|
|
@@ -15,11 +15,6 @@
|
|
|
<div class="icon">
|
|
|
<div class="icon_zxkg"></div>
|
|
|
</div>
|
|
|
- <!-- <div class="text" @click="draw_vector">
|
|
|
- <p>报建数量</p>
|
|
|
- <span>{{ left_value == 'csbj' ? sdata.sj_number : 0 }}</span>个
|
|
|
- <i style="pointer-events:all" :class="{ 'el-icon-view-switch': icon_switch, 'el-icon-view': true }"></i>
|
|
|
- </div> -->
|
|
|
|
|
|
<div class="text">
|
|
|
<p>报建数量</p>
|
|
|
@@ -56,7 +51,8 @@ export default {
|
|
|
sdata: {},
|
|
|
sdata_szbj: {},
|
|
|
icon_switch: false,
|
|
|
-
|
|
|
+ szbj_echart: null,
|
|
|
+ csbj_echart: null,
|
|
|
left_value: 'csbj',
|
|
|
options: [
|
|
|
{ value: "csbj", label: "城市报建" },
|
|
|
@@ -71,7 +67,14 @@ export default {
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
changeChartsLeft() {
|
|
|
- this.init_bjxm_echart_info();
|
|
|
+
|
|
|
+ if (this.left_value == 'csbj') {
|
|
|
+ this.init_bjxm_cs_echart(this.csbj_echart);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.init_bjxm_cs_echart(this.szbj_echart);
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
async init_info(params) {
|
|
|
const that = this;
|
|
|
@@ -126,8 +129,15 @@ export default {
|
|
|
xAxis: xAxis,
|
|
|
bat_data: bat_data,
|
|
|
line_data: line_data,
|
|
|
+ legend_data: ["用地面积", "项目数量"],
|
|
|
+ }
|
|
|
+ this.csbj_echart = {
|
|
|
+ xAxis: xAxis,
|
|
|
+ bat_data: bat_data,
|
|
|
+ line_data: line_data,
|
|
|
|
|
|
}
|
|
|
+
|
|
|
// 私宅报建
|
|
|
|
|
|
let dateString_beginTime = store.state.cockpit_date[0];
|
|
|
@@ -158,80 +168,27 @@ export default {
|
|
|
|
|
|
});
|
|
|
|
|
|
- store.state.cockpit_bjxm.szbj.szbj_echart = {
|
|
|
+ this.szbj_echart = {
|
|
|
xAxis: xAxis_szbj,
|
|
|
bat_data: bat_data_szbj,
|
|
|
line_data: line_data_szbj,
|
|
|
|
|
|
}
|
|
|
|
|
|
- this.init_bjxm_echart();
|
|
|
+
|
|
|
+ // this.init_bjxm_cs_echart(this.szbj_echart);
|
|
|
+ this.changeChartsLeft();
|
|
|
|
|
|
},
|
|
|
- init_bjxm_echart() {
|
|
|
- var myChart = echarts.init(document.getElementById("bjxm_echart"));
|
|
|
- // 柱状图的宽度，y是x的一半
|
|
|
- const offsetX = 10
|
|
|
- const offsetY = 5
|
|
|
-
|
|
|
- // 绘制左侧面
|
|
|
- const CubeLeft = echarts.graphic.extendShape({
|
|
|
- shape: {
|
|
|
- x: 0,
|
|
|
- y: 0
|
|
|
- },
|
|
|
- buildPath: function (ctx, shape) {
|
|
|
- const xAxisPoint = shape.xAxisPoint
|
|
|
- const c0 = [shape.x, shape.y]
|
|
|
- const c1 = [shape.x - offsetX, shape.y - offsetY]
|
|
|
- const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
|
|
|
- const c3 = [xAxisPoint[0], xAxisPoint[1]]
|
|
|
- ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
|
|
|
- }
|
|
|
- })
|
|
|
- // 绘制右侧面
|
|
|
- const CubeRight = echarts.graphic.extendShape({
|
|
|
- shape: {
|
|
|
- x: 0,
|
|
|
- y: 0
|
|
|
- },
|
|
|
- buildPath: function (ctx, shape) {
|
|
|
- const xAxisPoint = shape.xAxisPoint
|
|
|
- const c1 = [shape.x, shape.y]
|
|
|
- const c2 = [xAxisPoint[0], xAxisPoint[1]]
|
|
|
- const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
|
|
|
- const c4 = [shape.x + offsetX, shape.y - offsetY]
|
|
|
- ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
|
- }
|
|
|
- })
|
|
|
- // 绘制顶面
|
|
|
- const CubeTop = echarts.graphic.extendShape({
|
|
|
- shape: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- },
|
|
|
- buildPath: function (ctx, shape) {
|
|
|
- const c1 = [shape.x, shape.y]
|
|
|
- const c2 = [shape.x + offsetX, shape.y - offsetY]
|
|
|
- const c3 = [shape.x, shape.y - offsetX]
|
|
|
- const c4 = [shape.x - offsetX, shape.y - offsetY]
|
|
|
- ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
|
- }
|
|
|
- })
|
|
|
- // 注册三个面图形
|
|
|
- echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
|
- echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
|
- echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
|
- // 数据
|
|
|
- const xAxis = this.left_value == 'csbj' ? store.state.cockpit_bjxm.csbj.csbj_echart.xAxis : store.state.cockpit_bjxm.szbj.szbj_echart.xAxis
|
|
|
- // const bat_data = store.state.cockpit_bjxm.csbj.csbj_echart.bat_data
|
|
|
- const line_data = this.left_value == 'csbj' ? store.state.cockpit_bjxm.csbj.csbj_echart.line_data : store.state.cockpit_bjxm.szbj.szbj_echart.line_data
|
|
|
- // const xAxis = store.state.cockpit_bjxm.csbj.csbj_echart.xAxis;
|
|
|
- // const line_data = store.state.cockpit_bjxm.csbj.csbj_echart.line_data;
|
|
|
+ init_bjxm_cs_echart(data) {
|
|
|
+ const _this = this;
|
|
|
+
|
|
|
+
|
|
|
+ var dom = document.getElementById("bjxm_echart");
|
|
|
+ var myChart = window.echarts.init(dom);
|
|
|
|
|
|
let option = {
|
|
|
- //你的代码
|
|
|
- backgroundColor: 'rgba(17, 42, 62, 0)',//"#012366",
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
|
tooltip: {
|
|
|
backgroundColor: 'RGBA(20, 106, 178, 0.4)',
|
|
|
trigger: "axis",
|
|
|
@@ -252,190 +209,115 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
- left: '1%',
|
|
|
- right: '10%',
|
|
|
- bottom: 10,
|
|
|
- top: 10,
|
|
|
- containLabel: true
|
|
|
+ top: '30%',
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ color: ['#186bb8'],
|
|
|
+
|
|
|
+ legend: {
|
|
|
+ data: ["项目数量", "用地面积",],
|
|
|
+
|
|
|
+ top: '1%',
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#666666"
|
|
|
+ // },
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#fff',
|
|
|
+ padding: [0, 0, 0, 0],
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ verticalAlign: 'middle',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
+
|
|
|
+ itemGap: 10
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- name: '月',
|
|
|
- nameGap: 2,
|
|
|
+ xAxis: [{
|
|
|
type: 'category',
|
|
|
- data: xAxis,
|
|
|
+ data: data.xAxis,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#fff',
|
|
|
+ align: 'center',
|
|
|
+ verticalAlign: 'top',
|
|
|
+ },
|
|
|
axisLine: {
|
|
|
+ show: true,
|
|
|
+
|
|
|
lineStyle: {
|
|
|
- color: '#BCD3E5'
|
|
|
+ width: 1,
|
|
|
+ color: 'rgba(239, 247, 253, .7)'
|
|
|
}
|
|
|
},
|
|
|
- // offset: 25,
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
- length: 9,
|
|
|
- alignWithLabel: true,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [{
|
|
|
+ name: "用地面积/k㎡",
|
|
|
+
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 12,
|
|
|
+ padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ fontSize: 10,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
lineStyle: {
|
|
|
- color: '#BCD3E5'
|
|
|
+ color: 'rgba(239, 247, 253, .1)'
|
|
|
}
|
|
|
},
|
|
|
+ }, {
|
|
|
+ name: '项目个数/个',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 12,
|
|
|
+ padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
|
|
|
+ },
|
|
|
axisLabel: {
|
|
|
+ interval: 0,
|
|
|
show: true,
|
|
|
- fontSize: 12,
|
|
|
+ fontSize: 10,
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- // {
|
|
|
- // min: 0,
|
|
|
- // max: 20,
|
|
|
- // interval: 5,
|
|
|
- // type: 'value',
|
|
|
- // name: '用地面积(km2)',
|
|
|
- // axisLine: {
|
|
|
- // show: false,
|
|
|
- // lineStyle: {
|
|
|
- // color: '#BCD3E5'
|
|
|
- // }
|
|
|
- // },
|
|
|
- // splitLine: {
|
|
|
- // show: false,
|
|
|
- // lineStyle: {
|
|
|
- // type: "dashed",
|
|
|
- // color: "rgba(255,255,255,0.1)"
|
|
|
- // },
|
|
|
- // },
|
|
|
- // axisTick: {
|
|
|
- // show: false
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // show: true,
|
|
|
- // fontSize: 12,
|
|
|
-
|
|
|
- // },
|
|
|
- // boundaryGap: ['20%', '20%']
|
|
|
- // },
|
|
|
- {
|
|
|
- min: 0,
|
|
|
- // max: 15,
|
|
|
- // interval: 5,
|
|
|
- name: '项目数(个)',
|
|
|
- type: 'value',
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: '#BCD3E5'
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- type: "dashed",
|
|
|
- color: "rgba(255,255,255,0.1)"
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- fontSize: 12,
|
|
|
-
|
|
|
- },
|
|
|
- boundaryGap: ['20%', '20%']
|
|
|
- },],
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(239, 247, 253, .1)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }],
|
|
|
series: [
|
|
|
- // {
|
|
|
- // type: 'custom',
|
|
|
- // renderItem: (params, api) => {
|
|
|
- // const location = api.coord([api.value(0), api.value(1)])
|
|
|
- // var color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(33,101,140,0.5)'
|
|
|
-
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(33,101,140,0.5)'
|
|
|
-
|
|
|
- // }
|
|
|
- // ])
|
|
|
- // return {
|
|
|
- // type: 'group',
|
|
|
- // children: [
|
|
|
- // {
|
|
|
- // type: 'CubeLeft',
|
|
|
- // shape: {
|
|
|
- // api,
|
|
|
- // xValue: api.value(0),
|
|
|
- // yValue: api.value(1),
|
|
|
- // x: location[0],
|
|
|
- // y: location[1],
|
|
|
- // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
- // },
|
|
|
- // style: {
|
|
|
- // fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(34, 129, 209, 0.8)'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(34, 129, 209, 0.8)'
|
|
|
-
|
|
|
-
|
|
|
- // }
|
|
|
- // ])
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // type: 'CubeRight',
|
|
|
- // shape: {
|
|
|
- // api,
|
|
|
- // xValue: api.value(0),
|
|
|
- // yValue: api.value(1),
|
|
|
- // x: location[0],
|
|
|
- // y: location[1],
|
|
|
- // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
- // },
|
|
|
- // style: {
|
|
|
- // fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(97, 173, 237, 0.8)'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(97, 173, 237, 0.8)'
|
|
|
- // }
|
|
|
- // ])
|
|
|
- // }
|
|
|
- // }, {
|
|
|
- // type: 'CubeTop',
|
|
|
- // shape: {
|
|
|
- // api,
|
|
|
- // xValue: api.value(0),
|
|
|
- // yValue: api.value(1),
|
|
|
- // x: location[0],
|
|
|
- // y: location[1],
|
|
|
- // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
- // },
|
|
|
- // style: {
|
|
|
- // fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(60, 167, 255, 1)'
|
|
|
-
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: 'rgba(135, 200, 255, 1)'
|
|
|
-
|
|
|
- // }
|
|
|
- // ])
|
|
|
- // }
|
|
|
- // }]
|
|
|
- // }
|
|
|
- // },
|
|
|
-
|
|
|
- // data: bat_data
|
|
|
- // },
|
|
|
{
|
|
|
- name: "项目个数",
|
|
|
+
|
|
|
+ name: "项目数量",
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
itemStyle: {
|
|
|
@@ -443,11 +325,23 @@ export default {
|
|
|
color: '#FFCC64' // 折线的颜色
|
|
|
}
|
|
|
},
|
|
|
- data: line_data,
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
+ yAxisIndex: 1, // 指定使用第二个Y轴
|
|
|
+ data: data.line_data,
|
|
|
+ }
|
|
|
+ , {
|
|
|
+ name: '用地面积',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '渠道1',
|
|
|
+ barWidth: 14,
|
|
|
+
|
|
|
+ data: data.bat_data,
|
|
|
+ }
|
|
|
+
|
|
|
+ ],
|
|
|
+ }
|
|
|
+
|
|
|
myChart.setOption(option);
|
|
|
+
|
|
|
},
|
|
|
draw_vector() {
|
|
|
store.setViewerFlagb(false);
|
|
|
@@ -517,6 +411,8 @@ export default {
|
|
|
// viewer.dataSources.add(this.bjxu_entity);
|
|
|
// this.bjxu_entity.show = true
|
|
|
|
|
|
+ this.init_bjxm_echart_info();
|
|
|
+
|
|
|
})
|
|
|
}, //生命周期 - 挂在完成
|
|
|
beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
@@ -677,9 +573,9 @@ export default {
|
|
|
|
|
|
#bjxm_echart {
|
|
|
position: relative;
|
|
|
- top: 1rem;
|
|
|
- width: 21.5vw;
|
|
|
- height: 10rem;
|
|
|
+ top: -0.3rem;
|
|
|
+ width: 21rem;
|
|
|
+ height: 12rem;
|
|
|
}
|
|
|
|
|
|
.title_bjxm {
|
zpf