|
|
@@ -21,7 +21,9 @@ let app = new Vue({
|
|
|
leftEcharts13: '',
|
|
|
leftEcharts14: '',
|
|
|
leftEcharts15: '',
|
|
|
+ echartR2Fd: true, // 投后进度成本偏差防抖
|
|
|
leftEcharts16: '', // 中国地图背景地球
|
|
|
+ rightEcharts1: '', // 投后进度成本偏差
|
|
|
shanxiMap: "", // 山西地图
|
|
|
chinaMap: '', // 中国地图
|
|
|
industryProportion: 1, // 主辅业占比轮播
|
|
|
@@ -430,7 +432,7 @@ let app = new Vue({
|
|
|
that.shanxiEchartsFun()
|
|
|
} else {
|
|
|
that.chinaEchartsFun()
|
|
|
- that.leftEcharts16Fun()
|
|
|
+ that.leftEcharts16Fun() // 中国地图背景地球
|
|
|
}
|
|
|
this.leftEcharts1Fun();
|
|
|
this.leftEcharts2Fun();
|
|
|
@@ -442,134 +444,101 @@ let app = new Vue({
|
|
|
this.leftEcharts8Fun();
|
|
|
this.leftEcharts10Fun();
|
|
|
this.leftEcharts11Fun();
|
|
|
- this.initChartR1();
|
|
|
+ this.rightEcharts1Fun();
|
|
|
this.initChartR2();
|
|
|
this.initChartR4();
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- initChartR1 () {
|
|
|
- let right5 = [
|
|
|
- [
|
|
|
- ["山西焦煤", 43.8],
|
|
|
- ["晋能控股", 49.8],
|
|
|
- ["华阳新材", 46],
|
|
|
- ["潞安化工", 53.8],
|
|
|
- ["华新燃气", 59],
|
|
|
- ["太重集团", 57],
|
|
|
- ["国际能源", 44],
|
|
|
- ["华远陆港", 46],
|
|
|
- ["万家寨水控", 57],
|
|
|
- ["文旅集团", 62.8],
|
|
|
- ["山西交控", 55.8],
|
|
|
- ["航产集团", 44.2],
|
|
|
- ["山西建投", 49.6],
|
|
|
- ["汾酒集团", 66.65],
|
|
|
- ["大地控股", 45.6],
|
|
|
- ["云时代", 63.9],
|
|
|
- ["华舰体育", 70.6],
|
|
|
- ["神农科技", 45.6],
|
|
|
- ],
|
|
|
- [
|
|
|
- ["山西焦煤", 25.8],
|
|
|
- ["晋能控股", 25.8],
|
|
|
- ["华阳新材", 38],
|
|
|
- ["潞安化工", 37.8],
|
|
|
- ["华新燃气", 28],
|
|
|
- ["太重集团", 38],
|
|
|
- ["国际能源", 28],
|
|
|
- ["华远陆港", 38],
|
|
|
- ["万家寨水控", 35.8],
|
|
|
- ["文旅集团", 22.8],
|
|
|
- ["山西交控", 25.8],
|
|
|
- ["航产集团", 24.2],
|
|
|
- ["山西建投", 23.6],
|
|
|
- ["汾酒集团", 26.65],
|
|
|
- ["大地控股", 25.6],
|
|
|
- ["云时代", 30.9],
|
|
|
- ["华舰体育", 38.6],
|
|
|
- ["神农科技", 35.6],
|
|
|
- ],
|
|
|
- [
|
|
|
- ["山西焦煤", 15.8],
|
|
|
- ["晋能控股", 15.8],
|
|
|
- ["华阳新材", 8],
|
|
|
- ["潞安化工", 17.8],
|
|
|
- ["华新燃气", 18],
|
|
|
- ["太重集团", 18],
|
|
|
- ["国际能源", 8],
|
|
|
- ["华远陆港", 5.8],
|
|
|
- ["万家寨水控", 5.8],
|
|
|
- ["文旅集团", 2.8],
|
|
|
- ["山西交控", 5.8],
|
|
|
- ["航产集团", 12.2],
|
|
|
- ["山西建投", 13.6],
|
|
|
- ["汾酒集团", 16.65],
|
|
|
- ["大地控股", 15.6],
|
|
|
- ["云时代", 13.9],
|
|
|
- ["华舰体育", 18.6],
|
|
|
- ["神农科技", 15.6],
|
|
|
- ],
|
|
|
- ];
|
|
|
- let that = this;
|
|
|
- let sumA = 42;
|
|
|
+ // 解决乘法失去精度
|
|
|
+ numMulti (num1, num2) {
|
|
|
+ var baseNum = 0;
|
|
|
+ try {
|
|
|
+ baseNum += num1.toString().split(".")[1].length;
|
|
|
+ } catch (e) {
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ baseNum += num2.toString().split(".")[1].length;
|
|
|
+ } catch (e) {
|
|
|
+ }
|
|
|
+ return Number(num1.toString().replace(".", "")) * Number(num2.toString().replace(".", "")) / Math.pow(10, baseNum);
|
|
|
+ },
|
|
|
+ // 解决减法失去精度
|
|
|
+ numSub (num1, num2) {
|
|
|
+ var baseNum, baseNum1, baseNum2;
|
|
|
+ var precision;// 精度
|
|
|
+ try {
|
|
|
+ baseNum1 = num1.toString().split(".")[1].length;
|
|
|
+ } catch (e) {
|
|
|
+ baseNum1 = 0;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ baseNum2 = num2.toString().split(".")[1].length;
|
|
|
+ } catch (e) {
|
|
|
+ baseNum2 = 0;
|
|
|
+ }
|
|
|
+ baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
|
|
|
+ precision = (baseNum1 >= baseNum2) ? baseNum1 : baseNum2;
|
|
|
+ return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
|
|
|
+ },
|
|
|
+ rightEcharts1Fun () {
|
|
|
+ let that = this
|
|
|
+ let sumA = 42
|
|
|
// 所有在100范围外的全部变成0，其他值相应增加/减少sumA
|
|
|
- right5.forEach((item) => {
|
|
|
- item.forEach((item2) => {
|
|
|
+ right5.forEach(item => {
|
|
|
+ item.forEach(item2 => {
|
|
|
if (Number(item2[1]) < 0) {
|
|
|
- item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
|
|
|
+ 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);
|
|
|
+ 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);
|
|
|
+ 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)",
|
|
|
+ shadowColor: 'rgba(0,0,0,0.3)'
|
|
|
};
|
|
|
- let echartR1d1 = echarts.init(this.$refs["echartR1"]);
|
|
|
- echartR1d1.on("showTip", (params) => {
|
|
|
+ that.rightEcharts1 = echarts.init(this.$refs['rightEcharts1'])
|
|
|
+ that.rightEcharts1.on('showTip', (params) => {
|
|
|
// 如果是7或者15并且满足防抖则切换
|
|
|
- if (
|
|
|
- (params.dataIndex == 5 || params.dataIndex == 11) &&
|
|
|
- that.echartR2Fd
|
|
|
- ) {
|
|
|
- that.echartR2Fd = false;
|
|
|
+ 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;
|
|
|
- echartR1d1.setOption(option);
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
|
|
|
+ that.rightEcharts1.setOption(option);
|
|
|
// 防止勿刷新做的防抖
|
|
|
setTimeout(() => {
|
|
|
- that.echartR2Fd = true;
|
|
|
- }, 2000);
|
|
|
+ that.echartR2Fd = true
|
|
|
+ }, 2000)
|
|
|
}, 1900);
|
|
|
// 如果是17表示到了最后一个，那么重新来一遍
|
|
|
} else if (params.dataIndex == 17 && that.echartR2Fd) {
|
|
|
- that.echartR2Fd = false;
|
|
|
+ that.echartR2Fd = false
|
|
|
setTimeout(() => {
|
|
|
- option.dataZoom[0].endValue = 0;
|
|
|
- option.dataZoom[0].startValue = 5;
|
|
|
- echartR1d1.setOption(option);
|
|
|
+ option.dataZoom[0].endValue = 0
|
|
|
+ option.dataZoom[0].startValue = 5
|
|
|
+ that.rightEcharts1.setOption(option);
|
|
|
// 防止勿刷新做的防抖
|
|
|
setTimeout(() => {
|
|
|
- that.echartR2Fd = true;
|
|
|
- }, 2000);
|
|
|
- }, 1900);
|
|
|
+ that.echartR2Fd = true
|
|
|
+ }, 2000)
|
|
|
+ }, 1900)
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
let option = {
|
|
|
- color: ["#74a55d", "#cea446", "#b84b4b"],
|
|
|
+ color: ['#04635E', '#697143', '#4A3042'],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
// start: 9,//默认为@
|
|
|
@@ -577,117 +546,109 @@ let app = new Vue({
|
|
|
type: "slider",
|
|
|
show: false,
|
|
|
// xAxisIndex: [0]
|
|
|
- handlesize: 0, //滑动条的 左右2个滑动条的大小
|
|
|
- startValue: 5, // 初始显示值
|
|
|
- endValue: 0, // 结束显示值
|
|
|
- height: 10, //组件高度
|
|
|
+ handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
+ startValue: 5,// 初始显示值
|
|
|
+ endValue: 0,// 结束显示值
|
|
|
+ height: 10,//组件高度
|
|
|
left: "5%",
|
|
|
- right: "4%", //右边的距离
|
|
|
- bottom: "25%", //底边的距离
|
|
|
+ right: "4%",//右边的距离
|
|
|
+ bottom: "25%",//底边的距离
|
|
|
borderColor: "#939",
|
|
|
fillerColor: "#269cdb",
|
|
|
borderRadius: 5,
|
|
|
- backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
|
|
|
- showDataShadow: false, //是否显示数据阴影
|
|
|
- showDetail: false, //即拖拽时候是否显示详细数值信息
|
|
|
- truerealtime: true, //是否实时更新
|
|
|
- filterMode: "filter",
|
|
|
- },
|
|
|
- {
|
|
|
- type: "inside",
|
|
|
+ backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
|
|
|
+ showDataShadow: false,//是否显示数据阴影
|
|
|
+ showDetail: false,//即拖拽时候是否显示详细数值信息
|
|
|
+ truerealtime: true,//是否实时更新
|
|
|
+ filterMode: "filter"
|
|
|
+ }, {
|
|
|
+ type: 'inside',
|
|
|
show: true,
|
|
|
start: 1,
|
|
|
end: 100,
|
|
|
- zoomOnMouseWheel: false, //滚轮是否触发缩放
|
|
|
- moveOnMouseMove: false, //鼠标滚轮触发滚动
|
|
|
- },
|
|
|
+ zoomOnMouseWheel: false, //滚轮是否触发缩放
|
|
|
+ moveOnMouseMove: false, //鼠标滚轮触发滚动
|
|
|
+ }
|
|
|
],
|
|
|
legend: {
|
|
|
+ selectedMode: false,
|
|
|
top: 10,
|
|
|
- data: ["正偏差", "容差", "负偏差"],
|
|
|
+ data: ['正偏差', '容差', '负偏差'],
|
|
|
textStyle: {
|
|
|
fontSize: 20,
|
|
|
- color: "#fff",
|
|
|
- fontFamily: "Microsoft YaHei",
|
|
|
- },
|
|
|
+ color: '#fff',
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
+ }
|
|
|
},
|
|
|
textStyle: {
|
|
|
- color: "#fff",
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
trigger: "axis",
|
|
|
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
+ borderColor: "rgba(50,50,50,0.7)",
|
|
|
textStyle: {
|
|
|
- color: "#FFF", // 文字的颜色
|
|
|
- fontSize: "20", // 文字字体大小
|
|
|
- fontFamily: "Microsoft YaHei",
|
|
|
+ color: "#fff",
|
|
|
+ fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
+ fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
|
|
|
+ fontSize: "28", // 文字字体大小
|
|
|
},
|
|
|
- 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]
|
|
|
- )}亿`;
|
|
|
+ formatter: data => {
|
|
|
+ return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;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:20px;height:20px;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:20px;height:20px;background-color:${data[2].color}"></span> ${data[2].seriesName}：${that.numFormat(data[2].data[2])}亿`
|
|
|
},
|
|
|
axisPointer: {
|
|
|
// // type: 'cross',',
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
- top: "10%",
|
|
|
- right: "4%",
|
|
|
- left: "5%",
|
|
|
- bottom: "5%",
|
|
|
+ top: '10%',
|
|
|
+ right: '7%',
|
|
|
+ left: '7%',
|
|
|
+ bottom: '5%',
|
|
|
},
|
|
|
yAxis: {
|
|
|
- min: -101 - sumA,
|
|
|
- max: 101 + sumA,
|
|
|
+ min: (-101 - sumA),
|
|
|
+ max: (101 + sumA),
|
|
|
maxInterval: 1,
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
// interval:,
|
|
|
lineStyle: {
|
|
|
- color: "#68b4dd66",
|
|
|
- type: "dashed",
|
|
|
+ color: '#68b4dd66',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
- show: false,
|
|
|
+ show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
- show: false,
|
|
|
+ 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%";
|
|
|
+ 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",
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: '20',
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
},
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
- color: "#fff",
|
|
|
+ color: '#fff',
|
|
|
fontSize: 20,
|
|
|
- fontFamily: "Microsoft YaHei",
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
@@ -695,15 +656,15 @@ let app = new Vue({
|
|
|
axisLine: {
|
|
|
show: false, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
- color: "#005094",
|
|
|
+ color: '#005094',
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- color: "#68b4dd66",
|
|
|
- type: "dashed",
|
|
|
+ color: '#68b4dd66',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
@@ -714,16 +675,16 @@ let app = new Vue({
|
|
|
// rotate: 40,
|
|
|
padding: [0, 0, 0, 0],
|
|
|
textStyle: {
|
|
|
- color: "#fff", //X轴文字颜色
|
|
|
+ color: '#fff', //X轴文字颜色
|
|
|
fontSize: 20,
|
|
|
- fontFamily: "Microsoft YaHei",
|
|
|
+ fontFamily: 'Microsoft YaHei'
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: "正偏差",
|
|
|
- type: "scatter",
|
|
|
+ name: '正偏差',
|
|
|
+ type: 'scatter',
|
|
|
itemStyle: itemStyle,
|
|
|
data: right5[0],
|
|
|
symbolSize: function (data) {
|
|
|
@@ -736,64 +697,64 @@ let app = new Vue({
|
|
|
}
|
|
|
},
|
|
|
markLine: {
|
|
|
- symbol: "none",
|
|
|
+ symbol: 'none',
|
|
|
data: [
|
|
|
{
|
|
|
- name: "100%",
|
|
|
+ name: '100%',
|
|
|
yAxis: 100 + sumA,
|
|
|
lineStyle: {
|
|
|
// color: '#fff',
|
|
|
},
|
|
|
label: {
|
|
|
show: false,
|
|
|
- formatter: "{b}",
|
|
|
- position: "right",
|
|
|
- color: "#fff",
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ color: '#fff',
|
|
|
fontSize: 20,
|
|
|
label: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
+ show: false
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: "5%",
|
|
|
+ name: '5%',
|
|
|
yAxis: 5 + sumA,
|
|
|
lineStyle: {
|
|
|
// color: '#fff',
|
|
|
},
|
|
|
label: {
|
|
|
show: false,
|
|
|
- formatter: "{b}",
|
|
|
- position: "right",
|
|
|
- color: "#fff",
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ color: '#fff',
|
|
|
fontSize: 20,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: "-5%",
|
|
|
+ name: '-5%',
|
|
|
yAxis: -5 - sumA,
|
|
|
lineStyle: {
|
|
|
// color: '#fff',
|
|
|
},
|
|
|
label: {
|
|
|
show: false,
|
|
|
- formatter: "{b}",
|
|
|
- position: "right",
|
|
|
- color: "#fff",
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ color: '#fff',
|
|
|
fontSize: 20,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: "100%",
|
|
|
+ name: '100%',
|
|
|
yAxis: -100 - sumA,
|
|
|
lineStyle: {
|
|
|
// color: '#fff',
|
|
|
},
|
|
|
label: {
|
|
|
show: false,
|
|
|
- formatter: "{b}",
|
|
|
- position: "right",
|
|
|
- color: "#fff",
|
|
|
+ formatter: '{b}',
|
|
|
+ position: 'right',
|
|
|
+ color: '#fff',
|
|
|
fontSize: 20,
|
|
|
},
|
|
|
},
|
|
|
@@ -801,46 +762,42 @@ let app = new Vue({
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: "容差",
|
|
|
- type: "scatter",
|
|
|
+ name: '容差',
|
|
|
+ type: 'scatter',
|
|
|
itemStyle: itemStyle,
|
|
|
data: right5[1],
|
|
|
symbolSize: function (data) {
|
|
|
- if ((data[1] > 0 && data[1] < 50) || data[1] == 50) {
|
|
|
+ if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
|
|
|
return 40;
|
|
|
- } else if ((data[1] > 50 && data[1] < 100) || data[1] == 100) {
|
|
|
+ } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
|
|
|
return 70;
|
|
|
- } else if (data[1] > 100) {
|
|
|
+ } else if (data[2] > 100) {
|
|
|
return 100;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: "负偏差",
|
|
|
- type: "scatter",
|
|
|
+ name: '负偏差',
|
|
|
+ type: 'scatter',
|
|
|
itemStyle: itemStyle,
|
|
|
data: right5[2],
|
|
|
symbolSize: function (data) {
|
|
|
- if ((data[1] > 0 && data[1] < 50) || data[1] == 50) {
|
|
|
+ if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
|
|
|
return 40;
|
|
|
- } else if ((data[1] > 50 && data[1] < 100) || data[1] == 100) {
|
|
|
+ } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
|
|
|
return 70;
|
|
|
- } else if (data[1] > 100) {
|
|
|
+ } else if (data[2] > 100) {
|
|
|
return 100;
|
|
|
}
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- echartR1d1.on("click", function (param) {
|
|
|
- // that.showChartLTipDouble(param.name)
|
|
|
- that.projectListTipShow = true;
|
|
|
- });
|
|
|
- echartR1d1.setOption(option);
|
|
|
- tools.loopShowTooltip(echartR1d1, option, {
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ that.rightEcharts1.setOption(option)
|
|
|
+ tools.loopShowTooltip(that.rightEcharts1, option, {
|
|
|
interval: 2000,
|
|
|
loopSeries: true,
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
initChartR2 () {
|
|
|
let that = this;
|
|
|
@@ -848,7 +805,6 @@ let app = new Vue({
|
|
|
that.right1Chart.on("showTip", (params) => {
|
|
|
that.r3Index = params.dataIndex;
|
|
|
that.initChartR3();
|
|
|
- console.log(that.r3Index);
|
|
|
// 如果是7或者15并且满足防抖则切换
|
|
|
if (
|
|
|
(params.dataIndex == 5 || params.dataIndex == 11) &&
|
|
|
@@ -984,6 +940,8 @@ let app = new Vue({
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
+ backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
+ borderColor: "rgba(50,50,50,0.7)",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
@@ -991,7 +949,6 @@ let app = new Vue({
|
|
|
fontSize: "28", // 文字字体大小
|
|
|
},
|
|
|
formatter: function (p) {
|
|
|
- console.log(p);
|
|
|
return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
|
|
|
},
|
|
|
},
|
|
|
@@ -1227,14 +1184,15 @@ let app = new Vue({
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
+ borderColor: "rgba(50,50,50,0.7)",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
|
|
|
fontSize: "28", // 文字字体大小
|
|
|
},
|
|
|
+
|
|
|
formatter: function (p) {
|
|
|
- console.log(p);
|
|
|
return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
|
|
|
},
|
|
|
},
|
|
|
@@ -3147,6 +3105,9 @@ let app = new Vue({
|
|
|
trigger: "item",
|
|
|
className: "custom-tooltip-box",
|
|
|
confine: true, // 不超出当前表
|
|
|
+ formatter: (e) => {
|
|
|
+ console.log('走了这里了', e)
|
|
|
+ }
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "value",
|
|
|
@@ -3475,6 +3436,7 @@ let app = new Vue({
|
|
|
confine: true, // 不超出当前表
|
|
|
|
|
|
formatter: (params, ticket, callback) => {
|
|
|
+ // console.log(params, '走了这里了')
|
|
|
// 清空所有轮播
|
|
|
for (var k in geoCoordMap) {
|
|
|
that.chinaMap.dispatchAction({
|
|
|
@@ -3523,20 +3485,47 @@ let app = new Vue({
|
|
|
</div>`;
|
|
|
},
|
|
|
},
|
|
|
- // regions: [
|
|
|
- // {
|
|
|
- // name: "南海诸岛",
|
|
|
- // itemStyle: {
|
|
|
- // // 隐藏地图
|
|
|
- // normal: {
|
|
|
- // opacity: 1, // 为 0 时不绘制该图形
|
|
|
- // },
|
|
|
- // },
|
|
|
- // label: {
|
|
|
- // show: true, // 隐藏文字
|
|
|
- // },
|
|
|
- // },
|
|
|
- // ],
|
|
|
+ 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",
|
|
|
@@ -3625,48 +3614,48 @@ let app = new Vue({
|
|
|
},
|
|
|
zlevel: 99,
|
|
|
},
|
|
|
- // {
|
|
|
- // type: "effectScatter",
|
|
|
- // colorBy: "data",
|
|
|
- // coordinateSystem: "geo",
|
|
|
- // data: [
|
|
|
- // {
|
|
|
- // name: "山西",
|
|
|
- // value: [112.44, 37.73],
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // symbolSize: function (val) {
|
|
|
- // return Math.max(val[2] / 500, 8);
|
|
|
- // },
|
|
|
- // showEffectOn: "emphasis",
|
|
|
- // rippleEffect: {
|
|
|
- // brushType: "stroke",
|
|
|
- // color: "#DF62F2",
|
|
|
- // },
|
|
|
- // hoverAnimation: true,
|
|
|
- // label: {
|
|
|
- // normal: {
|
|
|
- // formatter: "{b}",
|
|
|
- // position: "right",
|
|
|
- // show: true,
|
|
|
- // fontSize: "30",
|
|
|
- // color: "#fff",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // color: "#ffc809",
|
|
|
- // shadowBlur: 50,
|
|
|
- // shadowColor: "#ffc809",
|
|
|
- // },
|
|
|
- // emphasis: {
|
|
|
- // color: "#DF62F2",
|
|
|
- // shadowBlur: 50,
|
|
|
- // shadowColor: "#DF62F2",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // zlevel: 999,
|
|
|
- // },
|
|
|
+ {
|
|
|
+ type: "effectScatter",
|
|
|
+ colorBy: "data",
|
|
|
+ coordinateSystem: "geo",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: "山西",
|
|
|
+ value: [112.43, 37.73,5303, 80],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ symbolSize: function (val) {
|
|
|
+ return Math.max(val[2] / 500, 8);
|
|
|
+ },
|
|
|
+ showEffectOn: "emphasis",
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: "stroke",
|
|
|
+ color: "#DF62F2",
|
|
|
+ },
|
|
|
+ hoverAnimation: true,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: "{b}",
|
|
|
+ position: "right",
|
|
|
+ show: true,
|
|
|
+ fontSize: "30",
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#ffc809",
|
|
|
+ shadowBlur: 50,
|
|
|
+ shadowColor: "#ffc809",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: "#DF62F2",
|
|
|
+ shadowBlur: 50,
|
|
|
+ shadowColor: "#DF62F2",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ zlevel: 999,
|
|
|
+ },
|
|
|
],
|
|
|
};
|
|
|
var categoryData = [];
|
|
|
@@ -4520,11 +4509,32 @@ let app = new Vue({
|
|
|
this.leftEcharts14 = echarts.init(this.$refs["leftEcharts14"]);
|
|
|
option = {
|
|
|
tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
+ show: true,
|
|
|
+ trigger: "axis",
|
|
|
+ // formatter: (data) => {
|
|
|
+ // return `${data[0].name
|
|
|
+ // }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
|
|
|
+ // }"></span> ${data[0].seriesName}：${that.numFormat(
|
|
|
+ // data[0].value
|
|
|
+ // )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
|
|
|
+ // }"></span> ${data[1].seriesName}：${that.numFormat(
|
|
|
+ // data[1].value
|
|
|
+ // )}亿`;
|
|
|
+ // },
|
|
|
axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
+ borderColor: "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: "top",
|
|
|
textStyle: {
|
|
|
@@ -4608,8 +4618,8 @@ let app = new Vue({
|
|
|
name: '实际投资',
|
|
|
type: 'bar',
|
|
|
data: [18203, 23489, 29034, 104970, 131744, 630230],
|
|
|
- barGap: '-125%',
|
|
|
- barWidth: "20",
|
|
|
+ barGap: '-145%',
|
|
|
+ barWidth: "15",
|
|
|
zlevel: 10,
|
|
|
itemStyle: {
|
|
|
barBorderRadius: [0, 20, 20, 0],
|
|
|
@@ -4632,7 +4642,7 @@ let app = new Vue({
|
|
|
data: [19325, 23438, 31000, 121594, 134141, 681807],
|
|
|
barWidth: "30",
|
|
|
itemStyle: {
|
|
|
- barBorderRadius: [0, 20, 20, 0],
|
|
|
+ barBorderRadius: [0, 50, 50, 0],
|
|
|
borderColor: '#B78CFF',
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
{
|
|
|
@@ -4665,20 +4675,32 @@ let app = new Vue({
|
|
|
var maxArr = [100, 100, 100];
|
|
|
option = {
|
|
|
tooltip: {
|
|
|
+ show: true,
|
|
|
trigger: "axis",
|
|
|
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
- },
|
|
|
- formatter: function (params) { // params[0].data.nameCode
|
|
|
- let dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
|
|
|
- return (
|
|
|
- params[0].name +
|
|
|
- "<br>" +
|
|
|
- "杆塔数量 ：" +
|
|
|
- params[0].value
|
|
|
- );
|
|
|
- }
|
|
|
+ // formatter: (data) => {
|
|
|
+ // return `${data[0].name
|
|
|
+ // }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
|
|
|
+ // }"></span> ${data[0].seriesName}：${that.numFormat(
|
|
|
+ // data[0].value
|
|
|
+ // )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
|
|
|
+ // }"></span> ${data[1].seriesName}：${that.numFormat(
|
|
|
+ // data[1].value
|
|
|
+ // )}亿`;
|
|
|
+ // },
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
+ borderColor: "rgba(50,50,50,0.7)",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
+ fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
|
|
|
+ fontSize: "28", // 文字字体大小
|
|
|
+ },
|
|
|
},
|
|
|
+
|
|
|
grid: {
|
|
|
left: "4%",
|
|
|
right: "4%",
|
|
|
@@ -4816,10 +4838,9 @@ let app = new Vue({
|
|
|
// 回到中国地图
|
|
|
backChina () {
|
|
|
let that = this
|
|
|
- if(!this.mapShow){
|
|
|
+ if (!this.mapShow) {
|
|
|
return
|
|
|
}
|
|
|
- console.log(123123)
|
|
|
this.mapShow = false
|
|
|
that.leftEcharts12.dispose()
|
|
|
that.leftEcharts14.dispose()
|
zhbyyy