let app = new Vue({
el: "#app",
data () {
return {
count: 0, //重点项目两线指标轮到哪个
list: [], //重点项目两线指标数组
countType: 0, //重点项目两线指标数组
mapShow: true, // false为中国地图 true为山西地图
titleUrl: '',// 标题弹窗显示的内容
titleName: '', // 弹窗的名字显示
leftEcharts1: "",
leftEcharts2: "",
leftEcharts3: "",
leftEcharts4: "",
leftEcharts5: "",
leftEcharts6: "",
leftEcharts7: "",
leftEcharts8: "",
leftEcharts9: "",
leftEcharts10: "",
leftEcharts11: "",
leftEcharts12: '',
leftEcharts13: '',
leftEcharts14: '',
leftEcharts15: '',
leftEcharts17: '', //投资产业分布中间的水球图
leftEcharts18: '', //单个柱状图弹窗
tipShow1: false, // 标题弹窗显示
tipShow2: false, // 单柱状图弹窗
stageTitle: '', // 管理类型分析圆环图内容
stageTitle2: '', // 管理类型分析圆环图内容
stageTitle3: '', // 投资产业分析圆环图内容
stageTitle4: '', // 投资产业分析圆环图内容
echartR2Fd: true, // 投后进度成本偏差防抖
leftEcharts16: '', // 中国地图背景地球
rightEcharts1: '', // 投后进度成本偏差
shanxiMap: "", // 山西地图
chinaMap: '', // 中国地图
industryProportion: 1, // 主辅业占比轮播
industryLayout: 0, //产业布局分析
time1: "", // 4秒定时器
time2: "", // 针对投前产业布局分析的定时器
projectNum: 0, // 项目阶段分析指示器
commonUrl: '',//获取当前服务器地址
radarNum: '', // 雷达图样式
projecList: [ //项目阶段分析内容距离 特别监管15~35 备案类50~70
[
{ name: '特别监管', value: '14', value2: '12.05', top: 0 },
{ name: '备案', value: '27', value2: '23.86', top: 0 },
{ name: '项目储备', distance: '250px' }
],
[
{ name: '特别监管', value: '2', value2: '1.25', top: 22 },
{ name: '备案', value: '1', value2: '1.05', top: 23 },
{ name: '项目立项', distance: '370px' }
],
[
{ name: '特别监管', value: '10', value2: '32.69', top: 24 },
{ name: '备案', value: '14', value2: '18.46', top: 25 },
{ name: '可研论证', distance: '490px' }
],
[
{ name: '特别监管', value: '15', value2: '28.53', top: 26 },
{ name: '备案', value: '40', value2: '38.86', top: 27 },
{ name: '投资决策', distance: '610px' }
],
[
{ name: '特别监管', value: '9', value2: '6.49', top: 28 },
{ name: '备案', value: '39', value2: '8.08', top: 29 },
{ name: '项目储备', distance: '350px' }
],
[
{ name: '特别监管', value: '12', value2: '12.63', top: 30 },
{ name: '备案', value: '7', value2: '1.83', top: 31 },
{ name: '项目立项', distance: '470px' }
],
[
{ name: '特别监管', value: '2', value2: '0.10', top: 32 },
{ name: '备案', value: '19', value2: '1.01', top: 33 },
{ name: '可研论证', distance: '590px' }
],
[
{ name: '特别监管', value: '27', value2: '15.52', top: 34 },
{ name: '备案', value: '73', value2: '17.65', top: 35 },
{ name: '投资决策', distance: '710px' }
],
],
year: '', // 选择的年份
pollList: [], // 年份有哪些呢
pullShow: false, // 选择年份弹窗
storageRecordConfig: {
waitTime: "10000",
hoverPause: true,
header: ["企业集团", "项目名称", "投资金额"],
headerHeight: 80,
headerBGC: '#69C0FF20',
oddRowBGC: '#011e4800',
evenRowBGC: '#011e4800',
// oddRowBGC: '#05507b33',
rowNum: 6,
columnWidth: [150, 450, 150],
align: ["center", "center", "center"],
data: [
['华阳新材', '华钠铜(碳)年产万吨级钠离子电池正负极材料项目', '11.42亿'],
['太重集团', '太重退城入园智能高端装备生产线升级改造项目', '18.11亿'],
['太重集团', '太重智能高端液压挖掘机项目', '17.82亿'],
['太重集团', '太重(大同)高端起重机产业基地二期项目', '1.62亿'],
['太重集团', '太重液压挖掘机四轮一带项目', '4.00亿'],
['太重集团', '太重中大型工程起重机智能制造项目', '8.30亿'],
['太重集团', '太重高端工程机械齿轮箱智能制造项目', '3.55亿'],
['云时代', '侯马北铜年处理铜精矿150万吨综合回收项目', '27.70亿'],
['交控集团', '山西固废资源化利用交通科技园项目', '2.00亿'],
['云时代', '北方铜业铜矿峪矿园子沟尾矿库项目', '16.73亿'],
['山西建投', '山西综改示范区潇河产业园区建筑垃圾资源化处理项目', '3.90亿'],
['云时代', '山西北铜高性能压延铜带箔和覆铜板项目', '23.96亿'],
['大地控股', '大地控股忻州新店年产800万吨精品砂石骨料项目', '8.70亿'],
['山西建投', '山西建投晋西北建筑产业园区项目', '6.71亿'],
['山西建投', '山西建投长治建筑产业园区一期项目', '4.98亿'],
['汾酒集团', '汾青基地2万吨原酒酿造一期项目', '14.80亿'],
['文旅集团', '忻州清凉湾温泉康养项目', '9.34亿'],
['交控集团', '山西路桥数字化交通产业园(南区)项目', '32.10亿'],
['山西建投', '山西农谷智慧冷链物流园项目', '5.49亿'],
['华新燃气', '大同液化调峰储备集散中心二期项目', '1.50亿'],
['神农科技', '天镇万头奶牛智慧牧场项目', '5.67亿'],
['晋能控股', '阳泉郊区西上庄煤矿项目', '52.56亿'],
['华阳新材', '和顺泊里矿井及选煤厂项目', '67.00亿'],
['华阳新材', '寿阳七元煤矿项目', '50.77亿'],
['山西焦煤', '沁源中峪煤矿项目', '87.69亿'],
['晋能控股', '晋城兴唐车寨煤矿及选煤厂项目', '27.52亿'],
['晋能控股', '阳城龙湾矿井及选煤厂项目', '69.28亿'],
['晋能控股', '沁水东大矿井及选煤厂项目', '62.46亿'],
['晋能控股', '沁水郑庄矿井及选煤厂项目', '83.06亿'],
['山西焦煤', '乡宁谭坪煤矿一期项目', '56.62亿'],
['山西焦煤', '灵石灵北煤矿及选煤厂项目', '66.27亿'],
['晋能控股', '晋控电力同热三期2x100万千瓦“上大压小”煤电项目', '72.67亿'],
['山西焦煤', '山煤集团河曲2x35万千万低热值煤发电项目', '33.30亿'],
['华阳新材', '西上庄低热值煤发电项目', '53.85亿'],
['华新燃气', '阳城煤层气集输中心(町店配气站二期扩容改造)项目', '2.50亿'],
['交控集团', '高速公路充电桩建设项目', '3.10亿'],
['交控集团', '三个一号旅游公路和“四好农村路”沿线充电桩建设项目', '7.10亿'],
['山西建投', '山西省静态交通大数据平台项目', '1.00亿'],
['华远陆港', '集宁经大同至原平铁路项目', '248.21亿'],
['华远陆港', '雄安新区至忻州高速铁路山西段项目', '192.06亿'],
['华远陆港', '阳涉铁路开通客运服务项目', '6.60亿'],
['交控集团', '昔阳(晋冀界)至榆次高速公路项目', '209.86亿'],
['交控集团', '青银二广高速公路太原联络线项目', '72.88亿'],
['交控集团', '晋阳高速公路改扩建工程', '62.02亿'],
['交控集团', '青兰国家高速公路长治至延安联络线(G2211)山西境黎城至霍州段项目', '231.10亿'],
['交控集团', '汾阳至石楼高速公路项目', '117.14亿'],
['交控集团', '呼北国家高速公路离石至隰县段项目', '104.90亿'],
['交控集团', '临汾至沁水高速公路临汾至浮山段项目', '19.70亿'],
['交控集团', 'G108线重点路段新建改建工程(含2个子项目)', '130.19亿'],
['交控集团', '国道241、省道岚马线汾河水库段改线工程', '41.71'],
['交控集团', 'G241阳方口至朔州段和G336朔州至平鲁段公路改扩建工程PPP项目', '16.38亿'],
['交控集团', 'G336线应县罗庄至朔城区东榆林改扩建工程', '23.17亿'],
['航产集团', '太原武宿(国际)机场三期改扩建项目', '239.28亿'],
['航产集团', '太原武宿(国际)机场三期改扩建综合交通中心配套项目', '7.62亿'],
['山西建投', '大盂产业新城标准化厂房基础设施一期项目', '11.63亿'],
['水控集团', '滹沱河供水工程', '12.80亿'],
['水控集团', '全省县域水网及城乡供水一体化首批项目', '240.00亿'],
['水控集团', '小浪底引黄(灌区、工业及城镇生活供水)工程', '27.30亿'],
['水控集团', '阳泉龙华口调水工程', '20.30亿'],
['水控集团', '万家寨引黄北干支线工程', '15.63亿'],
['水控集团', '万家寨引黄入晋总干线南干线泵站二期扩机项目', '15.00亿'],
['交控集团', '智慧交通山西省实验室项目', '1.20亿'],
['交控集团', '山西隧道与地下工程研究中心项目', '1.50亿'],
['华舰体育', '山西体育职业学院新校区项目', '12.76亿'],
['华舰体育', '屯留沙家庄航空产教融合实训基地项目', '2.08亿'],
['太重集团', '太重智能高端装备产业园区基础设施及厂房配套项目', '55.87亿'],
['交控集团', '山西综改示范区中小企业产业园一期项目', '13.70亿'],
['山西焦煤', '临县三交一号煤矿项目', '80.53亿'],
['山西焦煤', '中阳吴家峁矿井及选煤厂项目', '60.21亿'],
['华阳新材', '华阳云冈千吨级高性能碳纤维一期示范项目', '6.40亿']
],
},
storageRecordConfig2: {
header: ['企业集团', '项目名称', '项目阶段', '投资金额'],
headerBGC: '#69C0FF20',
oddRowBGC: '#011e4800',
evenRowBGC: '#69C0FF20',
headerHeight: '80',
rowNum: 6,
// columnWidth: [250],
align: ['center', 'center', 'center'],
data: dataList2
},
meansList: [
{
label: "初步设计",
value: "106",
},
{
label: "详细设计",
value: "103",
},
{
label: "开工",
value: "62",
},
{
label: "竣工",
value: "35",
},
{
label: "验收",
value: "42",
},
{
label: "结算",
value: "33",
},
],
stockRightList: [
{
label: "前期准备",
value: "17",
},
{
label: "变更登记",
value: "43",
},
],
costList: [
{
num: 160,
value: 500,
status: "正偏差",
},
{
num: 28,
value: 264,
status: "容差内",
},
{
num: 103,
value: 182,
status: "负偏差",
},
],
investData: {
investList: [
{
name: "大地控股",
yse: "189.07",
yqhte: "121.59",
czrde: "189.07",
jse: "121.59",
fke: "189.07",
url: "./img/logos/logo15.png",
},
{
name: "云时代",
yse: "385.25",
yqhte: "224.89",
czrde: "385.25",
jse: "224.89",
fke: "385.25",
url: "./img/logos/logo16.png",
},
{
name: "华舰体育",
yse: "82.95",
yqhte: "71.34",
czrde: "82.95",
jse: "71.34",
fke: "82.95",
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: "31.83",
yqhte: "25.20",
czrde: "31.83",
jse: "25.20",
fke: "31.83",
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: "80.01",
yqhte: "42.46",
czrde: "80.01",
jse: "42.46",
fke: "80.01",
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: "97.57",
yqhte: "112.67",
czrde: "97.57",
jse: "112.67",
fke: "97.57",
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: "46.99",
yqhte: "50.89",
czrde: "46.99",
jse: "50.89",
fke: "46.99",
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: "41.09",
yqhte: "42.67",
czrde: "41.09",
jse: "42.67",
fke: "41.09",
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: "47.05",
yqhte: "23.93",
czrde: "47.05",
jse: "23.93",
fke: "47.05",
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: "14.76",
yqhte: "5.84",
czrde: "14.76",
jse: "120.13",
fke: "5.84",
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",
},
],
},
riskData: {
x: [
{ name: "大地控股", value: [14, 13, 6, 15, 13, 4] },
{ name: "云时代", value: [15, 12, 12, 10, 24, 6] },
{ name: "华舰体育", value: [14, 13, 6, 15, 13, 4] },
{ name: "神农科技", value: [14, 13, 6, 17, 13, 4] },
{ name: "山西焦煤", value: [14, 13, 6, 15, 13, 4] },
{ name: "晋能控股", value: [14, 13, 6, 17, 13, 4] },
{ name: "华阳新材", value: [14, 13, 6, 15, 13, 4] },
{ name: "潞安化工", value: [14, 13, 6, 15, 13, 4] },
{ name: "华新燃气", value: [14, 13, 6, 17, 13, 4] },
{ name: "太重集团", value: [14, 13, 6, 15, 13, 4] },
{ name: "国际能源", value: [14, 13, 6, 15, 13, 4] },
{ name: "华远陆港", value: [14, 13, 6, 15, 17, 4] },
{ name: "水控集团", value: [14, 13, 6, 15, 13, 4] },
{ name: "文旅集团", value: [14, 13, 6, 15, 13, 4] },
{ name: "交控集团", value: [14, 13, 6, 15, 17, 4] },
{ name: "航产集团", value: [14, 13, 6, 15, 13, 4] },
{ name: "山西建投", value: [14, 13, 6, 15, 13, 24] },
{ name: "汾酒集团", value: [14, 13, 6, 15, 13, 4] },
],
y1: [
12, 11, 20, 22, 12, 34, 32, 12, 23, 23, 12, 13, 12, 11,
20, 22, 12, 34,
],
y2: [
12, 13, 11, 25, 14, 36, 22, 18, 26, 13, 16, 17, 16, 11,
26, 26, 19, 37,
],
y3: [
16, 21, 29, 24, 22, 45, 23, 23, 33, 34, 23, 43, 20, 10,
20, 20, 23, 45,
],
},
inner: 0,
innerDeg: 0,
timer: null, // 两秒定时器
witchs: 0,
topIndex: 0,
echartR1Fd1: true,
echartR2Fd2: true,
echartC1Fd1: true,
r3Index: 0,
riskData1: {
x: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
y1: [
36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53
],
y2: [
110, 41, 35, 81, 56, 10, 9, 8, 7, 6, 5, 4, 6, 7, 8,
9, 4, 3,
],
y3: [
130, 76, 67, 120, 89, 111, 87, 123, 66, 65, 65, 98, 230, 78, 99, 130,
68, 98,
],
y4: [
90, 50, 50, 50, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 51, 52,
53, 54,
],
y5: [
33, 32, 31, 31, 32, 33, 34, 34, 35, 36, 37, 38, 39, 33, 34,
35, 36, 37,
],
}
};
},
created () {
},
beforeDestroy () {
clearInterval(this.timer);
clearInterval(this.time1);
clearInterval(this.time2);
},
mounted () {
this.getUrlParams()
this.countYear()
},
methods: {
// 计算项目阶段分析对应区间
countSection () {
let topList = []
let bottomList = []
this.projecList.forEach(item => {
topList.push(item[0].value2)
bottomList.push(item[1].value2)
})
let minTop = Math.min(...topList)
let maxTop = Math.max(...topList)
let minTop2 = Math.min(...bottomList)
let maxTop2 = Math.max(...bottomList)
let res = ''
let res2 = ''
this.projecList.forEach(item => {
res = (Number(item[0].value2) - minTop)/(maxTop - minTop) * 20 + 15
res2 = (Number(item[1].value2) - minTop2)/(maxTop2 - minTop2) * 20 + 50
this.$set(item[0],'top',Math.round(50-res))
this.$set(item[1],'top',Math.round(120-res2))
})
},
// 获取地址栏参数
getUrlParams (id) {
let url = window.location.href
this.commonUrl = window.location.href.split('/')
this.commonUrl.pop()
this.commonUrl = this.commonUrl.join('/')
// 通过 ? 分割获取后面的参数字符串
let urlStr = url.split('?')[1]
if (!urlStr) {
this.comeIn()
return
}
// 创建空对象存储参数
let obj = {};
// 再通过 & 将每一个参数单独分割出来
let paramsArr = urlStr.split('&')
for (let i = 0, len = paramsArr.length; i < len; i++) {
// 再通过 = 将每一个参数分割为 key:value 的形式
let arr = paramsArr[i].split('=')
obj[arr[0]] = arr[1];
}
if (obj.model) {
obj.model == 'A' || obj.model == 'a' ? this.mockData = false : this.mockData = true
}
obj.env && (this.env = obj.env)
this.goUrl = (obj.env == 'SIT' || obj.env == 'sit') ? '172.21.3.68:8081' : (obj.env == 'UAT' || obj.env == 'uat') ? '172.21.3.149:8081' : '172.21.3.242:8081'
this.accountId = obj.accountid
this.comeIn()
},
// 计算展示的年份
countYear () {
this.year = new Date().getFullYear()
for (i = 2022; true; i++) {
if (i == this.year + 3) {
this.pollList.push(i)
return
} else {
this.pollList.push(i)
}
}
},
comeIn () {
let that = this
this.time4s();
this.timeNs();
this.filterLpData();
this.lpRotate();
setTimeout(() => {
if (that.mapShow) {
that.leftEcharts17Fun()
that.leftEcharts12Fun()
that.leftEcharts14Fun()
that.leftEcharts9Fun()
that.leftEcharts15Fun()
that.leftEcharts13Fun()
that.shanxiEchartsFun()
} else {
that.chinaEchartsFun()
that.leftEcharts16Fun() // 中国地图背景地球
}
this.changeTopColor()
this.leftEcharts1Fun();
this.leftEcharts2Fun();
this.leftEcharts3Fun();
this.leftEcharts4Fun();
this.leftEcharts5Fun();
this.leftEcharts6Fun();
this.leftEcharts7Fun();
this.leftEcharts8Fun();
this.leftEcharts10Fun();
this.countSection();
// this.leftEcharts11Fun();
this.rightEcharts1Fun();
this.initChartR2();
this.initChartR4();
});
},
// 解决除法是去精度
numDiv (num1, num2) {
var baseNum1 = 0, baseNum2 = 0;
var baseNum3, baseNum4;
try {
baseNum1 = num1.toString().split(".")[1].length;
} catch (e) {
baseNum1 = 0;
}
try {
baseNum2 = num2.toString().split(".")[1].length;
} catch (e) {
baseNum2 = 0;
}
with (Math) {
baseNum3 = Number(num1.toString().replace(".", ""));
baseNum4 = Number(num2.toString().replace(".", ""));
return (baseNum3 / baseNum4) * pow(10, baseNum2 - baseNum1);
}
},
// 解决乘法失去精度
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 => {
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.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
setTimeout(() => {
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)
}, 1900);
// 如果是17表示到了最后一个,那么重新来一遍
} else if (params.dataIndex == 17 && that.echartR2Fd) {
that.echartR2Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = 0
option.dataZoom[0].startValue = 5
that.rightEcharts1.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR2Fd = true
}, 2000)
}, 1900)
}
})
let option = {
color: [{
type: 'radial', // linear 线性渐变 radial径向渐变
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#58F7DF' // 0% 处的颜色
}, {
offset: 1, color: '#4ECFBB' // 100% 处的颜色
}]
},
{
type: 'radial', // linear 线性渐变 radial径向渐变
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#7FD9FF' // 0% 处的颜色
}, {
offset: 1, color: '#40A9FF' // 100% 处的颜色
}]
}, {
type: 'radial', // linear 线性渐变 radial径向渐变
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#FF9592' // 0% 处的颜色
}, {
offset: 1, color: '#D2706D' // 100% 处的颜色
}]
}
],
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,
data: ['正偏差', '容差', '负偏差'],
textStyle: {
fontSize: 20,
color: '#fff',
fontFamily: 'Microsoft YaHei'
}
},
textStyle: {
color: '#fff',
},
tooltip: {
show: true,
trigger: "axis",
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: data => {
return `${data[0].value[0]}
${data[0].seriesName}:${that.numFormat(data[0].data[2])}亿
${data[1].seriesName}:${that.numFormat(data[1].data[2])}亿
${data[2].seriesName}:${that.numFormat(data[2].data[2])}亿`
},
axisPointer: {
// // type: 'cross',',
},
},
grid: {
top: '10%',
right: '7%',
left: '7%',
bottom: '5%',
},
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: 40,
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.rightEcharts1.setOption(option)
tools.loopShowTooltip(that.rightEcharts1, option, {
interval: 2000,
loopSeries: true,
})
},
initChartR2 () {
let that = this;
that.right1Chart = echarts.init(this.$refs["echartR2"]);
that.right1Chart.on("showTip", (params) => {
// 如果是7或者15并且满足防抖则切换
if (
(params.dataIndex == 5 || params.dataIndex == 11) &&
that.echartR1Fd1
) {
that.echartR1Fd1 = false;
setTimeout(() => {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
that.right1Chart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR1Fd1 = true;
}, 2000);
}, 1900);
// 如果是17表示到了最后一个,那么重新来一遍
} else if (params.dataIndex == 17 && that.echartR1Fd1) {
that.echartR1Fd1 = false;
setTimeout(() => {
option.dataZoom[0].endValue = 0;
option.dataZoom[0].startValue = 5;
that.right1Chart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR1Fd1 = true;
}, 2000);
}, 1900);
}
});
let option = {
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#07806E", // 0% 处的颜色
},
{
offset: 1,
color: "#79FFEB", // 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: "#91231F", // 0% 处的颜色
},
{
offset: 1,
color: "#F98784", // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
],
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: {
top: 10,
right: 10,
textStyle: {
fontSize: 20,
color: "#fff",
fontFamily: "Microsoft YaHei",
},
itemStyle: {
borderCap: "round",
},
},
tooltip: {
trigger: "item",
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',倾斜字体)
fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
fontSize: "28", // 文字字体大小
},
formatter: function (p) {
that.r3Index = p.dataIndex;
if (Math.max(...that.riskData.x[p.dataIndex].value) > 15) {
that.radarNum = 3
} else {
that.radarNum = 2
}
that.echartR3 && that.echartR3.dispose()
that.initChartR3();
return `${p.name}
低风险:${that.riskData.y1[p.dataIndex]}个
中风险:${that.riskData.y2[p.dataIndex]}个
高风险:${that.riskData.y3[p.dataIndex]}个
`
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: that.riskData.x.map((item) => item.name),
axisLine: {
show: true,
lineStyle: {
color: "rgba(0, 80, 148, .8)",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
rotate: 20,
fontSize: 22,
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
color: "#fff",
fontSize: 22,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(104, 180, 221, .2)",
type: "dashed",
},
},
},
],
series: [
{
name: "低风险",
type: "bar",
stack: "Ad",
barWidth: 14,
emphasis: {
focus: "series",
},
itemStyle: {
barBorderRadius: [15, 15, 15, 15],
},
data: that.riskData.y1,
},
{
name: "中风险",
type: "bar",
barWidth: 14,
stack: "Ad",
itemStyle: {
barBorderRadius: [15, 15, 15, 15],
},
emphasis: {
focus: "series",
},
data: that.riskData.y2,
},
{
name: "高风险",
type: "bar",
barWidth: 14,
stack: "Ad",
itemStyle: {
barBorderRadius: [15, 15, 15, 15],
},
emphasis: {
focus: "series",
},
data: that.riskData.y3,
},
],
};
that.right1Chart.setOption(option);
tools.loopShowTooltip(that.right1Chart, option, {
interval: 2000,
loopSeries: true,
});
},
initChartR3 () {
let that = this;
that.right3Chart = echarts.init(this.$refs["echartR3"]);
let option = {
radar: {
// shape: 'circle',
splitNumber: that.radarNum,
splitLine: {
lineStyle: {
color: that.radarNum == 3 ? ["#C25253", "#45C9B5", "#D1B83A"] : ["#D1B83A", "#45C9B5"],
},
},
name: { //修改indicator文字的颜色
textStyle: {
fontSize: 20
}
},
axisLine: { // 设置雷达图中间射线的颜色
lineStyle: {
color: '#fff',
},
},
splitArea: {
areaStyle: {
color: that.radarNum == 3 ? [
"rgba(88,247,223,0.2)",
"rgba(255, 224, 54, 0.2)",
"rgba(221,89,85,0.3)",
] : [
"rgba(88,247,223,0.2)",
"rgba(255, 224, 54, 0.2)",
],
},
},
indicator: [
{ name: "安全风险", max: that.radarNum == 3 ? 25 : 15 },
{ name: "付款风险", max: that.radarNum == 3 ? 25 : 15 },
{ name: "合同风险", max: that.radarNum == 3 ? 25 : 15 },
{ name: "结算风险", max: that.radarNum == 3 ? 25 : 15 },
{ name: "进度风险", max: that.radarNum == 3 ? 25 : 15 },
{ name: "质量风险", max: that.radarNum == 3 ? 25 : 15 },
],
},
series: [
{
name: "风险",
type: "radar",
symbol: "circle",
label: {
show: true,
formatter: function (params) {
return params.value;
},
fontSize: 24,
color: "#68BDFF",
},
data: [
{
value: that.riskData.x[that.r3Index].value,
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"]);
that.right4Chart.on("showTip", (params) => {
// 如果是7或者15并且满足防抖则切换
if (
(params.dataIndex == 5 || params.dataIndex == 11) &&
that.echartR2Fd2
) {
that.echartR2Fd2 = false;
setTimeout(() => {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
that.right4Chart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR2Fd2 = true;
}, 2000);
}, 1900);
// 如果是17表示到了最后一个,那么重新来一遍
} else if (params.dataIndex == 17 && that.echartR2Fd2) {
that.echartR2Fd2 = false;
setTimeout(() => {
option.dataZoom[0].endValue = 0;
option.dataZoom[0].startValue = 5;
that.right4Chart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR2Fd2 = true;
}, 2000);
}, 1900);
}
});
let option = {
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, //鼠标滚轮触发滚动
},
],
title: {
text: "企业后评价执行情况",
left: "center",
textStyle: {
color: "#fff",
fontSize: 32,
},
},
tooltip: {
trigger: "item",
show: true,
position: "top",
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
borderColor: "rgba(50,50,50,0.7)",
confine: true,
textStyle: {
color: "#fff",
fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
fontSize: "28", // 文字字体大小
},
formatter: function (p) {
return `${p.name}
首次评价:应开展${that.riskData1.y1[p.dataIndex]}个,已完成${that.riskData1.y2[p.dataIndex]}个
再次评价:应开展${that.riskData1.y3[p.dataIndex]}个,已完成${that.riskData1.y4[p.dataIndex]}个,达标${that.riskData1.y5[p.dataIndex]}个`
},
},
legend: {
show: true,
textStyle: {
fontSize: 20,
color: "#fff",
},
inactiveColor: "#fff",
// itemHeight: 20,
top: "15%",
backgroundColor: "transparent",
data: [
{
name: "应首评项目数",
// icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWdJREFUOE+N0k8og3EYB/Dvs8P8CSlTxJGD8u+yTYmNm0gJQznIQRxMoV2cXWSKCznIQdk7SkmOEomNg41y4EjURkLZFI/ed3vX+5v82nt4357n9/s8Pe/v9xCST6+fzVHGKAMDAKqT6WsCNi2ElS0Xfak5Ul+tfi77YewBqNcLpH0vTYSOAxc9kFo5wghINus2lJMPOzl8PE6EpX8qC2lmuMmp8CmABn3FVgJ4bIloLggEnwRzRg6F4wSY9fR2J1CUnYieY0DPrgDiUvASA7pF8PGnJXsp4LEC3wx4L4DAY1pLLQq7GVjM5KcJmKC2fc76fNeOtU6GmBDOzYMt04sLmQjt2sUZRyMCjAEYBKNKyxNuAGwUA8vCaBhbcSrMxviwj1JFU7Nk3NC49iqAk+FCObAu3AngfLJCDmpmjgVwNdskB5UjPgHcrvbLQXmXVwD3O1NyYGmeFkD0aF4OCmqHBPAWXhfAL4WqeuKVsFKCAAAAAElFTkSuQmCC",
},
{
name: "已完成首评项目数",
// icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAXFJREFUOE+V0kFLAkEUB/D/G9eW3UN1sFPYNaJAu2R0Coog8mq0fQH1kEVBhz5Ah6CoLhrdE/LqKQo6VZ7SKCKChKRTBRmhbq47oabsZC22h1nem/k93jCP8P0F+E2HQ1dD4NAAGqqn+TUI8YpciCVo8LOaoeoSKOR6GTOSxOFtFLD+OSFtmpI/obqfqFqZ6Wrqr8NNyJHJK4aPtNLDAue0+1vlnzkiHqG5YvYcwGhj08MUhJyuWhgrvyBjFq3uogp0AB2NbFR2o5sctfCNVxDWc1ag/xPQR0tLXqYg6HTBBMd++RXplpZK2Qg4dtq5NAiLNM3v5a6ilALBY4s4rvKKMdLWw4EjU4E0U3s462gwXQ3DMLeJsfpgmCYgsSVTLkSF0bC24r9NcWucHPA1izZnyXpg8vRIAMfjU/ZgLH4ogDNt1h4Mb8YEcLkSsgf9y+sCuNtaswd92qoAHuMb9qBnIiiA55M9e9DpnRfAe/pAAF9gqJXUYWdYUwAAAABJRU5ErkJggg==",
},
{
name: "应再评项目数",
// icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAV5JREFUOE+V0j8oxGEYwPHvo/wMjgyUslAWcTFhMRiEsHLKYDzFKZRBSskgR7mUG29QjpX86QaDwdlwLotiUYpB/gyHPDru9HsPP+c3vL+e530/T8/b+wipb31KrYJ8vAi9QE0qfYqy+vBEsHtKnpM5SS4bC1qW+8amQl26gP0vcPSSQ2fXiFxJsnKhi8PfDtvgsVo0yJZfhwQCP1XOzCn4ZNuvB0BjerO4HNxtn1FsB24vDRZNggRgpdPNXsjL/4wST7AXNEDiv+DxW0slFVDTCvoG8QjcXGS2NKc+hMVsLo0yLFsBzZNnDoHaP9CJWtRn9XDA8WsOHR8PZx+NQhcDqvQhVH3klTMRVu4fWTZGw97Ktl/VHrePyVfRr1myHwhP3xnAM1nkDJbGzw0wOFvpDCa8+waYCTY5g/6esAFCax5n0NI6b4DI7qgzcDeOGSAW9TuD0up+A1zHQwZ4B2JrgI9r4uMDAAAAAElFTkSuQmCC",
},
{
name: "已完成再评项目数",
// icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE9jZICC/1e12Rh4uDIY/jNGMjAw6ECFrzAw/l/O8OXbDEbtq79AYowg4v9jS2mGv3+3MDAwGMAMQKMvMDAz+zDKHn/KCDaZm/skHsUwvRcZfr8zZ/z/0CyX4T/DJBwmowozMuQx/n9gdpyBgcECLsNpycAgXAPhvm1hYPgOkoaDEyANPxkYGNjgQjJbGRiYRSDcv28YGJ54I2v4SUDDWwaGJ17IGr5gcZIV1El/GRjetjMwfD+G5qSHpnkM/xknEufp//mM/2+rsDOwCoGCVZ+ApksMv9+ZERtxFxmYmb3BEYeaNHgyGf7/j2FgYNCEil9nYGRcwvDly3SUpIHslP8PzP4j8xkVTsENhaclZAWvLligaBAzOIFfw9ld1igajN2O4tewar49ioawxIP4NbQ0OqNoqKnfi19DXIoHioZFc3bg12Dt6YOi4ej2Lfg1yBn7o2h4dHYjigYAb0t88hVwEBYAAAAASUVORK5CYII=",
},
{
name: "再评达标项目数",
// icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE+V0k8og2EcwPHvkzVZLLm6KItEzWlclIPbdhGKcsCJwzZFdtgOK+8OimIXTjgoSrisXByUgz8nE4mmXFwlZmuaPXr3r/eZ9sZ7eN9+v/f5/J6n3/MTFJ9wWFpTFqYFjAFdxfSthF1blo1wWHzpOaG/gppszkIM6C4VqPheW8ATCYkXoVdOW7g0WVyy8ZSdHhFYlF4E0SqV1bTEJwKaPAd6S3/aWmHEU4j2Y/D4pJgLHWQAaykd9ENDfSH6SEJkTQGZ/4LkryO1O2DYDbkcHB7DQ6LiSAua9AlQN67SAQl+4Y3KWtt7vq1Os04JuPm04/rrxcUt4M5fnHE00jXMIBgHOor5eyQ7dd+sK6NhPEpAk9IYL4VEuWh5lowLfKE3BUS1RnMwOZtQwNaqwxwMTp0p4Gizzxz0D+0p4PRg1Bw4B1YUED+ZMwctrnkFPF8tm4OmzgkFvN5tK+AHKZh4TU8krdoAAAAASUVORK5CYII=",
},
],
},
grid: {
top: "30%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
data: that.riskData1.x,
type: "category",
splitLine: {
show: false,
},
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: "rgba(0, 80, 148, .8)",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 22,
rotate: 20,
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(104, 180, 221, .2)",
type: "dashed",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 22,
},
},
series: [
{
type: "bar",
name: "应首评项目数",
barWidth: 10,
// barGap: "600%",
data: that.riskData1.y1,
// label: {
// show: true,
// position: "top",
// formatter: " ",
// width: 6,
// height: 6,
// borderRadius: 50,
// borderWidth: 6,
// borderColor: "#40A9FF",
// backgroundColor: "#fff",
// },
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#40A9FF", // 0% 处的颜色
},
{
offset: 1,
color: "#092351", // 100% 处的颜色
},
],
},
},
},
{
type: "bar",
name: "已完成首评项目数",
// barGap: "600%",
barWidth: 10,
data: that.riskData1.y2,
// label: {
// show: true,
// position: "top",
// formatter: " ",
// width: 6,
// height: 6,
// borderRadius: 50,
// borderWidth: 6,
// borderColor: "#58F7DF",
// backgroundColor: "#fff",
// },
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#58F7DF", // 0% 处的颜色
},
{
offset: 1,
color: "#092351", // 100% 处的颜色
},
],
},
},
},
{
type: "bar",
name: "应再评项目数",
// barGap: "600%",
barWidth: 10,
data: that.riskData1.y3,
// label: {
// show: true,
// position: "top",
// formatter: " ",
// width: 6,
// height: 6,
// borderRadius: 50,
// borderWidth: 6,
// borderColor: "#B78CFF",
// backgroundColor: "#fff",
// },
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#B78CFF", // 0% 处的颜色
},
{
offset: 1,
color: "#092351", // 100% 处的颜色
},
],
},
},
},
{
type: "bar",
name: "已完成再评项目数",
// barGap: "600%",
barWidth: 10,
data: that.riskData1.y4,
// label: {
// show: true,
// position: "top",
// formatter: " ",
// width: 6,
// height: 6,
// borderRadius: 50,
// borderWidth: 6,
// borderColor: "#FFE036",
// backgroundColor: "#fff",
// },
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#FFE036", // 0% 处的颜色
},
{
offset: 1,
color: "#092351", // 100% 处的颜色
},
],
},
},
},
{
type: "bar",
name: "再评达标项目数",
// barGap: "600%",
barWidth: 10,
data: that.riskData1.y5,
// label: {
// show: true,
// position: "top",
// formatter: " ",
// width: 6,
// height: 6,
// borderRadius: 50,
// borderWidth: 6,
// borderColor: "#7784FF",
// backgroundColor: "#fff",
// },
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#7784FF", // 0% 处的颜色
},
{
offset: 1,
color: "#092351", // 100% 处的颜色
},
],
},
},
},
],
};
that.right4Chart.setOption(option);
tools.loopShowTooltip(that.right4Chart, option, {
interval: 2000,
loopSeries: true,
});
},
clickItem (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 % 8;
this.witchs = this.inner % this.investData.investList.length;
this.innerDeg = this.inner * angle;
// 项目阶段分析弹窗
if (this.projectNum < 7) {
this.projectNum = this.projectNum + 1
} else {
this.projectNum = 0
}
}, 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;
this.time2 && clearInterval(this.time2);
this.leftEcharts5.dispose();
this.timeNs();
this.leftEcharts5Fun();
},
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 ? "94.4%" : "46.62%",
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 ? [1287.5] : [635.84];
let total = 1363.88; // 数据总数
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 ? "5.6%" : "53.38%",
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 ? [76.38] : [728.04];
let total = 1363.88; // 数据总数
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 `${e.name} ${e.percent}%
${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", // 文字字体大小
},
confine: true
},
legend: {
top: "center",
orient: "vertical",
left: "65%",
textStyle: {
color: "#fff",
fontSize: 20,
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: "37.7%", //
top: "middle", //配置图片居中
},
],
},
series: [
{
name: "",
type: "pie",
radius: ["20%", "90%"],
center: ["41%", "50%"],
labelLine: {
normal: {
lineStyle: {
width: 1,
},
},
},
label: {
normal: {
show: false,
textStyle: {
fontSize: 28,
color: "#fff",
},
},
},
roseType: "area",
data: dataList,
},
{
tooltip: {
show: false,
},
type: "pie",
radius: ["90%", "92%"],
center: ["41%", "50%"],
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}
{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,834.51亿",
value: dataArr,
itemStyle: {
fontSize: "50", //y轴上方单位的大小
color: "#FFF666",
fontFamily: "MicrosoftYaHei",
},
},
],
pointer: {
show: true,
length: "100%",
// radius: "20%",
width: 80, //指针粗细
// icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
icon: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
},
animationDuration: 4000,
},
{
name: "内部阴影",
type: "gauge",
radius: "75%",
splitNumber: 10,
axisLine: {
show: true,
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',
splitNumber: 5, //刻度数量
min: 0,
max: 100,
radius: "90%",
zlevel: 1,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[0.2, '#23AFAF'],
[0.4, '#2270DA'],
[0.6, '#E99D02'],
[1, '#F45656']
],
}
},
axisTick: {
show: true,
lineStyle: {
color: 'auto',
width: 2
},
length: 10,
splitNumber: 5
},
splitLine: {
show: true,
length: -12,
lineStyle: {
color: 'auto',
width: 2
}
},
axisLabel: {
show: true,
color: "#ffffff",
fontSize: 20,
fontFamily: "SourceHanSansSC-Regular",
// position: "top",
distance: -30,
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";
}
},
},
pointer: { //仪表盘指针
show: 0,
length: '0%',
width: 1
},
anchor: {
show: true,
showAbove: true,
size: 30,
itemStyle: {
color: '#EAEBF1',
}
},
detail: {
show: false
},
data: []
},
{
//指针上的圆
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 +
"
" +
params[0].marker +
params[0].data[1] +
":" +
params[0].data[2] +
"个," +
params[0].data[3] +
"亿元" +
"
" +
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: "17%",
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 +
"
" +
params[0].marker +
params[0].data[1] +
":" +
params[0].data[2] +
"个," +
params[0].data[3] +
"亿元" +
"
" +
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);
},
shanxiEchartsFun () {
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: 65, value2: 28 },
{ name: "朔州市", value: 331, value2: 13 },
{ name: "忻州市", value: 735, value2: 25 },
{ name: "吕梁市", value: 104, value2: 45 },
{ name: "太原市", value: 2567, value2: 113 },
{ name: "阳泉市", value: 252, value2: 28 },
{ name: "晋中市", value: 187, value2: 52 },
{ name: "临汾市", value: 155, value2: 30 },
{ name: "长治市", value: 100, value2: 23 },
{ name: "运城市", value: 416, value2: 23 },
{ name: "晋城市", value: 443, 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, data[i].value2),
});
}
}
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: "#404a5900",
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,
},
},
roam: false,
itemStyle: {
normal: {
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,
},
},
tooltip: {
trigger: "item",
className: "custom-tooltip-box",
confine: true, // 不超出当前表
formatter: (params, ticket, callback) => {
// 清空所有轮播
for (var k in geoCoordMap) {
that.shanxiMap.dispatchAction({
// type: 'geoUnSelect',
type: "downplay",
name: k,
geoIndex: 0,
});
that.shanxiMap.dispatchAction({
// type: 'geoUnSelect',
type: "downplay",
name: k,
seriesName: params.seriesName,
});
that.shanxiMap.dispatchAction({
// type: 'geoUnSelect',
type: "downplay",
name: k,
seriesName: "series\u00001",
});
}
that.shanxiMap.dispatchAction({
// type: 'geoSelect',
type: "highlight",
name: params.name,
geoIndex: 0,
});
that.shanxiMap.dispatchAction({
// type: 'geoSelect',
type: "highlight",
name: params.name,
seriesName: params.seriesName,
});
that.shanxiMap.dispatchAction({
// type: 'geoSelect',
type: "highlight",
name: params.name,
seriesName: "series\u00001",
});
if (params.value) {
return `