|
|
@@ -1,40 +1,17 @@
|
|
|
<template>
|
|
|
<div class="hysy">
|
|
|
- <div class="box">
|
|
|
- <div class="title">
|
|
|
- <div class="icon"></div>
|
|
|
- <span>海域使用权出让</span>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="icon_info">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="info_left">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="info_main">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <span>海域使用权
|
|
|
- <br>
|
|
|
- 出让项目</span>
|
|
|
- <div class="text_item">
|
|
|
- <span class="count1">{{ store.state.cockpit_hysy.text.xzqhdm_number }}</span>
|
|
|
- <span class="unit">个</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="text_item1">
|
|
|
- <span>用海总面积</span>
|
|
|
- <span class="count2">{{ store.state.cockpit_hysy.text.zhmj }}</span>
|
|
|
- <span class="unit">公顷</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="title">
|
|
|
+ <div class="icon"></div>
|
|
|
+ <span>海域使用权出让</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content_hysy">
|
|
|
+ <div id="dial_watch_hysy">
|
|
|
+
|
|
|
</div>
|
|
|
<div id="hysyEchart">
|
|
|
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -70,322 +47,351 @@ export default {
|
|
|
}, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
beforeMount() { }, //生命周期 - 挂载之前
|
|
|
methods: {
|
|
|
- getRenKou() {
|
|
|
- const that = this;
|
|
|
- var dom = document.getElementById('hysyEchart');
|
|
|
-
|
|
|
+ init_hysyEchart() {
|
|
|
+ var dom = document.getElementById("hysyEchart");
|
|
|
var myChart = window.echarts.init(dom);
|
|
|
-
|
|
|
- // 柱状图的宽度，y是x的一半
|
|
|
- const offsetX = 10
|
|
|
- const offsetY = 5
|
|
|
- let colorList = ["RGBA(30, 111, 181, 0.8)", "RGBA(149, 101, 24, 0.8)", "RGBA(29, 128, 64, 0.8)", "RGBA(133, 48, 52, 0.8)", "RGBA(121, 62, 147, 0.8)"]
|
|
|
-
|
|
|
- // 绘制左侧面
|
|
|
- const CubeLeft = echarts.graphic.extendShape({
|
|
|
- shape: {
|
|
|
- x: 0,
|
|
|
- y: 0
|
|
|
- },
|
|
|
- buildPath: function (ctx, shape) {
|
|
|
- // 会canvas的应该都能看得懂，shape是从custom传入的
|
|
|
- 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()
|
|
|
- }
|
|
|
- })
|
|
|
- // // 绘制底面
|
|
|
- const CubeBottom = echarts.graphic.extendShape({
|
|
|
- shape: {
|
|
|
- x: 10,
|
|
|
- y: 10
|
|
|
- },
|
|
|
- buildPath: function (ctx, shape) {
|
|
|
- const xAxisPoint = shape.xAxisPoint
|
|
|
- const c1 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
|
|
|
- const c2 = [xAxisPoint[0], xAxisPoint[1]] // 右点
|
|
|
- const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
|
|
|
- const c4 = [xAxisPoint[0], xAxisPoint[1] - offsetX]
|
|
|
- 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)
|
|
|
- echarts.graphic.registerShape('CubeBottom', CubeBottom)
|
|
|
- const dataX = store.state.cockpit_hysy.echart.x;
|
|
|
- const barData = store.state.cockpit_hysy.echart.bar;
|
|
|
-
|
|
|
+ const xData = ['渔业用海', '工业用海', '交通运输用海', '旅游娱乐用海', '海底工程用海', '排污倾倒用海', '造地工程用海', '特殊用海', '其它用海']
|
|
|
+ // 右侧的立体柱子
|
|
|
+ const topValue = [10, 3, 4, 6, 8, 10, 6, 8, 10]
|
|
|
+ const bottomValue = [15, 18, 3, 4, 6, 10, 4, 6, 10]
|
|
|
+
|
|
|
+ // 顶部的柱子立体面
|
|
|
+ const topImg = bottomValue
|
|
|
+ .reduce((acc, curr, index) => {
|
|
|
+ acc.push(curr + topValue[index])
|
|
|
+ return acc
|
|
|
+ }, [])
|
|
|
+ .flat()
|
|
|
+ // 注意：给series中的data赋值时需要注意参考注释中的内容顺序
|
|
|
+ // series[0].data = bottomValue
|
|
|
+ // series[1].data = topValue
|
|
|
+ // series[3].data = bottomValue
|
|
|
+ // series[4].data = topImg
|
|
|
let option = {
|
|
|
- //你的代码
|
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '30%',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
legend: {
|
|
|
- show: false,
|
|
|
- right: 30,
|
|
|
- top: 10,
|
|
|
- itemGap: 30,
|
|
|
- itemWidth: 20,
|
|
|
- itemHeight: 10,
|
|
|
- data: ['时长', '百分比'],
|
|
|
- textStyle: {
|
|
|
- fontSize: 18,
|
|
|
- color: '#ffffff'
|
|
|
+ data: ['计划收储', '完成收储'], //图例名称
|
|
|
+ right: '30%', //调整图例位置
|
|
|
+ top: '80%', //调整图例位置
|
|
|
+ itemWidth: 12,
|
|
|
+ itemHeight: 12, //修改icon图形大小
|
|
|
+ icon: 'rectangle', //图例前面的图标形状
|
|
|
+ textStyle: { //图例文字的样式
|
|
|
+ color: '#ccc', //图例文字颜色
|
|
|
+ fontSize: 12 //图例文字大小
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
- color: ['#097dc0', '#26D6D7'],
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
trigger: 'axis',
|
|
|
- textStyle: {
|
|
|
- fontSize: 18 // 字体大小
|
|
|
- },
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '30%',
|
|
|
- // left: '3%',
|
|
|
- right: '3%',
|
|
|
- bottom: '5%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: dataX,
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
-
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- color: 'rgba(239, 247, 253, .7)'
|
|
|
- }
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
+ borderColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- rotate: 0, //35度角倾斜显示
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- formatter: function (value) {
|
|
|
- let fast = "";
|
|
|
- if (value.length >= 5) {
|
|
|
- fast = value.slice(0, 5);
|
|
|
- fast += "...";
|
|
|
- } else {
|
|
|
- fast = value;
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ let text = ''
|
|
|
+ params.map(item => {
|
|
|
+ if (item.seriesName !== "") {
|
|
|
+ text += `${item.seriesName}:${item.value}小时\n`
|
|
|
}
|
|
|
- return fast;
|
|
|
- },
|
|
|
- },
|
|
|
+ })
|
|
|
+ return text
|
|
|
+ }
|
|
|
},
|
|
|
- yAxis: [
|
|
|
+ xAxis: [
|
|
|
{
|
|
|
- type: 'value',
|
|
|
- name: '面积/公顷',
|
|
|
- nameGap: 30,
|
|
|
- nameTextStyle: {
|
|
|
- color: '#ffffff',
|
|
|
- fontWeight: 100,
|
|
|
- fontSize: 12
|
|
|
- },
|
|
|
+ type: 'category',
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
- width: 1,
|
|
|
- color: 'rgba(239, 247, 253, .1)'
|
|
|
+ color: '#ccc',
|
|
|
+ width: 1
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ offset: 5,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: function (value) {
|
|
|
+ // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
+ if (value.length > 4) {
|
|
|
+ return `${value.slice(0, 4)}...`;
|
|
|
+ } else {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(239, 247, 253, .1)'
|
|
|
- }
|
|
|
+ show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- fontSize: 12,
|
|
|
- color: '#E7FCFF'
|
|
|
- },
|
|
|
- min: 0,
|
|
|
- // max: Math.ceil(Math.max.apply(null, dataX) / 5) * 5,
|
|
|
- // interval: Math.ceil(Math.max.apply(null, dataX) / 5)
|
|
|
- },
|
|
|
+ data: xData
|
|
|
+ }
|
|
|
],
|
|
|
+ yAxis: {
|
|
|
+ "show": false,
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#0f3451'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#87baf8'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#87baf8'
|
|
|
+ },
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
series: [
|
|
|
+ // 立体效果通过柱状图的线性渐变色来达到 itemStyle
|
|
|
+ // 下面的立体面
|
|
|
{
|
|
|
- name: '时长',
|
|
|
- type: 'custom',
|
|
|
- renderItem: (params, api) => {
|
|
|
- const location = api.coord([api.value(0), api.value(1)])
|
|
|
- return {
|
|
|
- type: 'group',
|
|
|
+ name: '计划收储',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolSize: [20, 20],
|
|
|
+ symbolOffset: [-0, 10],
|
|
|
+ z: 1,
|
|
|
+ itemStyle: {
|
|
|
+
|
|
|
+ color: {
|
|
|
x: 0,
|
|
|
- children: [
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ type: 'linear',
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
{
|
|
|
- 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: colorList[params.dataIndex % colorList.length]
|
|
|
-
|
|
|
- }
|
|
|
+ offset: 0,
|
|
|
+
|
|
|
+ color: 'rgba(24,152,226,1)'
|
|
|
},
|
|
|
{
|
|
|
- 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: colorList[params.dataIndex % colorList.length],
|
|
|
-
|
|
|
- }
|
|
|
+ offset: 0.5,
|
|
|
+ // color: '#1898e2'
|
|
|
+ color: 'rgba(24,152,226,1)'
|
|
|
},
|
|
|
{
|
|
|
- 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: colorList[params.dataIndex % colorList.length],
|
|
|
-
|
|
|
- }
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(18,133,199,1)'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(18,133,199,1)'
|
|
|
+
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- data: barData
|
|
|
+ data: [1, 1, 1, 1, 1, 1, 1]
|
|
|
},
|
|
|
- ]
|
|
|
- }
|
|
|
+ // 堆叠的下方柱子
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ name: '时长',
|
|
|
+ barWidth: 20, // 柱状图的宽度
|
|
|
|
|
|
- myChart.setOption(option);
|
|
|
- },
|
|
|
- async label_data() {
|
|
|
- const that = this;
|
|
|
-
|
|
|
- let obj = {
|
|
|
- beginTime: store.state.cockpit_date[0],
|
|
|
- endTime: store.state.cockpit_date[1],
|
|
|
- jscType: 'jsc_hysyq_ztsh',
|
|
|
- id: '4602'
|
|
|
- };
|
|
|
- let data = await cockpitInfo(obj);
|
|
|
+ // z: 11,
|
|
|
+ stack: 'zs',
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'top',
|
|
|
+ color: '#10b3ff',
|
|
|
+ fontFamily: 'dsDigital2',
|
|
|
+ fontSize: 18,
|
|
|
+ distance: 15 //距离头部的距离
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ type: 'linear',
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(24,152,226,0.7)'
|
|
|
|
|
|
- that.label_text.xzqhdm_number = data.data[0].xzqhdm_number
|
|
|
- that.label_text.zhmj = data.data[0].zhmj
|
|
|
- store.setCockpitHysyText(that.label_text);
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(24,152,2260.7)'
|
|
|
|
|
|
- },
|
|
|
- async echart_data() {
|
|
|
- const that = this;
|
|
|
- let obj = {
|
|
|
- beginTime: store.state.cockpit_date[0],
|
|
|
- endTime: store.state.cockpit_date[1],
|
|
|
- jscType: 'jsc_hysyq_yelx',
|
|
|
- id: '4602'
|
|
|
- }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(18,133,1990.7)'
|
|
|
|
|
|
- let data = await cockpitInfo(obj);
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(18,133,1990.7)'
|
|
|
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: bottomValue
|
|
|
+ },
|
|
|
+ // 堆叠的上方柱子
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'zs',
|
|
|
+ barGap: '80%',
|
|
|
|
|
|
- const xArray = data.data.map(item => item.yhlx_name);
|
|
|
- const barArray = data.data.map(item => item.zhmj);
|
|
|
+ name: '完成收储',
|
|
|
+ // z: 10,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'top',
|
|
|
+ color: '#ffa70f',
|
|
|
+ fontFamily: 'dsDigital2',
|
|
|
+ fontSize: 18,
|
|
|
+ distance: 15
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ barWidth: 1, // 设置柱子粗细
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ type: 'linear',
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(246,201,92,1)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(246,201,92,1)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(190,157,72,1)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(190,157,72,1)'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: topValue
|
|
|
+ },
|
|
|
|
|
|
- that.label_echart = {
|
|
|
- x: xArray,
|
|
|
- bar: barArray
|
|
|
- }
|
|
|
+ // 中间层的立体面,data是下方柱子的data
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolSize: [20, 20],
|
|
|
+ symbolOffset: [-0, -10],
|
|
|
+ symbolPosition: 'end',
|
|
|
+ z: 12,
|
|
|
+ itemStyle: {
|
|
|
+ barWidth: 1, // 设置柱子粗细
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ type: 'linear',
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(246,201,92,1)'
|
|
|
|
|
|
- store.setCockpitHysyEchart(that.label_echart);
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(246,201,92,1)'
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(190,157,72,1)'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(190,157,72,1)'
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: bottomValue
|
|
|
+ },
|
|
|
+ // 上方的立体面 data的数据应该是b1和b2的data相加的总和
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolPosition: 'end',
|
|
|
+ symbolSize: [20, 20],
|
|
|
+ symbolOffset: [-0, -10],
|
|
|
+ z: 20,
|
|
|
+ // 是否展示总数
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ position: 'top',
|
|
|
+ fontSize: 24,
|
|
|
+ color: '#fff',
|
|
|
+ // offset: [0, 25],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 1,
|
|
|
+ color: '#f6c95c',
|
|
|
+ barWidth: 1, // 设置柱子粗细
|
|
|
+ },
|
|
|
+ data: topImg
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
|
|
|
- // console.log(that.label_echart, "label_echartlabel_echart");
|
|
|
- this.getRenKou();
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
const that = this;
|
|
|
this.$nextTick((res) => {
|
|
|
- that.label_data();
|
|
|
- that.echart_data();
|
|
|
+ that.init_hysyEchart();
|
|
|
})
|
|
|
},
|
|
|
beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
@@ -403,10 +409,12 @@ export default {
|
|
|
.hysy {
|
|
|
border-width: 0px;
|
|
|
position: absolute;
|
|
|
- left: 67rem;
|
|
|
- top: 35.7rem;
|
|
|
- width: 416px;
|
|
|
+ left: 55rem;
|
|
|
+ top: 33rem;
|
|
|
+ width: 559px;
|
|
|
height: 310px;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
display: flex;
|
|
|
z-index: 100;
|
|
|
}
|
|
|
@@ -414,15 +422,10 @@ export default {
|
|
|
|
|
|
|
|
|
.title {
|
|
|
- border-width: 0px;
|
|
|
- width: 100%;
|
|
|
+ width: 1071rem;
|
|
|
height: 40px;
|
|
|
- // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
|
- // font-weight: 700;
|
|
|
- // font-style: normal;
|
|
|
- // color: #fff;
|
|
|
- // padding: 2%;
|
|
|
background: no-repeat;
|
|
|
+ background-size: 116% 100%;
|
|
|
background-image: url("/static/images/overview/标题框.png");
|
|
|
|
|
|
.icon {
|
|
|
@@ -444,98 +447,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.content {
|
|
|
- background: no-repeat;
|
|
|
- width: 100%;
|
|
|
- height: 44px;
|
|
|
- position: relative;
|
|
|
- right: 1rem;
|
|
|
- // background-image: url("/static/images/overview/info_all.png");
|
|
|
- // background-size: 98% 87%;
|
|
|
-
|
|
|
- .text {
|
|
|
- position: relative;
|
|
|
- left: 3.5rem;
|
|
|
- top: 0.2rem;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
+.content_hysy {
|
|
|
+ position: fixed;
|
|
|
+ top: 40rem;
|
|
|
|
|
|
- .unit {
|
|
|
- margin-right: 3rem;
|
|
|
- }
|
|
|
-
|
|
|
- .count1 {
|
|
|
- color: RGBA(250, 160, 18, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .count2 {
|
|
|
- color: RGBA(100, 218, 255, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .text_item {
|
|
|
- position: relative;
|
|
|
- left: 5rem;
|
|
|
- bottom: 1.7rem;
|
|
|
- }
|
|
|
-
|
|
|
- .text_item1 {
|
|
|
- position: relative;
|
|
|
- left: 10rem;
|
|
|
- bottom: 3rem;
|
|
|
- }
|
|
|
+ #dial_watch_hysy {
|
|
|
+ border: 1px red solid;
|
|
|
+ width: 29rem;
|
|
|
+ height: 7rem;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.icon_info {
|
|
|
- background: no-repeat;
|
|
|
-
|
|
|
- // background-image: url("/static/images/overview/icon_info.png");
|
|
|
- background-image: url("/static/images/overview/icon信息.png");
|
|
|
-
|
|
|
- display: inline-block;
|
|
|
- width: 2rem;
|
|
|
- height: 3rem;
|
|
|
- position: absolute;
|
|
|
- left: 1.23rem;
|
|
|
- top: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.info_left {
|
|
|
- background: no-repeat;
|
|
|
-
|
|
|
- background-image: url("/static/images/overview/info_left.png");
|
|
|
- // background-image: url("/static/images/overview/左侧主信息.png");
|
|
|
-
|
|
|
- display: inline-block;
|
|
|
- width: 10rem;
|
|
|
- height: 2.5rem;
|
|
|
- background-size: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.info_main {
|
|
|
- background: no-repeat;
|
|
|
-
|
|
|
- background-image: url("/static/images/overview/info_main.png");
|
|
|
- // background-image: url("/static/images/overview/右侧附属信息.png");
|
|
|
-
|
|
|
- display: inline-block;
|
|
|
- width: 13rem;
|
|
|
- height: 2.5rem;
|
|
|
- background-size: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 12rem;
|
|
|
-}
|
|
|
-
|
|
|
-#hysyEchart {
|
|
|
- left: -2rem;
|
|
|
- top: 0.5rem;
|
|
|
- width: 28rem;
|
|
|
- height: 11.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-.box {
|
|
|
- width: 416px;
|
|
|
+ #hysyEchart {
|
|
|
+ border: 1px red solid;
|
|
|
+ width: 34rem;
|
|
|
+ height: 9rem;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zpf