|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="dataCloudMap" v-if="false">
|
|
|
|
|
|
<el-row class="dataCloudMap-main">
|
|
|
|
|
|
<el-col :span="11" class="dataCloudMap-main-left">
|
|
|
|
|
|
<div class="dataCloudMap-left-top">
|
|
|
|
|
|
<div class="echart-title">
|
|
|
|
|
|
<div class="echart-left-title">
|
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
|
<span class="dataCloudMap-title">服务业发展总览</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rightBigNav">
|
|
|
|
|
|
<div class="right-nav">
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="tabStyle"
|
|
|
|
|
|
v-for="(item, index) in options1"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
@click="active(index)"
|
|
|
|
|
|
:class="activeIndex == index ? 'change-blue' : ''"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="change-grey-birght" :class="activeIndex == index ? 'change-blue-birght' : ''"></div>
|
|
|
|
|
|
<span class="change-grey-text" :class="activeIndex == index ? 'change-blue-text' : ''">{{ item.name }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="echarts"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="dataCloudMap-left-bottom">
|
|
|
|
|
|
<div class="bottom-left-title">
|
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
|
<span class="dataCloudMap-title">行业纵深情况</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="13" class="dataCloudMap-main-right">
|
|
|
|
|
|
<div class="dataCloudMap-right-top">
|
|
|
|
|
|
<div class="right-top-title">
|
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
|
<span class="dataCloudMap-title">企业情况</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="dataCloudMap-right-middle">
|
|
|
|
|
|
<div class="right-middle-title">
|
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
|
<span class="dataCloudMap-title">荣誉情况</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="dataCloudMap-right-bottom">
|
|
|
|
|
|
<div class="right-bottom-title">
|
|
|
|
|
|
<div class="L-title-left">
|
|
|
|
|
|
<span class="dataCloudMap-birght"></span>
|
|
|
|
|
|
<span class="dataCloudMap-title">项目追踪情况</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
activeIndex:0,
|
|
|
|
|
|
options1: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "按年",
|
|
|
|
|
|
// url: require("../../assets/images/bg1.png"),
|
|
|
|
|
|
// url1: require("../../assets/images/bg2.png"),
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "按季度",
|
|
|
|
|
|
// url: require("../../assets/images/tb1.png"),
|
|
|
|
|
|
// url1: require("../../assets/images/tb2.png"),
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted(){
|
|
|
|
|
|
// this.$nextTick(()=>{
|
|
|
|
|
|
// this.initEchart();
|
|
|
|
|
|
// })
|
|
|
|
|
|
},
|
|
|
|
|
|
methods:{
|
|
|
|
|
|
initEchart(){
|
|
|
|
|
|
var chartDom = document.getElementById("echarts");
|
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
// title: {
|
|
|
|
|
|
// text: "2019年销售水量和主营业务收入对比",
|
|
|
|
|
|
// textStyle: {
|
|
|
|
|
|
// align: "center",
|
|
|
|
|
|
// color: "#fff",
|
|
|
|
|
|
// fontSize: 20,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// top: "3%",
|
|
|
|
|
|
// left: "10%",
|
|
|
|
|
|
// },
|
|
|
|
|
|
// backgroundColor: "#0f375f",
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: "10%",
|
|
|
|
|
|
bottom: "25%", //也可设置left和right设置距离来控制图表的大小
|
|
|
|
|
|
},
|
|
|
|
|
|
// tooltip: {
|
|
|
|
|
|
// trigger: "axis",
|
|
|
|
|
|
// axisPointer: {
|
|
|
|
|
|
// type: "shadow",
|
|
|
|
|
|
// label: {
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// legend: {
|
|
|
|
|
|
// data: ["销售水量", "主营业务"],
|
|
|
|
|
|
// top: "1%",
|
|
|
|
|
|
// textStyle: {
|
|
|
|
|
|
// // color: "#ffffff",
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
data: [
|
|
|
|
|
|
"当年完成水量",
|
|
|
|
|
|
"去年同期水量",
|
|
|
|
|
|
"滚动目标值水量",
|
|
|
|
|
|
"全年目标值水量",
|
|
|
|
|
|
"当年完成金额",
|
|
|
|
|
|
"去年同期金额",
|
|
|
|
|
|
"滚动目标金额",
|
|
|
|
|
|
"全年目标值",
|
|
|
|
|
|
],
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true, //隐藏X轴轴线
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: "#01FCE3",
|
|
|
|
|
|
// },
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: true, //隐藏X轴刻度
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
// textStyle: {
|
|
|
|
|
|
// color: "#ebf8ac", //X轴文字颜色
|
|
|
|
|
|
// },
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: "value",
|
|
|
|
|
|
name: "亿元",
|
|
|
|
|
|
// nameTextStyle: {
|
|
|
|
|
|
// // color: "#ebf8ac",
|
|
|
|
|
|
// },
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
|
// color: "#FFFFFF",
|
|
|
|
|
|
// },
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
// textStyle: {
|
|
|
|
|
|
// color: "#ebf8ac",
|
|
|
|
|
|
// },
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
// {
|
|
|
|
|
|
// type: "value",
|
|
|
|
|
|
// // name: "同比",
|
|
|
|
|
|
// // nameTextStyle: {
|
|
|
|
|
|
// // color: "#ebf8ac",
|
|
|
|
|
|
// // },
|
|
|
|
|
|
// position: "right",
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// axisTick: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// axisLine: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// formatter: "{value} %", //右侧Y轴文字显示
|
|
|
|
|
|
// // textStyle: {
|
|
|
|
|
|
// // color: "#ebf8ac",
|
|
|
|
|
|
// // },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// type: "value",
|
|
|
|
|
|
// gridIndex: 0,
|
|
|
|
|
|
// min: 50,
|
|
|
|
|
|
// max: 100,
|
|
|
|
|
|
// splitNumber: 8,
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// axisLine: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// axisTick: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// splitArea: {
|
|
|
|
|
|
// show: true,
|
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
|
// color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "销售水量",
|
|
|
|
|
|
type: "line",
|
|
|
|
|
|
// yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
|
|
|
smooth: true, //平滑曲线显示
|
|
|
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
|
|
|
symbolSize: 10, //标记的大小
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
//折线拐点标志的样式
|
|
|
|
|
|
color: "#058cff",
|
|
|
|
|
|
},
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "#058cff",
|
|
|
|
|
|
},
|
|
|
|
|
|
// 折线覆盖的颜色
|
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
|
|
|
// },
|
|
|
|
|
|
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "主营业务",
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
// barWidth: 15,
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
|
// normal: {
|
|
|
|
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
// {
|
|
|
|
|
|
// offset: 0,
|
|
|
|
|
|
// color: "#00FFE3",
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// offset: 1,
|
|
|
|
|
|
// color: "#4693EC",
|
|
|
|
|
|
// },
|
|
|
|
|
|
// ]),
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
myChart.setOption(option)
|
|
|
|
|
|
},
|
|
|
|
|
|
active(e) {
|
|
|
|
|
|
this.activeIndex = e;
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
