|
|
@@ -15,17 +15,233 @@ let app = new Vue({
|
|
|
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()
|
|
|
@@ -36,11 +252,529 @@ let app = new Vue({
|
|
|
this.leftEcharts7Fun()
|
|
|
this.leftEcharts8Fun()
|
|
|
this.chinaEchartsFun()
|
|
|
+ this.initChartR1();
|
|
|
+ this.initChartR2();
|
|
|
})
|
|
|
- // this.moChart()
|
|
|
|
|
|
},
|
|
|
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: 20,
|
|
|
+ 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.right2Chart = 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: {},
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Email",
|
|
|
+ type: "bar",
|
|
|
+ stack: "Ad",
|
|
|
+ barWidth: 14,
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [15, 15, 15, 15],
|
|
|
+ },
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Union Ads",
|
|
|
+ type: "bar",
|
|
|
+ stack: "Ad",
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [15, 15, 15, 15],
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Video Ads",
|
|
|
+ type: "bar",
|
|
|
+ stack: "Ad",
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [15, 15, 15, 15],
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ that.right2Chart.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
|
|
|
@@ -1519,10 +2253,10 @@ let app = new Vue({
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
- tooltip:{
|
|
|
+ tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: function (params) {
|
|
|
- console.log(params,'??????????')
|
|
|
+ console.log(params, '??????????')
|
|
|
}
|
|
|
},
|
|
|
roam: false,
|
zhbyyy
