|
|
@@ -4,75 +4,29 @@
|
|
|
<div class="icon"></div>
|
|
|
<span>土地收储</span>
|
|
|
</div>
|
|
|
- <div v-show="store.state.cockpit_tdsc.flag">
|
|
|
-
|
|
|
- <!-- <div class="content">
|
|
|
- <div class="icon_info">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="info_left">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="info_main">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <span>收储项目</span>
|
|
|
- <span class="count1">33</span>
|
|
|
- <span class="unit">个</span>
|
|
|
-
|
|
|
- <span>收储总面积</span>
|
|
|
- <span class="count2">213124.45</span>
|
|
|
- <span class="unit">公顷</span>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <div id="tdsc_echart">
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-show="!store.state.cockpit_tdsc.flag">
|
|
|
- <!-- <div class="content">
|
|
|
- <div class="icon_info">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="info_left">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="info_main">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <span>收储项目</span>
|
|
|
- <span class="count1">33</span>
|
|
|
- <span class="unit">个</span>
|
|
|
-
|
|
|
- <span>收储总面积</span>
|
|
|
- <span class="count2">213124.45</span>
|
|
|
- <span class="unit">公顷</span>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <!--
|
|
|
- <div id="tdsc_echart_xzqh">
|
|
|
-
|
|
|
- </div> -->
|
|
|
- <pie3d id="tdsc_echart" unit="公顷" ref="echartRefTdsc"></pie3d>
|
|
|
-
|
|
|
+ <div class="selectTab">
|
|
|
+ <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
|
|
|
+ <div id="scje_echart"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
-import pie3d from "../../components/echartsTemplate/3dPie.vue";
|
|
|
|
|
|
export default {
|
|
|
- components: { pie3d },
|
|
|
+ components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- is_xzqh: false,
|
|
|
-
|
|
|
+ options: [
|
|
|
+ { value: "scjg", label: "收储结构" },
|
|
|
+ { value: "scjd", label: "收储进度" },
|
|
|
+ ],
|
|
|
+ active_model: null,
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -85,539 +39,342 @@ export default {
|
|
|
}, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
beforeMount() { }, //生命周期 - 挂载之前
|
|
|
methods: {
|
|
|
- initEchart() {
|
|
|
- var tdsc_my_chart = window.echarts.init(document.getElementById('tdsc_echart'));
|
|
|
-
|
|
|
-
|
|
|
- tdsc_my_chart.getZr().on('click', (params) => {
|
|
|
- // 这个部分照抄，你想通过点击拿到的当前柱条的数据，都可以在下面这些属性中拿到，如果我注释没有你想要的，需要console一下charts.getOption()查找对应的属性名
|
|
|
- // let pointInPixel = [params.offsetX, params.offsetY]
|
|
|
- // if (tdsc_my_chart.containPixel('grid', pointInPixel)) {
|
|
|
- // let xIndex = tdsc_my_chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
|
|
|
- // console.log(xIndex)
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
- const actionObj = params.topTarget
|
|
|
- console.log('actionObj', actionObj)
|
|
|
- const myKey = Object.keys(actionObj).sort().filter(_ => _.indexOf('ec_inner') !== -1)[0]
|
|
|
- console.log('myKey', myKey)
|
|
|
- const res = actionObj[myKey]
|
|
|
- console.log(`当前点击了第${res.dataIndex}组数据中的第${res.seriesIndex}个柱子`)
|
|
|
- var pointInPixel = [params.offsetX, params.offsetY];
|
|
|
- if (tdsc_my_chart.containPixel('grid', pointInPixel)) {
|
|
|
- /*此处添加具体执行代码*/
|
|
|
- var pointInGrid = tdsc_my_chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
|
|
|
- //X轴序号
|
|
|
- var xIndex = pointInGrid[0];
|
|
|
- console.log('点击了横纵坐标', pointInPixel)
|
|
|
- console.log('【点击了第几组数据，纵坐标】', pointInGrid)
|
|
|
- //获取当前图表的option
|
|
|
- var op = tdsc_my_chart.getOption();
|
|
|
- console.log('数据信息', op)
|
|
|
- //获得图表中我们想要的数据---下面就不简写了，默认说我们的折现有2条吧
|
|
|
- var xValue = op.xAxis[0].data[xIndex];
|
|
|
- console.log('x轴所对应的名字', xValue)
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- const legendType = 'center'
|
|
|
+ init_scje_echart() {
|
|
|
+
|
|
|
+ var dom = document.getElementById("scje_echart");
|
|
|
+ var myChart = window.echarts.init(dom);
|
|
|
+ const xData = ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地',"交通运输用地"]
|
|
|
+ // 右侧的立体柱子
|
|
|
+ const bottomValue = [1, 22, 3, 4, 6]
|
|
|
+ const topValue = [2, 3, 4, 6, 8]
|
|
|
+ // 顶部的柱子立体面
|
|
|
+ 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)',
|
|
|
+ backgroundColor: '#192a3d',
|
|
|
grid: {
|
|
|
- containLabel: true,
|
|
|
- bottom: '1%',
|
|
|
- top: '40%',
|
|
|
left: '5%',
|
|
|
- right: legendType === 'center' ? '5%' : '25%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '0%',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
tooltip: {
|
|
|
+ show: false,
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
+ type: 'shadow'
|
|
|
},
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: legendType === 'center' ? '' : 'vertical',
|
|
|
- bottom: "80%",
|
|
|
- right: legendType === 'center' ? 'center' : '2%',
|
|
|
- data: ['征收', '回收', '收购'],
|
|
|
-
|
|
|
- itemWidth: 12,
|
|
|
- itemHeight: 12,
|
|
|
- itemGap: 40,
|
|
|
- icon: "rect",
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
+ borderColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- color: '#fff',
|
|
|
- padding: [5, 0, 0, 2],
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- verticalAlign: 'middle',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- triggerEvent: true,
|
|
|
- data: ['崖州区', '天崖区', '吉阳区', '海棠区'],
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- fontSize: 12,
|
|
|
- color: '#fff',
|
|
|
- align: 'center',
|
|
|
- verticalAlign: 'top',
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
-
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- color: 'rgba(239, 247, 253, .7)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
+ color: '#fff'
|
|
|
},
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ let text = ''
|
|
|
+ params.map(item => {
|
|
|
+ if (item.seriesName !== "") {
|
|
|
+ text += `${item.seriesName}:${item.value}小时\n`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return text
|
|
|
+ }
|
|
|
},
|
|
|
- yAxis: [
|
|
|
+ xAxis: [
|
|
|
{
|
|
|
- name: "面积/公顷",
|
|
|
- nameTextStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: 12,
|
|
|
- padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3d6790',
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
- show: true,
|
|
|
- fontSize: 10,
|
|
|
- color: '#fff',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(255,255,255,1)',
|
|
|
+ fontSize: 15
|
|
|
+ }
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
+ // axisLabel: {
|
|
|
+ // interval: 0,
|
|
|
+ // formatter: function (value) {
|
|
|
+ // // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
+ // if (value.length > 2) {
|
|
|
+ // return `${value.slice(0, 2)}...`;
|
|
|
+ // } else {
|
|
|
+ // return value;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(239, 247, 253, .1)'
|
|
|
- }
|
|
|
+ show: false
|
|
|
},
|
|
|
- },
|
|
|
+ data: xData
|
|
|
+ }
|
|
|
],
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#0f3451'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#87baf8'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#87baf8'
|
|
|
+ },
|
|
|
+ fontSize: 18
|
|
|
+ }
|
|
|
+ },
|
|
|
series: [
|
|
|
+ // 立体效果通过柱状图的线性渐变色来达到 itemStyle
|
|
|
+ // 下面的立体面
|
|
|
{
|
|
|
- name: '征收',
|
|
|
- type: 'bar',
|
|
|
- barWidth: 12,
|
|
|
- silent: true,
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolSize: [40, 20],
|
|
|
+ symbolOffset: [-0, 10],
|
|
|
+ z: 1,
|
|
|
itemStyle: {
|
|
|
- normal: {
|
|
|
- color: function (params) {
|
|
|
- let colorItem = ['#3b93e3', '#186bb8'];
|
|
|
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: colorItem[0]
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: colorItem[1]
|
|
|
- }
|
|
|
- ],
|
|
|
- false
|
|
|
- );
|
|
|
- }
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ type: 'linear',
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+
|
|
|
+ color: 'rgba(24,152,226,0.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ // color: '#1898e2'
|
|
|
+ color: 'rgba(24,152,226,0.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(18,133,199,0.5)'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(18,133,199,0.5)'
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- data: [120, 75, 90, 100],
|
|
|
+ data: [1, 1, 1, 1, 1, 1, 1]
|
|
|
},
|
|
|
+ // 堆叠的下方柱子
|
|
|
{
|
|
|
- name: '回收',
|
|
|
type: 'bar',
|
|
|
- barWidth: 12,
|
|
|
- silent: true,
|
|
|
+ name: '时长',
|
|
|
+ barWidth: 40, // 柱状图的宽度
|
|
|
+ // z: 11,
|
|
|
+ stack: 'zs',
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'top',
|
|
|
+ color: '#10b3ff',
|
|
|
+ fontFamily: 'dsDigital2',
|
|
|
+ fontSize: 18,
|
|
|
+ distance: 15 //距离头部的距离
|
|
|
+ },
|
|
|
itemStyle: {
|
|
|
- normal: {
|
|
|
- color: function (params) {
|
|
|
-
|
|
|
- let colorItem = ['#efc943', '#ec9a1b'];
|
|
|
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: colorItem[0]
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: colorItem[1]
|
|
|
- }
|
|
|
- ],
|
|
|
- false
|
|
|
- );
|
|
|
- }
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ type: 'linear',
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(24,152,226,0.5)'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(24,152,226,0.5)'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(18,133,199,0.5)'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(18,133,199,0.5)'
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- data: [120, 75, 90, 100],
|
|
|
+ data: bottomValue
|
|
|
},
|
|
|
+ // 堆叠的上方柱子
|
|
|
{
|
|
|
- name: '收购',
|
|
|
type: 'bar',
|
|
|
- barWidth: 12,
|
|
|
- silent: true,
|
|
|
+ stack: 'zs',
|
|
|
+
|
|
|
+ name: '时间',
|
|
|
+ // z: 10,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'top',
|
|
|
+ color: '#ffa70f',
|
|
|
+ fontFamily: 'dsDigital2',
|
|
|
+ fontSize: 18,
|
|
|
+ distance: 15
|
|
|
+ },
|
|
|
itemStyle: {
|
|
|
- normal: {
|
|
|
- color: function (params) {
|
|
|
- let colorItem = ['#4ee1ac', '#12a972'];
|
|
|
- return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
|
|
|
- [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: colorItem[0]
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: colorItem[1]
|
|
|
- }
|
|
|
- ],
|
|
|
- false
|
|
|
- );
|
|
|
- }
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ type: 'linear',
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(246,201,92,0.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(246,201,92,0.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(190,157,72,0.5)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(190,157,72,0.5)'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- data: [102, 130, 80, 100],
|
|
|
+ data: topValue
|
|
|
},
|
|
|
- ],
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- tdsc_my_chart.setOption(option);
|
|
|
- },
|
|
|
- initEchartXzqh() {
|
|
|
-
|
|
|
- var my_chart_xzqh = window.echarts.init(document.getElementById('tdsc_echart_xzqh'));
|
|
|
-
|
|
|
- // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
|
|
- function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
|
|
|
|
|
- // 计算
|
|
|
- let midRatio = (startRatio + endRatio) / 2;
|
|
|
-
|
|
|
- let startRadian = startRatio * Math.PI * 2;
|
|
|
- let endRadian = endRatio * Math.PI * 2;
|
|
|
- let midRadian = midRatio * Math.PI * 2;
|
|
|
-
|
|
|
- // 如果只有一个扇形，则不实现选中效果。
|
|
|
- if (startRatio === 0 && endRatio === 1) {
|
|
|
- isSelected = false;
|
|
|
- }
|
|
|
-
|
|
|
- // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
|
|
- k = typeof k !== 'undefined' ? k : 1 / 3;
|
|
|
-
|
|
|
- // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
|
|
- let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
|
|
- let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
|
|
-
|
|
|
- // 计算高亮效果的放大比例（未高亮，则比例为 1）
|
|
|
- let hoverRate = isHovered ? 1.05 : 1;
|
|
|
-
|
|
|
- // 返回曲面参数方程
|
|
|
- return {
|
|
|
-
|
|
|
- u: {
|
|
|
- min: -Math.PI,
|
|
|
- max: Math.PI * 3,
|
|
|
- step: Math.PI / 32
|
|
|
- },
|
|
|
-
|
|
|
- v: {
|
|
|
- min: 0,
|
|
|
- max: Math.PI * 2,
|
|
|
- step: Math.PI / 20
|
|
|
- },
|
|
|
-
|
|
|
- x: function (u, v) {
|
|
|
- if (u < startRadian) {
|
|
|
- return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- }
|
|
|
- if (u > endRadian) {
|
|
|
- return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- }
|
|
|
- return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- },
|
|
|
-
|
|
|
- y: function (u, v) {
|
|
|
- if (u < startRadian) {
|
|
|
- return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- }
|
|
|
- if (u > endRadian) {
|
|
|
- return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- }
|
|
|
- return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ // 中间层的立体面,data是下方柱子的data
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolSize: [40, 20],
|
|
|
+ symbolOffset: [-0, -10],
|
|
|
+ symbolPosition: 'end',
|
|
|
+ z: 12,
|
|
|
+ itemStyle: {
|
|
|
+ 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: bottomValue
|
|
|
},
|
|
|
-
|
|
|
- z: function (u, v) {
|
|
|
- if (u < -Math.PI * 0.5) {
|
|
|
- return Math.sin(u);
|
|
|
- }
|
|
|
- if (u > Math.PI * 2.5) {
|
|
|
- return Math.sin(u);
|
|
|
- }
|
|
|
- return Math.sin(v) > 0 ? 1 * height : -1;
|
|
|
- }
|
|
|
- };
|
|
|
- };
|
|
|
-
|
|
|
- // 生成模拟 3D 饼图的配置项
|
|
|
- function getPie3D(pieData, internalDiameterRatio) {
|
|
|
-
|
|
|
- let series = [];
|
|
|
- let sumValue = 0;
|
|
|
- let startValue = 0;
|
|
|
- let endValue = 0;
|
|
|
- let legendData = [];
|
|
|
- let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
|
|
-
|
|
|
- // 为每一个饼图数据，生成一个 series-surface 配置
|
|
|
- for (let i = 0; i < pieData.length; i++) {
|
|
|
-
|
|
|
- sumValue += pieData[i].value;
|
|
|
-
|
|
|
- let seriesItem = {
|
|
|
- name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
|
|
- type: 'surface',
|
|
|
-
|
|
|
-
|
|
|
- parametric: true,
|
|
|
- wireframe: {
|
|
|
- show: false
|
|
|
+ // 上方的立体面 data的数据应该是b1和b2的data相加的总和
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolPosition: 'end',
|
|
|
+ symbolSize: [40, 20],
|
|
|
+ symbolOffset: [-0, -10],
|
|
|
+ z: 20,
|
|
|
+ // 是否展示总数
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ position: 'top',
|
|
|
+ fontSize: 24,
|
|
|
+ color: '#fff',
|
|
|
+ // offset: [0, 25],
|
|
|
+ },
|
|
|
},
|
|
|
- pieData: pieData[i],
|
|
|
- pieStatus: {
|
|
|
- selected: false,
|
|
|
- hovered: false,
|
|
|
- k: k
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 1,
|
|
|
+ color: '#f6c95c'
|
|
|
},
|
|
|
- };
|
|
|
-
|
|
|
- if (typeof pieData[i].itemStyle != 'undefined') {
|
|
|
-
|
|
|
- let itemStyle = {};
|
|
|
-
|
|
|
- typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
|
|
|
- typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
|
|
|
-
|
|
|
- seriesItem.itemStyle = itemStyle;
|
|
|
+ data: topImg
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- series.push(seriesItem);
|
|
|
- }
|
|
|
-
|
|
|
- // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
|
|
- // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
|
|
- for (let i = 0; i < series.length; i++) {
|
|
|
- endValue = startValue + series[i].pieData.value;
|
|
|
-
|
|
|
- series[i].pieData.startRatio = startValue / sumValue;
|
|
|
- series[i].pieData.endRatio = endValue / sumValue;
|
|
|
- series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
|
|
|
-
|
|
|
- startValue = endValue;
|
|
|
-
|
|
|
- legendData.push(series[i].name);
|
|
|
- }
|
|
|
-
|
|
|
- return series;
|
|
|
- }
|
|
|
- // 传入数据生成 option
|
|
|
- const optionsData = [
|
|
|
- {
|
|
|
- name: '回收',
|
|
|
- value: 50,
|
|
|
- itemStyle: {
|
|
|
- opacity: 0.8,
|
|
|
- color: 'RGBA(235, 184, 86, 1)',
|
|
|
- },
|
|
|
- }, {
|
|
|
- name: '征收',
|
|
|
- value: 20,
|
|
|
- itemStyle: {
|
|
|
- opacity: 0.8,
|
|
|
- color: 'RGBA(100, 184, 255, 1)',
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: '收购',
|
|
|
- value: 30,
|
|
|
- itemStyle: {
|
|
|
- opacity: 0.8,
|
|
|
- color: 'RGBA(71, 203, 129, 1)',
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- ];
|
|
|
-
|
|
|
- const series = getPie3D(optionsData, 0.6);
|
|
|
-
|
|
|
- series.push({
|
|
|
- name: 'pie2d',
|
|
|
- type: 'pie',
|
|
|
-
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: false, //设为false
|
|
|
- position: 'center' //center表示文本显示位置为内部
|
|
|
- },
|
|
|
- opacity: 1,
|
|
|
- fontSize: 13,
|
|
|
- lineHeight: 20,
|
|
|
- textStyle: {
|
|
|
- fontSize: 22,
|
|
|
- },
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- length: 20,
|
|
|
- length2: 40,
|
|
|
- },
|
|
|
- startAngle: -30, //起始角度，支持范围[0, 360]。
|
|
|
- clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
|
- radius: ['30%', '55%'],
|
|
|
- center: ['52%', '38%'],
|
|
|
- // 没啥用
|
|
|
- data: [{
|
|
|
- name: '征收',
|
|
|
- value: 20,
|
|
|
- itemStyle: {
|
|
|
- // opacity: 0.8,
|
|
|
- color: '#3b8584',
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: '收购',
|
|
|
- value: 50,
|
|
|
- itemStyle: {
|
|
|
- // opacity: 0.8,
|
|
|
- color: '#64d9e0',
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '回收',
|
|
|
- value: 30,
|
|
|
- itemStyle: {
|
|
|
- // opacity: 0.8,
|
|
|
- color: '#dac254',
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- itemStyle: {
|
|
|
- opacity: 0,
|
|
|
- },
|
|
|
- });
|
|
|
- // 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|
|
-
|
|
|
- let total = optionsData.reduce(function (prev, cur, index, arr) {
|
|
|
-
|
|
|
- return prev + cur.value;
|
|
|
- }, 0); //数据总和
|
|
|
- let option = {
|
|
|
- legend: {
|
|
|
- tooltip: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- orient: "vertical",
|
|
|
-
|
|
|
- itemWidth: 12, // 设置宽度
|
|
|
- itemHeight: 12, // 设置高度
|
|
|
- data: ['征收', '收购', '回收'],
|
|
|
- bottom: '40%',
|
|
|
- right: '40%',
|
|
|
-
|
|
|
- itemGap: 10,
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- formatter: function (name) {
|
|
|
- console.log(name)
|
|
|
-
|
|
|
- return name;
|
|
|
- },
|
|
|
- },
|
|
|
- animation: true,
|
|
|
-
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- labelLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: '#7BC0CB',
|
|
|
- },
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'outside',
|
|
|
- formatter: '{d}%',
|
|
|
- color: 'inherit'
|
|
|
- },
|
|
|
- xAxis3D: {
|
|
|
- min: -1,
|
|
|
- max: 1,
|
|
|
- },
|
|
|
- yAxis3D: {
|
|
|
- min: -1,
|
|
|
- max: 1,
|
|
|
- },
|
|
|
- zAxis3D: {
|
|
|
- min: -1,
|
|
|
- max: 1,
|
|
|
- },
|
|
|
- grid3D: {
|
|
|
- show: false,
|
|
|
- boxHeight: 1,
|
|
|
- top: '-5%',
|
|
|
- left: '-25%',
|
|
|
- // bottom: '-80%',
|
|
|
- // environment: '#021041',
|
|
|
- viewControl: {
|
|
|
- distance: 180,
|
|
|
- alpha: 25,
|
|
|
- beta: 20,
|
|
|
- // autoRotate: true, // 自动旋转
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- series: series,
|
|
|
+ ]
|
|
|
};
|
|
|
+ myChart.setOption(option);
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- my_chart_xzqh.setOption(option);
|
|
|
},
|
|
|
+ change_model(e) {
|
|
|
+ const that = this;
|
|
|
+ console.log(e, "E");
|
|
|
+ that.active_model = e;
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
+ const that = this;
|
|
|
this.$nextTick((res) => {
|
|
|
- this.initEchart();
|
|
|
- // this.initEchartXzqh();
|
|
|
-
|
|
|
- const optionsData = [
|
|
|
- { name: "征收", value: 15.33 },
|
|
|
- { name: "收购", value: 4.6 },
|
|
|
- { name: "回收", value: 39 },
|
|
|
- ];
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.echartRefTdsc.setOptions(optionsData);
|
|
|
- });
|
|
|
+ that.init_scje_echart();
|
|
|
})
|
|
|
-
|
|
|
},
|
|
|
beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
updated() { }, //生命周期 - 更新之后
|
|
|
@@ -676,90 +433,82 @@ 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.5rem;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
+.selectTab {
|
|
|
+ position: fixed;
|
|
|
+ left: 19rem;
|
|
|
+ bottom: 28rem;
|
|
|
|
|
|
- .unit {
|
|
|
- margin-right: 5rem;
|
|
|
- }
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ // padding-right: 30px;
|
|
|
+ width: 128px !important;
|
|
|
+ height: 24px !important;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-left: 22px;
|
|
|
+ padding-right: 0px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #bcd3e5;
|
|
|
+ border: none;
|
|
|
+ background: url("/static/images/overview/selectBg.png") no-repeat !important;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- .count1 {
|
|
|
- color: RGBA(250, 160, 18, 1);
|
|
|
- }
|
|
|
+ /deep/ .el-input__icon {
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
|
|
|
- .count2 {
|
|
|
- color: RGBA(100, 218, 255, 1);
|
|
|
- }
|
|
|
+ /deep/ .el-input__suffix {
|
|
|
+ right: -2px;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-#tdsc_echart {
|
|
|
- left: -1rem;
|
|
|
- top: 0rem;
|
|
|
- width: 23rem;
|
|
|
- height: 160px;
|
|
|
-}
|
|
|
+ /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,
|
|
|
+ rgba(75, 185, 250, 0.2),
|
|
|
+ rgba(75, 185, 250, 0.05)) 1 1 !important;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
|
|
|
+ /deep/ .el-select-dropdown__item.hover,
|
|
|
+ .el-select-dropdown__item:hover {
|
|
|
+ background-color: rgba(87, 163, 226, 0.5);
|
|
|
+ }
|
|
|
|
|
|
-#tdsc_echart_xzqh {
|
|
|
- left: 1rem;
|
|
|
- top: 2rem;
|
|
|
- width: 32rem;
|
|
|
- height: 160px;
|
|
|
+ /deep/ .el-select-dropdown__item {
|
|
|
+ color: #ecf6ff;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.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;
|
|
|
+/deep/ {
|
|
|
+ .el-select-dropdown__item.selected {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.info_left {
|
|
|
- background: no-repeat;
|
|
|
-
|
|
|
- background-image: url("/static/images/overview/info_left.png");
|
|
|
- // background-image: url("/static/images/overview/左侧主信息.png");
|
|
|
+/deep/ .el-popper[x-placement^="bottom"] {
|
|
|
+ margin-top: 12px;
|
|
|
+ background: #163253;
|
|
|
+}
|
|
|
|
|
|
- display: inline-block;
|
|
|
- width: 10rem;
|
|
|
- height: 2.5rem;
|
|
|
- background-size: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 2rem;
|
|
|
+/deep/ .el-select-dropdown {
|
|
|
+ border: none;
|
|
|
}
|
|
|
|
|
|
-.info_main {
|
|
|
- background: no-repeat;
|
|
|
+/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
|
|
|
+ border-bottom-color: #163253;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
|
|
|
- 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;
|
|
|
+#scje_echart {
|
|
|
+ // position: fixed;
|
|
|
+ // left: -6rem;
|
|
|
+ // top: 2.1rem;
|
|
|
+ border: #163253 1px solid;
|
|
|
+ width: 26rem;
|
|
|
+ height: 9rem;
|
|
|
}
|
|
|
</style>
|
zpf