|
|
@@ -23,7 +23,9 @@
|
|
|
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="用途监测" name="third">
|
|
|
- 用途监测
|
|
|
+ <div id="ytjc_echart">
|
|
|
+
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
@@ -59,12 +61,285 @@ export default {
|
|
|
}, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
beforeMount() { }, //生命周期 - 挂载之前
|
|
|
methods: {
|
|
|
+ init_ytjc_echart() {
|
|
|
+ var myChart = echarts.init(document.getElementById("ytjc_echart"));
|
|
|
+ var scale = 1;
|
|
|
+ function _pie2() {
|
|
|
+ let dataArr = [];
|
|
|
+ for (var i = 0; i < 4; i++) {
|
|
|
+ if (i % 2 === 0) {
|
|
|
+ dataArr.push({
|
|
|
+ name: (i + 1).toString(),
|
|
|
+ value: 25,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: 'rgba(88,142,197,0.5)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ dataArr.push({
|
|
|
+ name: (i + 1).toString(),
|
|
|
+ value: 20,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(0,0,0,0)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return dataArr;
|
|
|
+ }
|
|
|
+ var echartData = [{
|
|
|
+ value: 2154,
|
|
|
+ name: '居民用地',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#E58B44'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }, {
|
|
|
+ value: 3854,
|
|
|
+ name: '公共管理用地',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#D95CFF'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }, {
|
|
|
+ value: 3515,
|
|
|
+ name: '商服用地',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#06A3F4'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }, {
|
|
|
+ value: 3515,
|
|
|
+ name: '工业用地',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#29AF62'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }, {
|
|
|
+ value: 3854,
|
|
|
+ name: '交通运输用地',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#FF3939'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }, {
|
|
|
+ value: 2154,
|
|
|
+ name: '商业用地',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#0b5263'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }]
|
|
|
+ var total_datas = 0;
|
|
|
+ for (var i = 0; i < echartData.length; i++) {
|
|
|
+ total_datas += echartData[i].value
|
|
|
+ }
|
|
|
+
|
|
|
+ var rich = {
|
|
|
+ yellow: {
|
|
|
+ color: "#ffc72b",
|
|
|
+ fontSize: 12 * scale,
|
|
|
+ // padding: [21, 0],
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ total: {
|
|
|
+ color: "#ffc72b",
|
|
|
+ fontSize: 40 * scale,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ blue: {
|
|
|
+ color: '#49dff0',
|
|
|
+ fontSize: 10 * scale,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ hr: {
|
|
|
+ borderColor: '#0b5263',
|
|
|
+ width: '100%',
|
|
|
+ borderWidth: 1,
|
|
|
+ height: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ option = {
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ subtext: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#f2f2f2',
|
|
|
+ fontSize: 40,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ fontSize: 30,
|
|
|
+ color: ['#ff9d19']
|
|
|
+ },
|
|
|
+ x: 'center',
|
|
|
+ y: 'center',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
|
|
|
+ orient: 'vertical',
|
|
|
+ // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
|
|
+ x: 'left',
|
|
|
+ // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
|
|
|
+ y: 'center',
|
|
|
+ itemWidth: 24, // 设置图例图形的宽
|
|
|
+ itemHeight: 18, // 设置图例图形的高
|
|
|
+ textStyle: {
|
|
|
+ color: '#666' // 图例文字颜色
|
|
|
+ },
|
|
|
+ // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
|
|
|
+ itemGap: 30,
|
|
|
+ data: ['居民用地', '公共管理用地', '商服用地', '工业工业', '交通运输用地', '商业用地']
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ name: '总考生数量',
|
|
|
+ type: 'pie',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: "#030d22"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radius: ['38%', '50%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ console.log('params: ', params);
|
|
|
+ var total = 0; //考生总数量
|
|
|
+ var percent = 0; //考生占比
|
|
|
+ echartData.forEach(function (value, index, array) {
|
|
|
+ total += value.value;
|
|
|
+ });
|
|
|
+ percent = ((params.value / total) * 100).toFixed(1);
|
|
|
+ return '{yellow|' + params.name + '}\n{blue|' + percent + '%}';
|
|
|
+ },
|
|
|
+ rich: rich
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // labelLine: {
|
|
|
+ // normal: {
|
|
|
+ // length: 55 * scale,
|
|
|
+ // length2: 10,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#0b5263'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ data: echartData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ zlevel: 2,
|
|
|
+ silent: true,
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ radius: ['58%', '55%'],
|
|
|
+ startAngle: 50,
|
|
|
+ hoverAnimation: false,
|
|
|
+ color: [{
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(234, 40, 125, 1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(234, 40, 125, 0.01)'
|
|
|
+ }],
|
|
|
+ global: false
|
|
|
+ }],
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: _pie2(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['35%', '36%'],
|
|
|
+ data: [100],
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: '#121F22',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
const that = this;
|
|
|
this.$nextTick((res) => {
|
|
|
// this.init_info();
|
|
|
- // this.init_echart_data();
|
|
|
+ this.init_ytjc_echart();
|
|
|
|
|
|
})
|
|
|
},
|
|
|
@@ -228,11 +503,18 @@ export default {
|
|
|
.discounteda_columnar_hy {
|
|
|
width: 21.5vw !important;
|
|
|
}
|
|
|
-.hy_tabs{
|
|
|
+
|
|
|
+.hy_tabs {
|
|
|
// width: 90%;
|
|
|
}
|
|
|
+
|
|
|
/deep/ .el-tabs__item {
|
|
|
color: white !important;
|
|
|
font-size: 12px !important;
|
|
|
}
|
|
|
+
|
|
|
+#ytjc_echart {
|
|
|
+ width: 20vw;
|
|
|
+ height: 11rem;
|
|
|
+}
|
|
|
</style>
|
zpf