|
|
@@ -258,7 +258,7 @@ let app = new Vue({
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- initChartR1() {
|
|
|
+ initChartR1 () {
|
|
|
let that = this;
|
|
|
let sumA = 42;
|
|
|
let right5 = [[1, 2, 3, 4, 5, 6]];
|
|
|
@@ -374,35 +374,35 @@ let app = new Vue({
|
|
|
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',',
|
|
|
- },
|
|
|
- },
|
|
|
+ // 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%",
|
|
|
@@ -430,7 +430,7 @@ let app = new Vue({
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
// formatter: '{value}',
|
|
|
- formatter(data) {
|
|
|
+ formatter (data) {
|
|
|
if (data == 100 + sumA) {
|
|
|
return "100%";
|
|
|
} else if (data == -100 - sumA) {
|
|
|
@@ -602,8 +602,8 @@ let app = new Vue({
|
|
|
param.seriesName == "正偏差"
|
|
|
? 1
|
|
|
: param.seriesName == "容差"
|
|
|
- ? 2
|
|
|
- : 3;
|
|
|
+ ? 2
|
|
|
+ : 3;
|
|
|
that.rightAdd.projectStepCode = "";
|
|
|
that.projectNum = 313;
|
|
|
that.rightPenetrateTwo(
|
|
|
@@ -611,8 +611,8 @@ let app = new Vue({
|
|
|
param.seriesName == "正偏差"
|
|
|
? 1
|
|
|
: param.seriesName == "容差"
|
|
|
- ? 2
|
|
|
- : 3,
|
|
|
+ ? 2
|
|
|
+ : 3,
|
|
|
that.findCode(param.name),
|
|
|
"right"
|
|
|
);
|
|
|
@@ -626,7 +626,7 @@ let app = new Vue({
|
|
|
loopSeries: true,
|
|
|
});
|
|
|
},
|
|
|
- initChartR2() {
|
|
|
+ initChartR2 () {
|
|
|
let that = this;
|
|
|
that.right2Chart = echarts.init(this.$refs["echartR2"]);
|
|
|
let option = {
|
|
|
@@ -746,7 +746,7 @@ let app = new Vue({
|
|
|
};
|
|
|
that.right2Chart.setOption(option);
|
|
|
},
|
|
|
- clickItem(index) {
|
|
|
+ clickItem (index) {
|
|
|
console.log(index);
|
|
|
const angle = 360 / this.investData.investList.length;
|
|
|
this.witchs = index;
|
|
|
@@ -754,7 +754,7 @@ let app = new Vue({
|
|
|
this.innerDeg = this.witchs * angle;
|
|
|
this.lpRotate();
|
|
|
},
|
|
|
- lpRotate() {
|
|
|
+ lpRotate () {
|
|
|
const angle = 360 / this.investData.investList.length;
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = setInterval(() => {
|
|
|
@@ -765,7 +765,7 @@ let app = new Vue({
|
|
|
this.innerDeg = this.inner * angle;
|
|
|
}, 2000);
|
|
|
},
|
|
|
- filterLpData() {
|
|
|
+ filterLpData () {
|
|
|
const angle = 360 / this.investData.investList.length;
|
|
|
for (let i in this.investData.investList) {
|
|
|
this.investData.investList[i].deg = i * angle;
|
|
|
@@ -2101,6 +2101,7 @@ let app = new Vue({
|
|
|
that.leftEcharts8.setOption(option)
|
|
|
},
|
|
|
chinaEchartsFun () {
|
|
|
+ let that = this
|
|
|
this.geoCoordMap = []
|
|
|
/*获取地图数据*/
|
|
|
this.shanxiMap = echarts.init(this.$refs['shanxi'])
|
|
|
@@ -2255,50 +2256,59 @@ let app = new Vue({
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
+ className: 'custom-tooltip-box',
|
|
|
+ confine: true, // 不超出当前表
|
|
|
formatter: function (params) {
|
|
|
- console.log(params, '??????????')
|
|
|
- }
|
|
|
- },
|
|
|
- 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
|
|
|
+ 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>`
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- areaColor: {
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#3844aa' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#7284fc' // 100% 处的颜色
|
|
|
- }],
|
|
|
- },
|
|
|
- borderColor: '#b3baff',
|
|
|
- borderWidth: 5
|
|
|
- }
|
|
|
},
|
|
|
+ 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: '太原市',
|
|
|
@@ -2398,6 +2408,66 @@ let app = new Vue({
|
|
|
data: categoryData
|
|
|
},
|
|
|
series: [
|
|
|
+ {
|
|
|
+ type: 'map',
|
|
|
+ map: 'china',
|
|
|
+ geoIndex: 1,
|
|
|
+ // aspectScale: 1.5, //长宽比
|
|
|
+ showLegendSymbol: true, // 存在legend时显示
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: 'red',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ roam: true,
|
|
|
+ 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,
|
|
|
+ },
|
|
|
{
|
|
|
type: 'effectScatter',
|
|
|
coordinateSystem: 'geo',
|
|
|
@@ -2427,7 +2497,7 @@ let app = new Vue({
|
|
|
fontSize: "500",
|
|
|
}
|
|
|
},
|
|
|
- zlevel: 1
|
|
|
+ // zlevel: 0
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -2439,7 +2509,6 @@ let app = new Vue({
|
|
|
barData.push(data[i].value);
|
|
|
sum += data[i].value;
|
|
|
}
|
|
|
- let that = this
|
|
|
// this.shanxiMap.on('click', function (params) {
|
|
|
// if (params.name == '山西') {
|
|
|
// that.shanxiMap.dispose()
|
zhbyyy