|
|
@@ -0,0 +1,2872 @@
|
|
|
+let app = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ leftEcharts1: "",
|
|
|
+ leftEcharts2: "",
|
|
|
+ leftEcharts3: "",
|
|
|
+ leftEcharts4: "",
|
|
|
+ leftEcharts5: "",
|
|
|
+ leftEcharts6: "",
|
|
|
+ leftEcharts7: "",
|
|
|
+ leftEcharts8: "",
|
|
|
+ shanxiMap: "", // 山西地图
|
|
|
+ industryProportion: 1, // 主辅业占比轮播
|
|
|
+ industryLayout: 0, //产业布局分析
|
|
|
+ time1: "", // 4秒定时器
|
|
|
+ time2: "", // 针对投前产业布局分析的定时器
|
|
|
+ meansList: [
|
|
|
+ {
|
|
|
+ label: "初步设计",
|
|
|
+ value: "106",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "详细设计",
|
|
|
+ value: "103",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "施工",
|
|
|
+ value: "62",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "完工",
|
|
|
+ value: "35",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "验收",
|
|
|
+ value: "42",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "结算",
|
|
|
+ value: "33",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ costList: [
|
|
|
+ {
|
|
|
+ num: 160,
|
|
|
+ value: 284,
|
|
|
+ status: "正偏差",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: 280,
|
|
|
+ value: 129,
|
|
|
+ status: "容差内",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: 103,
|
|
|
+ value: 1082,
|
|
|
+ status: "负偏差",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ investData: {
|
|
|
+ investList: [
|
|
|
+ {
|
|
|
+ name: "大地控股",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo15.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "云时代",
|
|
|
+ yse: "21.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo16.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "华舰体育",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo17.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "神农科技",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo18.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "山西焦煤",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo1.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "晋能控股",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo2.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "华阳新材",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo3.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "潞安化工",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo4.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "华新燃气",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo5.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "太重集团",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo6.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "国际能源",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo7.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "华远陆港",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo8.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "水控集团",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo9.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "文旅集团",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo10.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "交控集团",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo11.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "航产集团",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo12.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "山西建投",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo13.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "汾酒集团",
|
|
|
+ yse: "26.79",
|
|
|
+ yqhte: "9.64",
|
|
|
+ czrde: "121.59",
|
|
|
+ jse: "120.13",
|
|
|
+ fke: "36.4",
|
|
|
+ url: "./img/logos/logo14.png",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ inner: 0,
|
|
|
+ innerDeg: 0,
|
|
|
+ timer: null,
|
|
|
+ witchs: 0,
|
|
|
+ topIndex: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.time4s();
|
|
|
+ this.timeNs();
|
|
|
+ this.filterLpData();
|
|
|
+ this.lpRotate();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.leftEcharts1Fun();
|
|
|
+ this.leftEcharts2Fun();
|
|
|
+ this.leftEcharts3Fun();
|
|
|
+ this.leftEcharts4Fun();
|
|
|
+ this.leftEcharts5Fun();
|
|
|
+ this.leftEcharts6Fun();
|
|
|
+ this.leftEcharts7Fun();
|
|
|
+ this.leftEcharts8Fun();
|
|
|
+ this.chinaEchartsFun();
|
|
|
+ this.initChartR1();
|
|
|
+ this.initChartR2();
|
|
|
+ this.initChartR3();
|
|
|
+ this.initChartR4();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initChartR1 () {
|
|
|
+ let that = this;
|
|
|
+ let sumA = 42;
|
|
|
+ let right5 = [[1, 2, 3, 4, 5, 6]];
|
|
|
+ let commonCompany = [
|
|
|
+ "山西焦煤",
|
|
|
+ "山西焦煤",
|
|
|
+ "山西焦煤",
|
|
|
+ "山西焦煤",
|
|
|
+ "山西焦煤",
|
|
|
+ "山西焦煤",
|
|
|
+ ];
|
|
|
+ // 所有在100范围外的全部变成0，其他值相应增加/减少sumA
|
|
|
+ // right5.forEach((item) => {
|
|
|
+ // item.forEach((item2) => {
|
|
|
+ // if (Number(item2[1]) < 0) {
|
|
|
+ // item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
|
|
|
+ // } else if (Number(item2[1]) > 0) {
|
|
|
+ // item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA);
|
|
|
+ // }
|
|
|
+ // if (Number(item2[1]) < -100 - sumA) {
|
|
|
+ // item2[1] = that.$set(item2, 1, 0);
|
|
|
+ // item2[1] = that.$set(item2, 2, 0);
|
|
|
+ // } else if (Number(item2[1]) > 100 + sumA) {
|
|
|
+ // item2[1] = that.$set(item2, 1, 0);
|
|
|
+ // item2[1] = that.$set(item2, 2, 0);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+
|
|
|
+ const itemStyle = {
|
|
|
+ // opacity: 0.8,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ shadowColor: "rgba(0,0,0,0.3)",
|
|
|
+ };
|
|
|
+ that.right2Chart = echarts.init(this.$refs["echartR1"]);
|
|
|
+ that.right2Chart.on("showTip", (params) => {
|
|
|
+ // 如果是7或者15并且满足防抖则切换
|
|
|
+ if (
|
|
|
+ (params.dataIndex == 5 || params.dataIndex == 11) &&
|
|
|
+ that.echartR2Fd
|
|
|
+ ) {
|
|
|
+ that.echartR2Fd = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
|
|
|
+ that.right2Chart.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echartR2Fd = true;
|
|
|
+ }, 2000);
|
|
|
+ }, 1900);
|
|
|
+ // 如果是17表示到了最后一个，那么重新来一遍
|
|
|
+ } else if (params.dataIndex == 17 && that.echartR2Fd) {
|
|
|
+ that.echartR2Fd = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = 0;
|
|
|
+ option.dataZoom[0].startValue = 5;
|
|
|
+ that.right2Chart.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echartR2Fd = true;
|
|
|
+ }, 2000);
|
|
|
+ }, 1900);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let option = {
|
|
|
+ color: ["#04635E", "#697143", "#4A3042"],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ // start: 9,//默认为@
|
|
|
+ // end: 100,//黑认认为1@0
|
|
|
+ type: "slider",
|
|
|
+ show: false,
|
|
|
+ // xAxisIndex: [0]
|
|
|
+ handlesize: 0, //滑动条的 左右2个滑动条的大小
|
|
|
+ startValue: 5, // 初始显示值
|
|
|
+ endValue: 0, // 结束显示值
|
|
|
+ height: 10, //组件高度
|
|
|
+ left: "5%",
|
|
|
+ right: "4%", //右边的距离
|
|
|
+ bottom: "25%", //底边的距离
|
|
|
+ borderColor: "#939",
|
|
|
+ fillerColor: "#269cdb",
|
|
|
+ borderRadius: 5,
|
|
|
+ backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
|
|
|
+ showDataShadow: false, //是否显示数据阴影
|
|
|
+ showDetail: false, //即拖拽时候是否显示详细数值信息
|
|
|
+ truerealtime: true, //是否实时更新
|
|
|
+ filterMode: "filter",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "inside",
|
|
|
+ show: true,
|
|
|
+ start: 1,
|
|
|
+ end: 100,
|
|
|
+ zoomOnMouseWheel: false, //滚轮是否触发缩放
|
|
|
+ moveOnMouseMove: false, //鼠标滚轮触发滚动
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ legend: {
|
|
|
+ selectedMode: false,
|
|
|
+ top: 10,
|
|
|
+ right: "6%",
|
|
|
+ data: ["正偏差", "容差", "负偏差"],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: "#fff",
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ // tooltip: {
|
|
|
+ // show: true,
|
|
|
+ // trigger: "axis",
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#FFF", // 文字的颜色
|
|
|
+ // fontSize: "20", // 文字字体大小
|
|
|
+ // fontFamily: "Microsoft YaHei",
|
|
|
+ // },
|
|
|
+ // formatter: (data) => {
|
|
|
+ // return `${
|
|
|
+ // data[0].value[0]
|
|
|
+ // }<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
|
|
|
+ // data[0].color
|
|
|
+ // }"></span> ${data[0].seriesName}：${that.numFormat(
|
|
|
+ // data[0].data[2]
|
|
|
+ // )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
|
|
|
+ // data[1].color
|
|
|
+ // }"></span> ${data[1].seriesName}：${that.numFormat(
|
|
|
+ // data[1].data[2]
|
|
|
+ // )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
|
|
|
+ // data[2].color
|
|
|
+ // }"></span> ${data[2].seriesName}：${that.numFormat(
|
|
|
+ // data[2].data[2]
|
|
|
+ // )}亿`;
|
|
|
+ // },
|
|
|
+ // axisPointer: {
|
|
|
+ // // // type: 'cross',',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ grid: {
|
|
|
+ top: "10%",
|
|
|
+ right: "7%",
|
|
|
+ left: "7%",
|
|
|
+ bottom: "6%",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ min: -101 - sumA,
|
|
|
+ max: 101 + sumA,
|
|
|
+ maxInterval: 1,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ // interval:,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#68b4dd66",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ // formatter: '{value}',
|
|
|
+ formatter (data) {
|
|
|
+ if (data == 100 + sumA) {
|
|
|
+ return "100%";
|
|
|
+ } else if (data == -100 - sumA) {
|
|
|
+ return "-100%";
|
|
|
+ } else if (data == -5 - sumA) {
|
|
|
+ return "-5%";
|
|
|
+ } else if (data == 5 + sumA) {
|
|
|
+ return "5%";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: "20",
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 20,
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: commonCompany,
|
|
|
+ axisLine: {
|
|
|
+ show: false, //隐藏X轴轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: "#005094",
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#68b4dd66",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: true, //隐藏X轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ rotate: 20,
|
|
|
+ padding: [0, 0, 0, 0],
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff", //X轴文字颜色
|
|
|
+ fontSize: 22,
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "正偏差",
|
|
|
+ type: "scatter",
|
|
|
+ itemStyle: itemStyle,
|
|
|
+ data: right5[0],
|
|
|
+ symbolSize: function (data) {
|
|
|
+ if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
|
|
|
+ return 40;
|
|
|
+ } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
|
|
|
+ return 70;
|
|
|
+ } else if (data[2] > 100) {
|
|
|
+ return 100;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ symbol: "none",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: "100%",
|
|
|
+ yAxis: 100 + sumA,
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#fff',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ formatter: "{b}",
|
|
|
+ position: "right",
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 20,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "5%",
|
|
|
+ yAxis: 5 + sumA,
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#fff',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ formatter: "{b}",
|
|
|
+ position: "right",
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "-5%",
|
|
|
+ yAxis: -5 - sumA,
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#fff',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ formatter: "{b}",
|
|
|
+ position: "right",
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "100%",
|
|
|
+ yAxis: -100 - sumA,
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#fff',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ formatter: "{b}",
|
|
|
+ position: "right",
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "容差",
|
|
|
+ type: "scatter",
|
|
|
+ itemStyle: itemStyle,
|
|
|
+ data: right5[1],
|
|
|
+ symbolSize: function (data) {
|
|
|
+ if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
|
|
|
+ return 40;
|
|
|
+ } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
|
|
|
+ return 70;
|
|
|
+ } else if (data[2] > 100) {
|
|
|
+ return 100;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "负偏差",
|
|
|
+ type: "scatter",
|
|
|
+ itemStyle: itemStyle,
|
|
|
+ data: right5[2],
|
|
|
+ symbolSize: function (data) {
|
|
|
+ if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
|
|
|
+ return 40;
|
|
|
+ } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
|
|
|
+ return 70;
|
|
|
+ } else if (data[2] > 100) {
|
|
|
+ return 100;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ that.right2Chart.on("click", function (param) {
|
|
|
+ if (that.versions) {
|
|
|
+ that.rightAdd.modelName = 1;
|
|
|
+ that.rightAdd.substraction =
|
|
|
+ param.seriesName == "正偏差"
|
|
|
+ ? 1
|
|
|
+ : param.seriesName == "容差"
|
|
|
+ ? 2
|
|
|
+ : 3;
|
|
|
+ that.rightAdd.projectStepCode = "";
|
|
|
+ that.projectNum = 313;
|
|
|
+ that.rightPenetrateTwo(
|
|
|
+ 1,
|
|
|
+ param.seriesName == "正偏差"
|
|
|
+ ? 1
|
|
|
+ : param.seriesName == "容差"
|
|
|
+ ? 2
|
|
|
+ : 3,
|
|
|
+ that.findCode(param.name),
|
|
|
+ "right"
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ that.projectListTipShow = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ that.right2Chart.setOption(option);
|
|
|
+ tools.loopShowTooltip(that.right2Chart, option, {
|
|
|
+ interval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initChartR2 () {
|
|
|
+ let that = this;
|
|
|
+ that.right1Chart = echarts.init(this.$refs["echartR2"]);
|
|
|
+ let option = {
|
|
|
+ color: [
|
|
|
+ {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#91231F", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#F98784", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#9F7F00", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#FBE463", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#07806E", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#79FFEB", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ right: 10,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: "#fff",
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderCap: "round",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "山西焦煤",
|
|
|
+ "华阳控股",
|
|
|
+ "晋能控股",
|
|
|
+ "潞安化工",
|
|
|
+ "国际能源",
|
|
|
+ "云时代",
|
|
|
+ "航产集团",
|
|
|
+ ],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#005094",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff",
|
|
|
+ rotate: 20,
|
|
|
+ fontSize: 22,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 22,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "低风险",
|
|
|
+ type: "bar",
|
|
|
+ stack: "Ad",
|
|
|
+ barWidth: 14,
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [15, 15, 15, 15],
|
|
|
+ },
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "中风险",
|
|
|
+ type: "bar",
|
|
|
+ stack: "Ad",
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [15, 15, 15, 15],
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "高风险",
|
|
|
+ type: "bar",
|
|
|
+ stack: "Ad",
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [15, 15, 15, 15],
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ that.right1Chart.setOption(option);
|
|
|
+ },
|
|
|
+ initChartR3() {
|
|
|
+ let that = this;
|
|
|
+ that.right3Chart = echarts.init(this.$refs["echartR3"]);
|
|
|
+ let option = {
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ splitNumber: 3,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: ["#DD5955", "#39e1d0", "#2e3d45"],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ areaStyle: {
|
|
|
+ color: [
|
|
|
+ "rgba(88,247,223,0.2)",
|
|
|
+ "rgba(255, 224, 54, 0.2)",
|
|
|
+ "rgba(221,89,85,0.3)",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ indicator: [
|
|
|
+ { name: "安全风险", max: 25 },
|
|
|
+ { name: "付款风险", max: 25 },
|
|
|
+ { name: "合同风险", max: 25 },
|
|
|
+ { name: "结算风险", max: 25 },
|
|
|
+ { name: "进度风险", max: 25 },
|
|
|
+ { name: "质量风险", max: 25 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "风险",
|
|
|
+ type: "radar",
|
|
|
+ symbol: "circle",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: [12, 23, 21, 17, 20, 9],
|
|
|
+ name: "Allocated Budget",
|
|
|
+ areaStyle: {
|
|
|
+ color: "#112b75",
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 4,
|
|
|
+ color: "#60C1FF",
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ fontSize: 22,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ that.right3Chart.setOption(option);
|
|
|
+ },
|
|
|
+ initChartR4() {
|
|
|
+ let that = this;
|
|
|
+ that.right4Chart = echarts.init(this.$refs["echartR4"]);
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ show: true,
|
|
|
+
|
|
|
+ formatter: function (p) {
|
|
|
+ console.info(p);
|
|
|
+ return p.marker + p.name + " : " + p.value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ["山西焦煤", "晋能控股", "华阳新材"],
|
|
|
+ type: "category",
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 22,
|
|
|
+ rotate: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ splitNumber: 4,
|
|
|
+ interval: 50,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#68B4DD",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 22,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ animation: false,
|
|
|
+ barWidth: 2,
|
|
|
+ data: [60, 85, 110],
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(85, 255, 237, 1)", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(66, 142, 255, 0.05)", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ data: [60, 85, 110],
|
|
|
+ symbolOffset: ["-120%", "0"],
|
|
|
+ symbolSize: 8,
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 0,
|
|
|
+ opacity: 1,
|
|
|
+ color: "rgba(85, 255, 237, 1)",
|
|
|
+ shadowColor: "rgba(85, 255, 237, 1)",
|
|
|
+ shadowBlur: 100,
|
|
|
+ shadowOffsetX: 100,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ animation: false,
|
|
|
+ barGap: "800%",
|
|
|
+ barWidth: 2,
|
|
|
+ data: [60, 85, 110],
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(214, 91, 255, 1)", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(184, 91, 255, 0.05)", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ data: [60, 85, 110],
|
|
|
+ symbolOffset: ["110%", "0"],
|
|
|
+ symbolSize: 8,
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 0,
|
|
|
+ opacity: 1,
|
|
|
+ color: "#f2fec3",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ that.right4Chart.setOption(option);
|
|
|
+ },
|
|
|
+ clickItem (index) {
|
|
|
+ console.log(index);
|
|
|
+ const angle = 360 / this.investData.investList.length;
|
|
|
+ this.witchs = index;
|
|
|
+ this.inner = index;
|
|
|
+ this.innerDeg = this.witchs * angle;
|
|
|
+ this.lpRotate();
|
|
|
+ },
|
|
|
+ lpRotate () {
|
|
|
+ const angle = 360 / this.investData.investList.length;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.inner++;
|
|
|
+ this.topIndex++;
|
|
|
+ this.topIndex = this.topIndex % this.meansList.length;
|
|
|
+ this.witchs = this.inner % this.investData.investList.length;
|
|
|
+ this.innerDeg = this.inner * angle;
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ filterLpData () {
|
|
|
+ const angle = 360 / this.investData.investList.length;
|
|
|
+ for (let i in this.investData.investList) {
|
|
|
+ this.investData.investList[i].deg = i * angle;
|
|
|
+ this.$set(this.investData.investList, i, {
|
|
|
+ ...this.investData.investList[i],
|
|
|
+ deg: i * angle,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 4秒定时器
|
|
|
+ time4s() {
|
|
|
+ let that = this;
|
|
|
+ // 4秒定时器
|
|
|
+ this.time1 = setInterval(() => {
|
|
|
+ that.industryProportion == 1
|
|
|
+ ? (that.industryProportion = 2)
|
|
|
+ : (that.industryProportion = 1);
|
|
|
+ that.leftEcharts1.dispose();
|
|
|
+ that.leftEcharts2.dispose();
|
|
|
+ that.leftEcharts3.dispose();
|
|
|
+ that.leftEcharts4.dispose();
|
|
|
+ that.leftEcharts1Fun();
|
|
|
+ that.leftEcharts2Fun();
|
|
|
+ that.leftEcharts3Fun();
|
|
|
+ that.leftEcharts4Fun();
|
|
|
+ }, 4000);
|
|
|
+ },
|
|
|
+ // 针对投前产业布局分析的定时器
|
|
|
+ timeNs() {
|
|
|
+ let that = this;
|
|
|
+ this.time2 = setInterval(() => {
|
|
|
+ if (that.industryLayout < 3) {
|
|
|
+ that.industryLayout = that.industryLayout + 1;
|
|
|
+ } else {
|
|
|
+ that.industryLayout = 0;
|
|
|
+ }
|
|
|
+ this.time2 && clearInterval(this.time2);
|
|
|
+ this.timeNs();
|
|
|
+ that.leftEcharts5.dispose();
|
|
|
+ that.leftEcharts5Fun();
|
|
|
+ }, left1[that.industryLayout].length * 2000);
|
|
|
+ },
|
|
|
+ // 主辅业占比点击方法
|
|
|
+ industryProportionChange(e) {
|
|
|
+ let that = this;
|
|
|
+ this.industryProportion = e;
|
|
|
+ this.time1 && clearInterval(this.time1);
|
|
|
+ that.leftEcharts1.dispose();
|
|
|
+ that.leftEcharts2.dispose();
|
|
|
+ that.leftEcharts3.dispose();
|
|
|
+ that.leftEcharts4.dispose();
|
|
|
+ that.leftEcharts1Fun();
|
|
|
+ that.leftEcharts2Fun();
|
|
|
+ that.leftEcharts3Fun();
|
|
|
+ that.leftEcharts4Fun();
|
|
|
+ this.time4s();
|
|
|
+ },
|
|
|
+ // 产业布局分析点击方法
|
|
|
+ industryLayoutChange(e) {
|
|
|
+ this.industryLayout = e;
|
|
|
+ },
|
|
|
+ yuanChange(value) {
|
|
|
+ return Number((value / 100000000).toFixed(2));
|
|
|
+ },
|
|
|
+ // 逢三折断
|
|
|
+ numFormat(value) {
|
|
|
+ if (!value) return "0";
|
|
|
+ // var intPart = Number(value).toFixed(0) // 获取整数部分
|
|
|
+ var intPart = parseInt(value); // 获取整数部分
|
|
|
+ var intPartFormat = intPart
|
|
|
+ .toString()
|
|
|
+ .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // 将整数部分逢三一断
|
|
|
+
|
|
|
+ var floatPart = ".00"; // 预定义小数部分
|
|
|
+ var value2Array = value.toString().split(".");
|
|
|
+ // =2表示数据有小数位
|
|
|
+ if (value2Array.length === 2) {
|
|
|
+ floatPart = value2Array[1].toString(); // 拿到小数部分
|
|
|
+ if (floatPart.length === 1) {
|
|
|
+ // 补0
|
|
|
+ return intPartFormat + "." + floatPart + "0";
|
|
|
+ } else {
|
|
|
+ floatPart = floatPart.slice(0, 2);
|
|
|
+ return intPartFormat + "." + floatPart;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return intPartFormat;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ leftEcharts1Fun() {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts1 = echarts.init(this.$refs["leftEcharts1"]);
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: that.industryProportion == 1 ? "30%" : "70%",
|
|
|
+ x: "center",
|
|
|
+ y: "center",
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: "normal",
|
|
|
+ color: "#68BDFF",
|
|
|
+ fontSize: "20",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ["#68BDFF", "#254F7F"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Line 1",
|
|
|
+ type: "pie",
|
|
|
+ clockWise: true,
|
|
|
+ radius: ["80%", "100%"],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 80,
|
|
|
+ name: "01",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "02",
|
|
|
+ value: 20,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ //轮播
|
|
|
+ // tools.loopShowTooltip(leftEcharts1, option, {
|
|
|
+ // interval: 2000,
|
|
|
+ // loopSeries: true,
|
|
|
+ // });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts1.setOption(option);
|
|
|
+ },
|
|
|
+ leftEcharts2Fun() {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts2 = echarts.init(this.$refs["leftEcharts2"]);
|
|
|
+ let nameList = ["a"];
|
|
|
+ let valueList = that.industryProportion == 1 ? [30] : [70];
|
|
|
+ let total = 100; // 数据总数
|
|
|
+ var category = nameList.map((item, index) => {
|
|
|
+ return {
|
|
|
+ value: valueList[index],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#40A9FF50",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#40A9FF",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ var totalList = [];
|
|
|
+ var totalBorderList = [];
|
|
|
+ nameList.map((item, index) => {
|
|
|
+ totalList.push({
|
|
|
+ value: total,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(51, 147, 236, 0.29)",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ totalBorderList.push({
|
|
|
+ value: total,
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "rgba(51, 147, 236, 0.29)",
|
|
|
+ color: "transparent",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ var datas = [];
|
|
|
+ category.forEach((value) => {
|
|
|
+ datas.push(value.value);
|
|
|
+ });
|
|
|
+ option = {
|
|
|
+ // backgroundColor: 'rgb(231,238,249)',
|
|
|
+ xAxis: {
|
|
|
+ max: total,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "0%",
|
|
|
+ top: "15%", // 设置条形图的边距
|
|
|
+ right: "15%",
|
|
|
+ bottom: "5%",
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: false,
|
|
|
+ data: nameList,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // 内
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 16,
|
|
|
+ barGap: "20%",
|
|
|
+ silent: true,
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // formatter: (item) => {
|
|
|
+ // return `${item['name']}：${item['value']} `;
|
|
|
+ // },
|
|
|
+ // textStyle: {
|
|
|
+ // color: 'rgba(105, 120, 136, 1)',
|
|
|
+ // fontSize: 14,
|
|
|
+ // },
|
|
|
+ // position: [0, '-25px'],
|
|
|
+ // show: true,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ data: category,
|
|
|
+ z: 1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(81, 193, 156, 1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(234, 177, 100, 1)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ animationEasing: "elasticOut",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ // 分隔
|
|
|
+ type: "pictorialBar",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#143362",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbolRepeat: "fixed",
|
|
|
+ symbolMargin: 8,
|
|
|
+ symbol: "rect",
|
|
|
+ symbolClip: false,
|
|
|
+ symbolSize: [4, 20],
|
|
|
+ symbolPosition: "start",
|
|
|
+ symbolOffset: [0, -2],
|
|
|
+ symbolBoundingData: total,
|
|
|
+ data: [total, total, total, total],
|
|
|
+ z: 2,
|
|
|
+ animationEasing: "elasticOut",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // label
|
|
|
+ type: "pictorialBar",
|
|
|
+ symbolBoundingData: total,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "none",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: (params) => {
|
|
|
+ var text;
|
|
|
+ text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
|
|
|
+ return text;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ // 图列内容样式
|
|
|
+ fontSize: "20",
|
|
|
+ fontWeight: 800,
|
|
|
+ },
|
|
|
+ position: "right",
|
|
|
+ offset: [0, -3],
|
|
|
+ distance: 10, // 向右偏移位置
|
|
|
+ show: true,
|
|
|
+ color: "#68BDFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: datas,
|
|
|
+ z: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "外框",
|
|
|
+ type: "bar",
|
|
|
+ barGap: "-130%", // 设置外框粗细
|
|
|
+ data: totalBorderList,
|
|
|
+ barWidth: 26,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // barBorderRadius: [5, 5, 5, 5],
|
|
|
+ borderWidth: 1, // 边框宽度
|
|
|
+ borderColor: "rgb(51, 147, 236)", // 边框色
|
|
|
+ color: "rgb(231,238,249)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ z: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ //轮播
|
|
|
+ // tools.loopShowTooltip(leftEcharts1, option, {
|
|
|
+ // interval: 2000,
|
|
|
+ // loopSeries: true,
|
|
|
+ // });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts2.setOption(option);
|
|
|
+ },
|
|
|
+ leftEcharts3Fun() {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts3 = echarts.init(this.$refs["leftEcharts3"]);
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: that.industryProportion == 1 ? "70%" : "30%",
|
|
|
+ x: "center",
|
|
|
+ y: "center",
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: "normal",
|
|
|
+ color: "#68BDFF",
|
|
|
+ fontSize: "20",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ["#5BDCC8", "#254F7F"],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Line 1",
|
|
|
+ type: "pie",
|
|
|
+ clockWise: true,
|
|
|
+ radius: ["80%", "100%"],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 80,
|
|
|
+ name: "01",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "02",
|
|
|
+ value: 20,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ //轮播
|
|
|
+ // tools.loopShowTooltip(leftEcharts1, option, {
|
|
|
+ // interval: 2000,
|
|
|
+ // loopSeries: true,
|
|
|
+ // });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts3.setOption(option);
|
|
|
+ },
|
|
|
+ leftEcharts4Fun() {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts4 = echarts.init(this.$refs["leftEcharts4"]);
|
|
|
+ let nameList = ["a"];
|
|
|
+ let valueList = that.industryProportion == 1 ? [70] : [30];
|
|
|
+ let total = 100; // 数据总数
|
|
|
+ var category = nameList.map((item, index) => {
|
|
|
+ return {
|
|
|
+ value: valueList[index],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#5BDCC850",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#5BDCC8",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ var totalList = [];
|
|
|
+ var totalBorderList = [];
|
|
|
+ nameList.map((item, index) => {
|
|
|
+ totalList.push({
|
|
|
+ value: total,
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgba(51, 147, 236, 0.29)",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ totalBorderList.push({
|
|
|
+ value: total,
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "rgba(51, 147, 236, 0.29)",
|
|
|
+ color: "transparent",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ var datas = [];
|
|
|
+ category.forEach((value) => {
|
|
|
+ datas.push(value.value);
|
|
|
+ });
|
|
|
+ option = {
|
|
|
+ // backgroundColor: 'rgb(231,238,249)',
|
|
|
+ xAxis: {
|
|
|
+ max: total,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "0%",
|
|
|
+ top: "15%", // 设置条形图的边距
|
|
|
+ right: "15%",
|
|
|
+ bottom: "5%",
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: false,
|
|
|
+ data: nameList,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // 内
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 16,
|
|
|
+ barGap: "20%",
|
|
|
+ silent: true,
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // formatter: (item) => {
|
|
|
+ // return `${item['name']}：${item['value']} `;
|
|
|
+ // },
|
|
|
+ // textStyle: {
|
|
|
+ // color: 'rgba(105, 120, 136, 1)',
|
|
|
+ // fontSize: 14,
|
|
|
+ // },
|
|
|
+ // position: [0, '-25px'],
|
|
|
+ // show: true,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ data: category,
|
|
|
+ z: 1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(81, 193, 156, 1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(234, 177, 100, 1)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ animationEasing: "elasticOut",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ // 分隔
|
|
|
+ type: "pictorialBar",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#143362",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbolRepeat: "fixed",
|
|
|
+ symbolMargin: 8,
|
|
|
+ symbol: "rect",
|
|
|
+ symbolClip: false,
|
|
|
+ symbolSize: [4, 20],
|
|
|
+ symbolPosition: "start",
|
|
|
+ symbolOffset: [0, -2],
|
|
|
+ symbolBoundingData: total,
|
|
|
+ data: [total, total, total, total],
|
|
|
+ z: 2,
|
|
|
+ animationEasing: "elasticOut",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // label
|
|
|
+ type: "pictorialBar",
|
|
|
+ symbolBoundingData: total,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "none",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: (params) => {
|
|
|
+ var text;
|
|
|
+ text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
|
|
|
+ return text;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ // 图列内容样式
|
|
|
+ fontSize: "20",
|
|
|
+ fontWeight: 800,
|
|
|
+ },
|
|
|
+ position: "right",
|
|
|
+ offset: [0, -3],
|
|
|
+ distance: 10, // 向右偏移位置
|
|
|
+ show: true,
|
|
|
+ color: "#68BDFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: datas,
|
|
|
+ z: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "外框",
|
|
|
+ type: "bar",
|
|
|
+ barGap: "-130%", // 设置外框粗细
|
|
|
+ data: totalBorderList,
|
|
|
+ barWidth: 26,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // barBorderRadius: [5, 5, 5, 5],
|
|
|
+ borderWidth: 1, // 边框宽度
|
|
|
+ borderColor: "rgb(51, 147, 236)", // 边框色
|
|
|
+ color: "rgb(231,238,249)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ z: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ //轮播
|
|
|
+ // tools.loopShowTooltip(leftEcharts1, option, {
|
|
|
+ // interval: 2000,
|
|
|
+ // loopSeries: true,
|
|
|
+ // });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts4.setOption(option);
|
|
|
+ },
|
|
|
+ leftEcharts5Fun() {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts5 = echarts.init(this.$refs["leftEcharts5"]);
|
|
|
+ let dataList = [];
|
|
|
+ left1[that.industryLayout].forEach((item, index) => {
|
|
|
+ dataList[index] = {
|
|
|
+ value: item.y,
|
|
|
+ name: item.name,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: commonColor2[index], //顶部颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: commonColor[index], // 底部颜色
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ borderColor: commonColor[index],
|
|
|
+ borderWidth: 3,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: function (e) {
|
|
|
+ return `<span style="display:inline-block;margin-right:15px;border-radius:10px;width:20px;height:20px;background-color:${
|
|
|
+ e.borderColor
|
|
|
+ };"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${
|
|
|
+ left1[that.industryLayout][e.seriesIndex].num
|
|
|
+ }个`;
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
+ fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
|
|
|
+ fontSize: "28", // 文字字体大小
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: "center",
|
|
|
+ orient: "vertical",
|
|
|
+ left: "75%",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 28,
|
|
|
+ padding: [0, 20],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ graphic: {
|
|
|
+ elements: [
|
|
|
+ {
|
|
|
+ type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
|
|
+ style: {
|
|
|
+ image: "./img/whiteCircle.png", //这里添加图片地址
|
|
|
+ width: 80,
|
|
|
+ height: 80,
|
|
|
+ },
|
|
|
+ left: "center", //
|
|
|
+ top: "middle", //配置图片居中
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["20%", "80%"],
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 28,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ roseType: "area",
|
|
|
+ data: dataList,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ type: "pie",
|
|
|
+ radius: ["80%", "82%"],
|
|
|
+ hoverAnimation: false,
|
|
|
+ name: "",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ value: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#345189",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ //轮播
|
|
|
+ tools.loopShowTooltip(that.leftEcharts5, option, {
|
|
|
+ interval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts5.setOption(option);
|
|
|
+ },
|
|
|
+ leftEcharts6Fun() {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts6 = echarts.init(this.$refs["leftEcharts6"]);
|
|
|
+ var dataArr = 44;
|
|
|
+ var colorSet = {
|
|
|
+ color: "#22B95E",
|
|
|
+ };
|
|
|
+ var color1 = {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(255,255,255,0.1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(255,255,255,0.3)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false,
|
|
|
+ };
|
|
|
+ var color2 = {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#30DBBA",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#2DE696",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false,
|
|
|
+ };
|
|
|
+
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ formatter: "{a} <br/>{b} : {c}%",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "内部进度条",
|
|
|
+ type: "gauge",
|
|
|
+ // center: ['20%', '50%'],
|
|
|
+ radius: "50%",
|
|
|
+
|
|
|
+ splitNumber: 10,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: [
|
|
|
+ [dataArr / 100, "rgba(0,0,0,0)"],
|
|
|
+ [1, "rgba(0,0,0,0)"],
|
|
|
+ ],
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ formatter: function (value) {
|
|
|
+ if (value !== 0) {
|
|
|
+ var num = Math.round(value);
|
|
|
+ return parseInt(num).toFixed(0) + "%";
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ offsetCenter: [0, 117],
|
|
|
+ textStyle: {
|
|
|
+ padding: [0, 0, 0, 0],
|
|
|
+ fontSize: 60,
|
|
|
+ color: "#58F7DF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ //标题
|
|
|
+ show: true,
|
|
|
+ offsetCenter: [0, 220], // x, y，单位px
|
|
|
+ textStyle: {
|
|
|
+ color: "#40A9FF",
|
|
|
+ fontSize: 34, //表盘上的标题文字大小
|
|
|
+ fontWeight: 400,
|
|
|
+ fontFamily: "MicrosoftYaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: "总额度:1,323.85亿",
|
|
|
+ value: dataArr,
|
|
|
+ itemStyle: {
|
|
|
+ fontSize: "50", //y轴上方单位的大小
|
|
|
+ color: "#FFF666",
|
|
|
+ fontFamily: "MicrosoftYaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pointer: {
|
|
|
+ show: true,
|
|
|
+ length: "100%",
|
|
|
+ radius: "20%",
|
|
|
+ width: 3, //指针粗细
|
|
|
+ },
|
|
|
+ animationDuration: 4000,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "内部阴影",
|
|
|
+ type: "gauge",
|
|
|
+ radius: "75%",
|
|
|
+ splitNumber: 10,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: [
|
|
|
+ [
|
|
|
+ dataArr / 100,
|
|
|
+ new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#081947",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: "#5DF5A9",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#F6F16A",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ ],
|
|
|
+ [1, "#0E4889"],
|
|
|
+ ],
|
|
|
+ width: 70,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "外部刻度",
|
|
|
+ type: "gauge",
|
|
|
+ // center: ['20%', '50%'],
|
|
|
+ radius: "90%",
|
|
|
+ min: 0, //最小刻度
|
|
|
+ max: 100, //最大刻度
|
|
|
+ splitNumber: 5, //刻度数量
|
|
|
+ startAngle: 225,
|
|
|
+ endAngle: -45,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: [[1, "rgba(0,0,0,0)"]],
|
|
|
+ },
|
|
|
+ }, //仪表盘轴线
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ color: "#ffffff",
|
|
|
+ fontSize: 28,
|
|
|
+ fontFamily: "SourceHanSansSC-Regular",
|
|
|
+ fontWeight: "bold",
|
|
|
+ // position: "top",
|
|
|
+ distance: -45,
|
|
|
+ formatter: function (v) {
|
|
|
+ switch (v + "") {
|
|
|
+ case "0":
|
|
|
+ return "0";
|
|
|
+ case "10":
|
|
|
+ return "10";
|
|
|
+ case "20":
|
|
|
+ return "20";
|
|
|
+ case "30":
|
|
|
+ return "30";
|
|
|
+ case "40":
|
|
|
+ return "40";
|
|
|
+ case "50":
|
|
|
+ return "50";
|
|
|
+ case "60":
|
|
|
+ return "60";
|
|
|
+ case "70":
|
|
|
+ return "70";
|
|
|
+ case "80":
|
|
|
+ return "80";
|
|
|
+ case "90":
|
|
|
+ return "90";
|
|
|
+ case "100":
|
|
|
+ return "100";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, //刻度标签。
|
|
|
+ axisTick: {
|
|
|
+ show: true,
|
|
|
+ splitNumber: 10,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#3798D7", //用颜色渐变函数不起作用
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ length: -6,
|
|
|
+ }, //刻度样式
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ length: -12,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#3798D7", //用颜色渐变函数不起作用
|
|
|
+ },
|
|
|
+ }, //分隔线样式
|
|
|
+ detail: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ //指针上的圆
|
|
|
+ type: "pie",
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ legendHoverLink: false,
|
|
|
+ radius: ["0%", "4%"],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 120,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ //轮播
|
|
|
+ // tools.loopShowTooltip(leftEcharts1, option, {
|
|
|
+ // interval: 2000,
|
|
|
+ // loopSeries: true,
|
|
|
+ // });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts6.setOption(option);
|
|
|
+ },
|
|
|
+ leftEcharts7Fun() {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts7 = echarts.init(this.$refs["leftEcharts7"]);
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "固定资产进度分布",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 28,
|
|
|
+ fontWeight: 500,
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ top: "20",
|
|
|
+ left: "220",
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ trigger: "axis",
|
|
|
+ formatter: function (params) {
|
|
|
+ var tip =
|
|
|
+ params[0].axisValue +
|
|
|
+ "<br/>" +
|
|
|
+ params[0].marker +
|
|
|
+ params[0].data[1] +
|
|
|
+ "：" +
|
|
|
+ params[0].data[2] +
|
|
|
+ "个，" +
|
|
|
+ params[0].data[3] +
|
|
|
+ "亿元" +
|
|
|
+ "<br/>" +
|
|
|
+ params[1].marker +
|
|
|
+ params[1].data[1] +
|
|
|
+ "：" +
|
|
|
+ params[1].data[2] +
|
|
|
+ "个，" +
|
|
|
+ params[1].data[3] +
|
|
|
+ "亿元";
|
|
|
+ return tip;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#ffffff", // 文字的颜色
|
|
|
+ fontSize: "20", // 文字字体大小
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ // lineStyle: {
|
|
|
+ // type: 'dashed',
|
|
|
+ // width: 2,
|
|
|
+ // color: 'rgba(255,255,255,0.6)'
|
|
|
+ // },
|
|
|
+ animation: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "0%",
|
|
|
+ right: "5%",
|
|
|
+ left: "15%",
|
|
|
+ bottom: "-10%",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ data: ["备案", "特别监管"],
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#68b4dd66",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ formatter: "{value}",
|
|
|
+ textStyle: {
|
|
|
+ color: function (data) {
|
|
|
+ if (data == "特别监管") {
|
|
|
+ return "#40A9FF";
|
|
|
+ } else if (data == "备案") {
|
|
|
+ return "#5BDCC8";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fontSize: 20,
|
|
|
+ padding: [0, -10, 0, 0],
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#ebf8ac",
|
|
|
+ fontSize: 16,
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ["项目储备", "项目立项", "可研论证", "投资决策"],
|
|
|
+ axisLine: {
|
|
|
+ show: true, //隐藏X轴轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false, //隐藏X轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff", //X轴文字颜色
|
|
|
+ fontSize: 20,
|
|
|
+ padding: [-80, 0, 0, 0],
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "特别监管",
|
|
|
+ type: "scatter",
|
|
|
+ symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
|
+ symbolSize: function (data) {
|
|
|
+ return Math.sqrt(data[2]) * 5;
|
|
|
+ },
|
|
|
+ // label: {
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: function (param) {
|
|
|
+ // return param.data[2];
|
|
|
+ // },
|
|
|
+ // position: 'top'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#69c0ff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // data: left13[0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "备案",
|
|
|
+ type: "scatter",
|
|
|
+ symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
|
+ symbolSize: function (data) {
|
|
|
+ return Math.sqrt(data[2]) * 5;
|
|
|
+ },
|
|
|
+ // label: {
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: function (param) {
|
|
|
+ // return param.data[2];
|
|
|
+ // },
|
|
|
+ // position: 'top'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#957DFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // data: left13[1]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ //轮播
|
|
|
+ // tools.loopShowTooltip(leftEcharts1, option, {
|
|
|
+ // interval: 2000,
|
|
|
+ // loopSeries: true,
|
|
|
+ // });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts7.setOption(option);
|
|
|
+ },
|
|
|
+ leftEcharts8Fun() {
|
|
|
+ let that = this;
|
|
|
+ this.leftEcharts8 = echarts.init(this.$refs["leftEcharts8"]);
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "固定资产进度分布",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 28,
|
|
|
+ fontWeight: 500,
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ top: "20",
|
|
|
+ left: "220",
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ trigger: "axis",
|
|
|
+ formatter: function (params) {
|
|
|
+ var tip =
|
|
|
+ params[0].axisValue +
|
|
|
+ "<br/>" +
|
|
|
+ params[0].marker +
|
|
|
+ params[0].data[1] +
|
|
|
+ "：" +
|
|
|
+ params[0].data[2] +
|
|
|
+ "个，" +
|
|
|
+ params[0].data[3] +
|
|
|
+ "亿元" +
|
|
|
+ "<br/>" +
|
|
|
+ params[1].marker +
|
|
|
+ params[1].data[1] +
|
|
|
+ "：" +
|
|
|
+ params[1].data[2] +
|
|
|
+ "个，" +
|
|
|
+ params[1].data[3] +
|
|
|
+ "亿元";
|
|
|
+ return tip;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#ffffff", // 文字的颜色
|
|
|
+ fontSize: "20", // 文字字体大小
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ // lineStyle: {
|
|
|
+ // type: 'dashed',
|
|
|
+ // width: 2,
|
|
|
+ // color: 'rgba(255,255,255,0.6)'
|
|
|
+ // },
|
|
|
+ animation: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "0%",
|
|
|
+ right: "5%",
|
|
|
+ left: "15%",
|
|
|
+ bottom: "-10%",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ data: ["备案", "特别监管"],
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#68b4dd66",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ formatter: "{value}",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 20,
|
|
|
+ padding: [0, -10, 0, 0],
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#ebf8ac",
|
|
|
+ fontSize: 16,
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ["项目储备", "项目立项", "可研论证", "投资决策"],
|
|
|
+ axisLine: {
|
|
|
+ show: true, //隐藏X轴轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: "red",
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false, //隐藏X轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff", //X轴文字颜色
|
|
|
+ fontSize: 20,
|
|
|
+ padding: [-80, 0, 0, 0],
|
|
|
+ fontFamily: "Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "特别监管",
|
|
|
+ type: "scatter",
|
|
|
+ symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
|
+ symbolSize: function (data) {
|
|
|
+ return Math.sqrt(data[2]) * 5;
|
|
|
+ },
|
|
|
+ // label: {
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: function (param) {
|
|
|
+ // return param.data[2];
|
|
|
+ // },
|
|
|
+ // position: 'top'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#69c0ff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // data: left13[0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "备案",
|
|
|
+ type: "scatter",
|
|
|
+ symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
|
+ symbolSize: function (data) {
|
|
|
+ return Math.sqrt(data[2]) * 5;
|
|
|
+ },
|
|
|
+ // label: {
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // formatter: function (param) {
|
|
|
+ // return param.data[2];
|
|
|
+ // },
|
|
|
+ // position: 'top'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#957DFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // data: left13[1]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ //轮播
|
|
|
+ // tools.loopShowTooltip(leftEcharts1, option, {
|
|
|
+ // interval: 2000,
|
|
|
+ // loopSeries: true,
|
|
|
+ // });
|
|
|
+ //注册
|
|
|
+ that.leftEcharts8.setOption(option);
|
|
|
+ },
|
|
|
+ chinaEchartsFun () {
|
|
|
+ let that = this
|
|
|
+ this.geoCoordMap = []
|
|
|
+ /*获取地图数据*/
|
|
|
+ this.shanxiMap = echarts.init(this.$refs["shanxi"]);
|
|
|
+ // echarts.registerMap('china', china)
|
|
|
+ echarts.registerMap("china", shanxi);
|
|
|
+ // var mapFeatures = echarts.getMap('china').geoJson.features
|
|
|
+ // mapFeatures.forEach(v => {
|
|
|
+ // // 地区名称
|
|
|
+ // var name = v.properties.name
|
|
|
+ // // 地区经纬度
|
|
|
+ // this.geoCoordMap[name] = v.properties.cp
|
|
|
+ // data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
|
|
|
+ // })
|
|
|
+ // var data = [
|
|
|
+ // { "name": "新疆", value: 29780 },
|
|
|
+ // { "name": "西藏", value: 2186 },
|
|
|
+ // { "name": "内蒙古", value: 1135 },
|
|
|
+ // { "name": "青海", value: 29780 },
|
|
|
+ // { "name": "四川", value: 2568 },
|
|
|
+ // { "name": "黑龙江", value: 29780 },
|
|
|
+ // { "name": "甘肃", value: 6959 },
|
|
|
+ // { "name": "云南", value: 5632 },
|
|
|
+ // { "name": "广西", value: 6707 },
|
|
|
+ // { "name": "湖南", value: 29780 },
|
|
|
+ // { "name": "陕西", value: 1894 },
|
|
|
+ // { "name": "广东", value: 15769 },
|
|
|
+ // { "name": "吉林", value: 8259 },
|
|
|
+ // { "name": "河北", value: 5741 },
|
|
|
+ // { "name": "湖北", value: 3030 },
|
|
|
+ // { "name": "贵州", value: 4542 },
|
|
|
+ // { "name": "山东", value: 19780 },
|
|
|
+ // { "name": "江西", value: 3157 },
|
|
|
+ // { "name": "河南", value: 6690 },
|
|
|
+ // { "name": "辽宁", value: 8678 },
|
|
|
+ // { "name": "山西", value: 5303 },
|
|
|
+ // { "name": "安徽", value: 29780 },
|
|
|
+ // { "name": "福建", value: 10259 },
|
|
|
+ // { "name": "浙江", value: 3016 },
|
|
|
+ // { "name": "江苏", value: 3202 },
|
|
|
+ // { "name": "重庆", value: 4540 },
|
|
|
+ // { "name": "宁夏", value: 19780 },
|
|
|
+ // { "name": "海南", value: 8626 },
|
|
|
+ // { "name": "台湾", value: 4361 },
|
|
|
+ // { "name": "北京", value: 20000 },
|
|
|
+ // { "name": "天津", value: 4080 },
|
|
|
+ // { "name": "上海", value: 19780 },
|
|
|
+ // { "name": "香港", value: 6991 },
|
|
|
+ // { "name": "澳门", value: 13873 },
|
|
|
+ // { "name": "南海诸岛", value: 0 }
|
|
|
+ // ];
|
|
|
+ // var geoCoordMap = {
|
|
|
+ // "新疆": [86.9023, 41.148],
|
|
|
+ // "西藏": [87.8695, 31.6846],
|
|
|
+ // "内蒙古": [110.5977, 41.3408],
|
|
|
+ // "青海": [95.2402, 35.4199],
|
|
|
+ // "四川": [102.9199, 30.1904],
|
|
|
+ // "黑龙江": [128.1445, 46.7156],
|
|
|
+ // "甘肃": [102.7129, 38.166],
|
|
|
+ // "云南": [101.0652, 24.6807],
|
|
|
+ // "广西": [108.7813, 23.6426],
|
|
|
+ // "湖南": [111.5332, 27.3779],
|
|
|
+ // "陕西": [108.5996, 33.7396],
|
|
|
+ // "广东": [113.8668, 22.8076],
|
|
|
+ // "吉林": [126.1746, 43.5938],
|
|
|
+ // "河北": [115.4004, 38.1688],
|
|
|
+ // "湖北": [112.2363, 30.8572],
|
|
|
+ // "贵州": [106.6113, 26.6385],
|
|
|
+ // "山东": [118.2402, 36.2307],
|
|
|
+ // "江西": [115.7156, 27.99],
|
|
|
+ // "河南": [113.0668, 33.8818],
|
|
|
+ // "辽宁": [123.0438, 41.0889],
|
|
|
+ // "山西": [112.44, 37.73],
|
|
|
+ // "安徽": [117.2461, 31.0361],
|
|
|
+ // "福建": [118.3008, 25.9277],
|
|
|
+ // "浙江": [120.498, 29.0918],
|
|
|
+ // "江苏": [119.8586, 32.915],
|
|
|
+ // "重庆": [107.7539, 29.8904],
|
|
|
+ // "宁夏": [105.9961, 37.1096],
|
|
|
+ // "海南": [109.9512, 19.2041],
|
|
|
+ // "台湾": [120.8254, 23.5986],
|
|
|
+ // "北京": [116.4551, 40.2539],
|
|
|
+ // "天津": [117.4219, 39.4189],
|
|
|
+ // "上海": [121.4648, 31.2891],
|
|
|
+ // "香港": [114.6178, 22.3242],
|
|
|
+ // "澳门": [113.5547, 21.6484],
|
|
|
+ // '南海诸岛': [128.8254, 21.5986]
|
|
|
+ // };
|
|
|
+ var data = [
|
|
|
+ { name: "大同市", value: 6035, value2: 28 },
|
|
|
+ { name: "朔州市", value: 3361, value2: 13 },
|
|
|
+ { name: "忻州市", value: 7335, value2: 25 },
|
|
|
+ { name: "吕梁市", value: 10904, value2: 45 },
|
|
|
+ { name: "太原市", value: 25167, value2: 113 },
|
|
|
+ { name: "阳泉市", value: 2512, value2: 28 },
|
|
|
+ { name: "晋中市", value: 14857, value2: 52 },
|
|
|
+ { name: "临汾市", value: 13055, value2: 30 },
|
|
|
+ { name: "长治市", value: 10300, value2: 23 },
|
|
|
+ { name: "运城市", value: 4106, value2: 23 },
|
|
|
+ { name: "晋城市", value: 4543, value2: 31 },
|
|
|
+ ];
|
|
|
+ var geoCoordMap = {
|
|
|
+ 太原市: [112.53, 37.87],
|
|
|
+ 大同市: [113.3, 40.12],
|
|
|
+ 阳泉市: [113.57, 37.85],
|
|
|
+ 长治市: [113.08, 36.18],
|
|
|
+ 晋城市: [112.83, 35.52],
|
|
|
+ 朔州市: [112.43, 39.33],
|
|
|
+ 晋中市: [112.94, 37.4],
|
|
|
+ 运城市: [110.97, 35.03],
|
|
|
+ 忻州市: [112.53, 38.72],
|
|
|
+ 临汾市: [111.5, 36.08],
|
|
|
+ 吕梁市: [111.13, 37.52],
|
|
|
+ };
|
|
|
+ var convertData = function (data) {
|
|
|
+ var res = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var geoCoord = geoCoordMap[data[i].name];
|
|
|
+ if (geoCoord) {
|
|
|
+ res.push({
|
|
|
+ name: data[i].name,
|
|
|
+ value: geoCoord.concat(data[i].value),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ };
|
|
|
+
|
|
|
+ var convertedData = [
|
|
|
+ convertData(data),
|
|
|
+ convertData(
|
|
|
+ data
|
|
|
+ .sort(function (a, b) {
|
|
|
+ return b.value - a.value;
|
|
|
+ })
|
|
|
+ .slice(0, 6)
|
|
|
+ ),
|
|
|
+ ];
|
|
|
+ data.sort(function (a, b) {
|
|
|
+ return a.value - b.value;
|
|
|
+ });
|
|
|
+ option = {
|
|
|
+ // backgroundColor: '#404a59',
|
|
|
+ animation: true,
|
|
|
+ animationDuration: 1000,
|
|
|
+ animationEasing: "cubicInOut",
|
|
|
+ animationDurationUpdate: 1000,
|
|
|
+ animationEasingUpdate: "cubicInOut",
|
|
|
+ geo: {
|
|
|
+ map: "china",
|
|
|
+ center: [112.53, 37.67],
|
|
|
+ zoom: 4.5,
|
|
|
+ label: {
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ className: 'custom-tooltip-box',
|
|
|
+ confine: true, // 不超出当前表
|
|
|
+ formatter: function (params) {
|
|
|
+ console.log(params)
|
|
|
+ return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
|
|
|
+ </div>
|
|
|
+ <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">26<span style="font-size:20px" class="fn">个</span></span></div>
|
|
|
+ <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">180<span style="font-size:20px" class="fn">亿</span></span></div>
|
|
|
+ </div>`
|
|
|
+ },
|
|
|
+ },
|
|
|
+ roam: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // borderColor: 'rgba(147, 235, 248, 1)',
|
|
|
+ borderColor: '#7fb3ff',
|
|
|
+ borderWidth: 3,
|
|
|
+ areaColor: {
|
|
|
+ type: 'radial',
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.8,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#468ff8' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#0a2c6d' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ globalCoord: false // 缺省为 false
|
|
|
+ },
|
|
|
+ // shadowColor: 'rgba(128, 217, 248, 1)',
|
|
|
+ shadowColor: '#468ff8',
|
|
|
+ shadowOffsetX: -2,
|
|
|
+ shadowOffsetY: 2,
|
|
|
+ shadowBlur: 20
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: {
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#3844aa' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#7284fc' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ borderColor: '#b3baff',
|
|
|
+ borderWidth: 5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // regions: [
|
|
|
+ // {
|
|
|
+ // name: "太原市",
|
|
|
+ // value: 2000,
|
|
|
+ // itemStyle: {
|
|
|
+ // emphasis: {
|
|
|
+ // borderColor: "#ffe036",
|
|
|
+ // borderWidth: 5,
|
|
|
+ // areaColor: {
|
|
|
+ // type: "radial",
|
|
|
+ // x: 0.5,
|
|
|
+ // y: 0.5,
|
|
|
+ // r: 0.8,
|
|
|
+ // colorStops: [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color: "#ffe036", // 0% 处的颜色
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: "#7c732a", // 100% 处的颜色
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // globalCoord: false, // 缺省为 false
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "南海诸岛",
|
|
|
+ // itemStyle: {
|
|
|
+ // // 隐藏地图
|
|
|
+ // normal: {
|
|
|
+ // opacity: 0, // 为 0 时不绘制该图形
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // show: false, // 隐藏文字
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ className: "custom-tooltip-box",
|
|
|
+ confine: true, // 不超出当前表
|
|
|
+ // formatter: function (params) {
|
|
|
+ // console.log(params);
|
|
|
+ // return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
|
|
|
+ // <div class="flex items-center">
|
|
|
+ // <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
|
|
|
+ // </div>
|
|
|
+ // <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">26<span style="font-size:20px" class="fn">个</span></span></div>
|
|
|
+ // <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">180<span style="font-size:20px" class="fn">亿</span></span></div>
|
|
|
+ // </div>`;
|
|
|
+ // },
|
|
|
+ formatter: (params, ticket, callback) => {
|
|
|
+ // 清空所有轮播
|
|
|
+ for (var k in this.geoCoordMap) {
|
|
|
+ that.shanxiMap.dispatchAction({
|
|
|
+ // type: 'geoUnSelect',
|
|
|
+ type: 'downplay',
|
|
|
+ name: k,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 如果鼠标滑动到线线上面，则返回空
|
|
|
+ that.shanxiMap.dispatchAction({
|
|
|
+ // type: 'geoSelect',
|
|
|
+ type: 'highlight',
|
|
|
+ name: params.name,
|
|
|
+ })
|
|
|
+ if (params.componentSubType == 'lines') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (params.componentSubType == 'scatter') {
|
|
|
+ let tipHtml = `
|
|
|
+ <div class="tooltip-cont">
|
|
|
+ <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
+ <p>总投资额：<span>${params.data.value[2]}亿</span></p>
|
|
|
+ </div>`
|
|
|
+ callback(ticket, tipHtml)
|
|
|
+ return tipHtml
|
|
|
+ }
|
|
|
+ if (params.componentSubType == 'map') {
|
|
|
+ let tipHtml = `
|
|
|
+ <div class="tooltip-cont">
|
|
|
+ <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
+ <p>总投资额：<span>${params.data.value}亿</span></p>
|
|
|
+ </div>`
|
|
|
+ callback(ticket, tipHtml)
|
|
|
+ return tipHtml
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ position: "top",
|
|
|
+ boundaryGap: false,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ margin: 2,
|
|
|
+ textStyle: {
|
|
|
+ color: "#aaa",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ nameGap: 16,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ddd",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ddd",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#ddd",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: categoryData,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'effectScatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ data: convertedData[0],
|
|
|
+ symbolSize: function (val) {
|
|
|
+ return Math.max(val[2] / 500, 8);
|
|
|
+ },
|
|
|
+ showEffectOn: "render",
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: "stroke",
|
|
|
+ },
|
|
|
+ hoverAnimation: true,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: "{b}",
|
|
|
+ position: "right",
|
|
|
+ show: true,
|
|
|
+ fontSize: "30",
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#ffc809",
|
|
|
+ shadowBlur: 50,
|
|
|
+ shadowColor: "#ffc809",
|
|
|
+ fontSize: "500",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ zlevel: 999
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'map',
|
|
|
+ map: 'china',
|
|
|
+ // center: [112.53, 37.67],
|
|
|
+ layoutCenter: ['50%', '50%'], //地图位置
|
|
|
+ zoom: 4.5,
|
|
|
+ geoIndex: 1,
|
|
|
+ // aspectScale: 1.5, //长宽比
|
|
|
+ showLegendSymbol: true, // 存在legend时显示
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'red',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ roam: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // borderColor: 'rgba(147, 235, 248, 1)',
|
|
|
+ borderColor: '#7fb3ff',
|
|
|
+ borderWidth: 3,
|
|
|
+ areaColor: {
|
|
|
+ type: 'radial',
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.8,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#468ff8' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#0a2c6d' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ globalCoord: false // 缺省为 false
|
|
|
+ },
|
|
|
+ // shadowColor: 'rgba(128, 217, 248, 1)',
|
|
|
+ shadowColor: '#468ff8',
|
|
|
+ shadowOffsetX: -2,
|
|
|
+ shadowOffsetY: 2,
|
|
|
+ shadowBlur: 20
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: {
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#3844aa' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#7284fc' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ borderColor: '#b3baff',
|
|
|
+ borderWidth: 5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ animation: true,
|
|
|
+ data: data,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var categoryData = [];
|
|
|
+ var barData = [];
|
|
|
+ var sum = 0;
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ categoryData.push(data[i].name);
|
|
|
+ barData.push(data[i].value);
|
|
|
+ sum += data[i].value;
|
|
|
+ }
|
|
|
+ // this.shanxiMap.on('click', function (params) {
|
|
|
+ // if (params.name == '山西') {
|
|
|
+ // that.shanxiMap.dispose()
|
|
|
+ // that.centerShow = true
|
|
|
+ // setTimeout(() => {
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ tools.loopShowTooltip(this.shanxiMap, option, {
|
|
|
+ interval: 2000,
|
|
|
+ loopSeries: false,
|
|
|
+ });
|
|
|
+ this.shanxiMap.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
zhbyyy