let app = new Vue({
el: '#app',
data () {
return {
app_token: '',
centerShow: false, // 中间内容显示
echartR4Chart: '',// 倒数第二个专用
echartR5Chart: '', // 倒是第一个专用
myChartTip1: '', // 弹窗单个柱状图专用
myChartTip2: '', // 弹窗两个柱状图专用
myChartTip3: '', // 弹窗两个柱状图专用
echartEnterpriseShow: false, // 企业额度分析控制
mapChart: '',//地图专用echarts
chartCarousel: '',//做大屏轮播专用echarts
mapTipShow: false,
echartSingleTipShow: false,
echartDoubleTipShow: false,
projectListTipShow: false, //项目列表专属弹窗
titleUrl: '',
titleName: '',
yellowCount: 0, // 黄圈轮播参数
yellowPosition: 40,// 黄圈悬浮窗位置参数
yellowType: true, // 黄圈悬浮停止轮播
echartR1Fd: true,
echartR2Fd: true,
echartC2Fd: true,
echartR3Fd: true,
echarts1Time: 16000,
time: '',
timer: '',
timer2: '',
totleLimit: left4[0],
totleLimit2: left4[1],
totleLimit3: left4[2],
totleLimit4: left4[3],
totleLimit5: left4[4],
center1: center1,
showTip2: false,
showTip3: false,
list: [],
count: 0,
countType: 0,
geoCoordMap: {},
storageRecordConfig2: center9,
titleList: right1,
centerLeftList: right3,
storageRecordConfig: left11,
config5: {
rowNum: 9,
waitTime: 2000,
headerHeight: '40',
header: ["项目名称", "所属组织", '实施主体', '建设性质（新建/续建）', '产业类别', '建设地点', '2022年投资完成额（万元）'],
data: [
["青银二广高速公路太原联络线建设PPP项目", "交控集团", "山西路桥建设集团有限公司", "新建", "交通运输业", "山西省太原市、晋中市", "148,086.00"],
["国道241、省道岚马线汾河水库段改线工程", "交控集团", "太原国省道汾河水库段建设管理有限公司", "续建", "交通运输业", "山西省 太原市、吕梁市", "165,314.33"],
["路桥科技中心", "交控集团", "山西路桥集团多经营有限公司", "续建", "建筑房地产", "山西省太原市", "8,098.26"],
["路桥科研基地", "交控集团", "山西路桥集团多经有限公司", "续建", "建筑房地产", "山西省太原市", "6,596.56"],
["武宿高速充电站建设", "交控集团", "山西交通运输投融资集团有限责任公司", "新建", "新能源", "山西省太原市", "100.00"],
["山西交通研创商务基地项目", "交控集团", "山西交通物流集团有限公司", "续建", "建筑房地产", "山西省太原市", "4,097.00"],
["山西省交通科学研究院产业化基地", "交控集团", "山西省交通科技研发有限公司", "续建", "建筑房地产", "山西省太原市武洛街27号", "3,242.00"],
["太长高速公路太原南收费站（二期工程暨龙城服务区）项目", "交控集团", "山西省交通开发投资集团有限公司龙城服务区发展分公司", "续建", "建筑房地产", "山西省太原市", "3,580.00"],
["山西转型综改示范区中小企业产业园项目", "交控集团", "山西交投综改园区开发有限公司", "续建", "建筑房地产", "山西省太原市", "14,432.00"]
],
align: ["center", "center", "center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
config6: {
rowNum: 15,
waitTime: 1000,
headerHeight: '100',
header: ["项目名称", "所属组织", '实施主体', '产业类别I级', '产业类别II级', '2022年投资完成额（万元）'],
data: [
["6万吨/年PBAT项目", "华阳新材", "华阳生物降解公司", "战略性新兴产业", "新材料", "20,340.00"],
["2万吨/年生物降解改性材料及塑料制品项目", "华阳新材", "华阳生物降解公司", "战略性新兴产业", "新材料", "5,270.00"],
["2万吨/年全系列生物降解新材料项目", "华阳新材", "华阳新材", "战略性新兴产业", "新材料", "5,560.00"],
["开元煤层气发电项目", "华阳新材", "阳煤扬德公司", "战略性新兴产业", "煤层气", "880.00"],
["平舒翟下庄煤层气发电项目", "华阳新材", "阳煤扬德公司", "战略性新兴产业", "煤层气", "570.00"],
["5GW高效光伏组件制造项目一期2GW", "华阳新材", "华储光电公司", "战略性新兴产业", "新能源", "10,000.00"],
["钠离子电池正极材料千吨级生产项目", "华阳新材", "华钠铜能公司", "战略性新兴产业", "新能源", "6,060.00"],
["钠离子电池负极材料千吨级生产项目", "华阳新材", "华钠碳能公司", "战略性新兴产业", "新能源", "4,080.00"],
["1GWh钠离子Pack电池生产线建设项目", "华阳新材", "华钠芯能公司", "战略性新兴产业", "新能源", "2790.00"],
["天成光储网充项目", "华阳新材", "新阳公司", "战略性新兴产业", "新能源", "1680.00"],
["宏厦三建绿色建材工业园区项目", "华阳新材", "宏厦三建", "战略性新兴产业", "新材料", "2,550.00"],
["亚美公司超低排放改造及节能技改项目", "华阳新材", "亚美公司", "战略性新兴产业", "其他", "20,101.00"],
["超净滤材项目", "华阳新材", "华阳科创城", "战略性新兴产业", "新材料", "5,510.00"],
["华阳集团网络安全工作顶层设计及整体整改项目", "华阳新材", "华阳集团", "战略性新兴产业", "新一代信息技术", "814.00"],
["山西科技创新城阳煤设计研发中心项目", "华阳新材", "碳基合成新材料公司", "战略性新兴产业", "其他", "12,930.00"],
["阳煤西110kv变电站及线路建设工程", "华阳新材", "华阳股份", "战略性新兴产业", "其他", "7,060.00"],
["郊区35kV输变电工程", "华阳新材", "华储光电公司", "战略性新兴产业", "其他", "1,250.00"],
["环境保护及治理", "华阳新材", "华阳股份", "战略性新兴产业", "节能环保", "5,890.00"],
["增资山西新阳清洁能源有限公司", "华阳新材", "华阳股份", "战略性新兴产业", "新能源产业", "101,700.00"],
["增资阳煤集团纳谷（山西）气凝胶科创城管理有限责任公司", "华阳新材", "华阳集团", "战略性新兴产业", "新材料产业", "34,582.00"],
["太化集团普田农业有限公司股权收购及增资", "华阳新材", "华阳新材", "战略性新兴产业", "新材料产业", "7,400.00"],
["山西阳煤道得新材股权投资合伙企业（有限合伙）", "华阳新材", "华阳资本", "战略性新兴产业", "新材料产业", "5,000.00"],
["阳泉市梧桐树嘉裕阳煤智能制造股权投资合伙企业（有限合伙）", "华阳新材", "华阳资本华阳股份", "战略性新兴产业", "新材料产业", "6,576.29"],
["阳煤纳谷（山西）气凝胶经销有限责任公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "4,335.00"],
["阳煤纳谷（山西）节能服务有限责任公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "3,674.00"],
["华阳诺爱特（山西）新材料科技有限公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "500.00"],
["华阳纳谷（北京）新材料科技有限公司", "华阳新材", "气凝胶科创城", "战略性新兴产业", "新材料产业", "250.00"],
["山西华储光电有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新材料产业", "45,000.00"],
["山西华钠铜能科技有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新能源产业", "900.00"],
["山西华钠碳能科技有限责任公司", "华阳新材", "山西新阳清洁能源有限公司", "战略性新兴产业", "新能源产业", "450.00"]
],
align: ["center", "center", "center", "center", "center", "center", "center"],
headerBGC: "#153A62",
oddRowBGC: "#061F42",
evenRowBGC: "#0C284A",
},
}
},
created () {
this.time = formatDate()
this.timer = setInterval(() => {
this.time = formatDate()
}, 1000)
this.timer2 = setInterval(() => {
this.yellowType && this.changeYellow()
}, 2000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer);
}
if (this.timer2) {
clearInterval(this.timer2);
}
},
mounted () {
// this.getAppToken()
setTimeout(() => {
this.initChartL1()
this.initChartL2()
this.initChartL3()
this.initChartL4()
this.initChartL5()
this.initChartL6()
this.initChartL7()
this.initChartL8()
this.initChartL10()
this.initChartL11()
this.changeTopColor()
// 大屏二
// this.initChartC1()
// this.initChartC2()
// this.initChartC3()
// this.initChartC4()
this.initChinaChart()
// this.initProjectList()
// 大屏三
this.initChartR1()
this.initChartR2()
this.initChartR3()
// this.initChartR4()
// this.initChartR5()
this.changeYellow()
})
},
methods: {
// 获取token
getAppToken () {
let value = {
"appId": "xilan1014", //系统编码
"appSecret": "12345678910Aa@Bb@Cc", //AccessToken加密认证密钥
"tenantid": "", //租户id
"accountId": "", //数据中心id
"language": "zh_CN"
}
post('/ierp/api/getAppToken.do', value).then(res => {
this.app_token = res.data.app_token
this.getAccessToken()
})
},
// 获取AccessToken
getAccessToken () {
let value = {
"user": "15503076138", //登录用户手机号
"apptoken": this.app_token, //应用令牌
"tenantid": "", //租户id
"accountId": "", //数据中心id
"usertype": "Mobile"
}
post('/ierp/api/login.do', value).then(res => {
this.access_token = res.data.access_token
this.getDate()
})
},
getDate () {
//
return new Promise((resolve, err) => {
let value = {
access_token: this.access_token,
"data": {
"mdnb_combofield": "A",
"mdnb_datefield": "2023-01-01",
},
pageSize:1000
}
post('/ierp/kapi/v2/mdnb/mdnb_xmkb/mdnb_manager_preinvest/tqqyedfx', value).then(res => {
console.log(res,'????????????')
// this.companyList = res.data.map(item => {
// return { name: item.orgName, id: item.orgNumber, orgLogoNum: item.orgLogoNum }
// })
// this.commonOption.xAxis.data = this.companyList.map(item => item.name)
// this.getData()
// resolve(1);
})
});
return
let dataList = []
// 中间
// 投资关键指标
center1[0] = dataList.keyIndicators.totalSum
center1[1] = dataList.keyIndicators.total
center1[2] = dataList.keyIndicators.property
center1[3] = dataList.keyIndicators.invest
// 投资产业分布
// center2[0].value = dataList.distribution
// 投资执行情况
// center3
// 中上
center4[0] = dataList.transformations.estateAmount
center4[1] = dataList.transformations.estateNum
center4[2] = dataList.transformations.figureAmount
center4[3] = dataList.transformations.figureNum
// 地图
// center5
// 五个一体化
center6[0] = dataList.five.amount1
center6[1] = dataList.five.amount2
center6[2] = dataList.five.amount3
center6[3] = dataList.five.amount4
center6[4] = dataList.five.amount5
// 投资阶段分析
// center7
// 重点项目监控
// center8
// 左边
// 投资额度分析
left1[0] = dataList.mdnb_amountfield
left1[1] = dataList.mdnb_amountfield1
left1[2] = dataList.mdnb_amountfield2
left2[1] = dataList.mdnb_amountfield3
left2[0] = dataList.mdnb_mdnb_decimalfield
// 企业额度分析
// left3
// 重点两线指标
// left11
// 投资计划分析
totleLimit = dataList.mdnb_amountfield7
totleLimit2 = dataList.mdnb_amountfield13
totleLimit3 = dataList.mdnb_amountfield23
totleLimit4 = dataList.mdnb_amountfield33
totleLimit5 = dataList.mdnb_integerfield
left5[0].y = dataList.mdnb_amountfield43
left5[0].num = dataList.mdnb_integerfield14
left5[1].y = dataList.mdnb_amountfield9
left5[1].num = dataList.mdnb_integerfield15
// left6
// 产业布局分析
// left7
// left8
// left9
// left10
// 项目阶段分析
// echartL10
// echartL11
// 右边
// 上面黄色轮播
// right1
},
yellowMouse (index) {
if (index % 2 == 0) {
this.yellowCount = index
this.yellowPosition = (index / 2 - 1) * 315 + 40
this.yellowType = false
this.changeYellow()
}
},
// 回到中国地图
backChina () {
this.centerShow = false
this.mapChart.dispose()
setTimeout(() => {
this.initChinaChart()
});
},
// 去项目看板
goLookBoard (e) {
console.log(e, '?????')
},
// 单个柱状图的弹窗
showChartLTipSingle (e) {
this.closeTap()
this.titleName = e
this.echartSingleTipShow = true
setTimeout(() => {
this.initChartLTip()
})
},
// 两个柱状图的弹窗
showChartLTipDouble (e) {
this.titleName = e
this.closeTap()
this.echartDoubleTipShow = true
setTimeout(() => {
this.initChartLTip2()
this.initChartLTip3()
})
},
initChartLTip () {
this.myChartTip1 = echarts.init(document.getElementById("echartSingleTip"));
let option = {
grid: {
top: 40,
right: 0,
left: 60,
bottom: 70,
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: commonCompany,
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "white",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '亿元',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: '20'
},
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
// {
// name: "2022年额度",
// type: "bar",
// data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
// showBackground: false,
// backgroundStyle: {
// color: "#18416F",
// },
// barWidth: "10%",
// itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0,
// color: '#082550',
// },
// {
// offset: 1,
// color: '#69c0ff',
// },
// ]),
// },
// },
{
name: "2023年额度",
type: "bar",
data: common3,
showBackground: false,
backgroundStyle: {
color: "#18416F",
},
barWidth: "30%",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#082550',
},
{
offset: 1,
color: '#957DFF',
},
]),
},
},
],
legend: {
// data: ["2022年额度", "2023年额度"],
data: ["2023年额度"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
right: 'center',
y: 5,
// 小图标的宽高
},
};
tools.loopShowTooltip(this.myChartTip1, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
that.myChartTip1.on('click', function (param) {
that.projectListTipShow = true
})
that.myChartTip1.setOption(option);
},
initChartLTip2 () {
this.myChartTip2 = echarts.init(document.getElementById("echartSingleTip2"));
let option = {
grid: {
top: 40,
right: 0,
left: 60,
bottom: '15%',
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "white",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '个',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "#fff",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
// {
// name: "2022年额度",
// type: "bar",
// data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
// showBackground: false,
// backgroundStyle: {
// color: "#18416F",
// },
// barWidth: "10%",
// itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0,
// color: '#082550',
// },
// {
// offset: 1,
// color: '#69c0ff',
// },
// ]),
// },
// },
{
name: "2023年额度",
type: "bar",
data: common4,
showBackground: false,
backgroundStyle: {
color: "#18416F",
},
barWidth: "30%",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#082550',
},
{
offset: 1,
color: '#957DFF',
},
]),
},
},
],
legend: {
// data: ["2022年额度", "2023年额度"],
data: ["2023年额度"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
right: 'center',
y: 0,
// 小图标的宽高
},
};
tools.loopShowTooltip(this.myChartTip2, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
that.myChartTip2.on('click', function (param) {
that.projectListTipShow = true
})
that.myChartTip2.setOption(option);
},
initChartLTip3 () {
this.myChartTip3 = echarts.init(document.getElementById("echartSingleTip3"));
let option = {
grid: {
top: 40,
right: 0,
left: 60,
bottom: '15%',
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "#fff",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '亿元',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "#fff",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
series: [
// {
// name: "2022年额度",
// type: "bar",
// data: [263.23, 402.18, 73.28, 144.80, 25.56, 8.23, 0, 12.97, 8.56, -1.72, 0, 0, 0, 76.90, 5.03, 9.14, 0, 0],
// showBackground: false,
// backgroundStyle: {
// color: "#18416F",
// },
// barWidth: "10%",
// itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// {
// offset: 0,
// color: '#082550',
// },
// {
// offset: 1,
// color: '#69c0ff',
// },
// ]),
// },
// },
{
name: "2023年额度",
type: "bar",
data: common5,
showBackground: false,
backgroundStyle: {
color: "#18416F",
},
barWidth: "30%",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#082550',
},
{
offset: 1,
color: '#69c0ff',
},
]),
},
},
],
legend: {
// data: ["2022年额度", "2023年额度"],
data: ["2023年额度"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
right: 'center',
y: 5,
},
};
tools.loopShowTooltip(this.myChartTip3, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
that.myChartTip3.on('click', function (param) {
that.projectListTipShow = true
})
that.myChartTip3.setOption(option);
},
closeTap () {
this.echartEnterpriseShow = false
this.mapTipShow = false
this.echartSingleTipShow = false
this.echartDoubleTipShow = false
this.projectListTipShow = false
this.myChartTip1 ? this.myChartTip1.dispose() : ''
this.myChartTip2 ? this.myChartTip2.dispose() : ''
this.myChartTip3 ? this.myChartTip3.dispose() : ''
},
//点击弹窗左半部分
popLeftClick () {
if (this.titleUrl == '2.png') {
this.titleUrl = '3.png'
} else if (this.titleUrl == '7.png') {
this.titleUrl = '8.png'
} else if (this.titleUrl == '3.png') {
this.titleUrl = '2.png'
} else if (this.titleUrl == '8.png') {
this.titleUrl = '7.png'
} else if (this.titleUrl == '5.png') {
this.titleUrl = '2.png'
} else if (this.titleUrl == '10.png') {
this.titleUrl = '7.png'
}
},
//点击弹窗右半部分
poprightClick () {
if (this.titleUrl == '2.png') {
this.titleUrl = '5.png'
} else if (this.titleUrl == '7.png') {
this.titleUrl = '10.png'
} else if (this.titleUrl == '5.png') {
this.titleUrl = '2.png'
} else if (this.titleUrl == '10.png') {
this.titleUrl = '7.png'
} else if (this.titleUrl == '3.png') {
this.titleUrl = '2.png'
} else if (this.titleUrl == '8.png') {
this.titleUrl = '7.png'
}
},
// 标题弹窗
showTitlePop (e, name) {
this.closeTap()
this.titleUrl = e
this.titleName = name
this.$nextTick(() => {
this.mapTipShow = true
})
},
changeYellow () {
this.titleList.forEach((item, index) => {
this.$set(this.titleList[index], 'type', 1)
})
this.$set(this.titleList[this.yellowCount], 'type', 2)
if (this.yellowCount == 14) {
this.yellowCount = 0
this.yellowPosition += 315
} else {
if (this.yellowCount != 0) {
this.yellowPosition += 315
} else {
this.yellowPosition = 40
}
this.yellowCount += 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 {
return intPartFormat + '.' + floatPart
}
} else {
return intPartFormat
}
},
changeTopColor () {
this.list = document.getElementsByClassName('row-item')
for (var i = 0; i < this.list.length; i++) {
if (i == 1) {
this.list[i].classList.add('light')
} else {
this.list[i].classList.remove('light')
}
}
this.initChartL9()
},
scrollChange (index) {
if (index == 18) {
this.count = -1
} else {
this.count = index
}
if (this.count > 12 && this.count != 18) {
this.countType = 1
} else {
this.countType = 0
}
for (var i = 0; i < this.list.length; i++) {
if (i == 2) {
this.list[i].classList.add('light')
} else {
this.list[i].classList.remove('light')
}
}
this.chartCarousel.dispose()
this.initChartL9()
},
initChartBall () {
let myChart = echarts.init(this.$refs['echartBall'])
var value = common2[0];
var data = [value];
option = {
backgroundColor: "#042148",
series: [
{
type: "liquidFill",
radius: "80%",
data: [0.45, 0.5, 0.4],
// data: [
// {}
// ],
backgroundStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
// 水球体颜色
colorStops: [
{
offset: 0,
color: "#010a11",
},
{
offset: 0.75,
color: "#1a2f45",
},
{
offset: 1,
color: "#2b405a",
},
],
globalCoord: false,
},
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 0,
borderColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
],
globalCoord: false,
},
},
},
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#237386',
},
{
offset: 1,
color: '#0078C8',
},],
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#2F97A9',
},
{
offset: 1,
color: '#0078C8',
},],
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#48E0ED',
},
{
offset: 1,
color: '#0078C8',
},],
}
],
label: {
normal: {
textStyle: {
color: "#fff", // x轴文字颜色
fontSize: '70'
},
},
},
},
],
};
myChart.setOption(option)
},
initChartL1 () {
let myChart = echarts.init(this.$refs['echartL1'])
var value = left2[0];
option = {
backgroundColor: "#042148",
series: [
{
type: "liquidFill",
radius: "80%",
data: [left2[0], left2[0] + 0.05, left2[0] - 0.05],
// data: [
// {}
// ],
backgroundStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
// 水球体颜色
colorStops: [
{
offset: 0,
color: "#010a11",
},
{
offset: 0.75,
// color: "#203852",
color: "#1a2f45",
},
{
offset: 1,
// color: "#354e6d",
color: "#2b405a",
// color: "#314967",
},
],
globalCoord: false,
},
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 0,
borderColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
],
globalCoord: false,
},
},
},
color: [
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#237386',
},
{
offset: 1,
color: '#0078C8',
},],
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#2F97A9',
},
{
offset: 1,
color: '#0078C8',
},],
},
{
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#48E0ED',
},
{
offset: 1,
color: '#0078C8',
},],
}
],
label: {
normal: {
textStyle: {
color: "#fff", // x轴文字颜色
},
},
},
},
],
};
myChart.setOption(option)
},
initChartL2 () {
var chartData = left5
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load，图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showTip3 = true
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -110,
y: 90,
symbolWidth: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
title: {
text: '主辅业计划占比',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei',
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
tooltip: {
crosshairs: false,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
// useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}：${this.percentage}%
${this.y}亿，${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白，0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
center: ['50%', '50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL2', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL3 () {
var chartData = left6
var timer = null;
var i = 0;
let that = this
var chart = Highcharts.chart('echartL3', {
colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load，图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
}
}, 2000);
},
legendItemClick: function (event) {
that.showChartLTipDouble(e.point.name)
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -70,
y: 90,
symbolWidth: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
title: {
text: '项目管理类型',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}：${this.percentage}%
${this.y}亿，${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白，0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
// center: ['70%', '50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
console.log(e)
}
}
},
data: chartData
}]
})
}
}, 2000);
}
}
},
data: chartData
}]
});
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL4 () {
let myChart = echarts.init(document.getElementById("echartL4"));
let option = {
grid: {
top: 45,
right: 0,
left: 60,
bottom: 80,
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: commonCompany,
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "white",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '亿元',
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
splitLine: {
show: true,
lineStyle: {
color: "#68b4dd66",
width: 1,
type: "dashed",
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
nameTextStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
series: [
{
name: "2023年额度",
type: "bar",
data: left3[0],
showBackground: true,
backgroundStyle: {
color: "#18416F",
},
barWidth: "20",
itemStyle: {
// barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#082550',
},
{
offset: 1,
color: '#957DFF',
},
]),
},
},
],
legend: {
// data: ["2022年额度", "2023年额度"],
data: ["2023年额度"],
textStyle: {
// 图列内容样式
color: "#fff", // 字体颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
right: 'center',
y: 5,
// icon: "roundRect",
// 小图标的宽高
},
};
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
myChart.on('click', function (param) {
that.titleName = param.name
that.echartEnterpriseShow = true
setTimeout(() => {
that.initChartBall()
});
})
myChart.setOption(option);
},
initChartL5 () {
var chartData = left7
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load，图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -110,
y: 50,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
title: {
text: '传统产业分析',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}：${this.percentage}%
${this.y}亿，${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白，0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL5', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL6 () {
var chartData = left8
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load，图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -30,
y: 30,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
title: {
text: '战略性新兴产业',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}：${this.percentage}%
${this.y}亿，${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白，0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL6', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL7 () {
var chartData = left9
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load，图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
title: {
text: '特色优势产业',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -50,
y: 30,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}：${this.percentage}%
${this.y}亿，${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白，0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL7', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL8 () {
var chartData = left10
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
//beta: 0
},
events: {
// load，图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
title: {
text: '公共基础等产业',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
legend: {
// labelFormatter: function() {
// return 123;
// },
align: 'right',//横向位置
verticalAlign: 'middle', // 纵向位置
layout: "vertical",//横排还是竖排
x: -70,
y: 50,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20,
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
},
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}：${this.percentage}%
${this.y}亿，${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白，0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL8', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL9 () {
this.chartCarousel = echarts.init(document.getElementById("echartL9"));
option = {
tooltip: {
trigger: 'axis',
formatter: '指标：' + '{c0}' + '
' + '发展线：' + '{c1}' + '
' + '生存线：' + '{c2}', //+ '
'+ '{a1}：{c1}' + '%',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: '10%',
right: '5%',
left: '12%',
bottom: '15%',
},
xAxis: {
// data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
data: left15[this.countType],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: true, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 30,
textStyle: {
color: '#fff', //X轴文字颜色
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
},
yAxis: [
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value}%',
textStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#ebf8ac',
fontSize: 16,
fontFamily: 'Microsoft YaHei'
},
},
],
series: [
{
name: '实际值',
type: 'bar',
barWidth: 20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
// data: [70, 52, 33, 41, 52],
data: left12[this.count + 1][2]
},
{
name: '',
type: 'line',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: 'green',
},
]),
},
},
// data: [20, 30, 15, 28, 36],
data: left12[this.count + 1][1]
},
{
name: '',
type: 'line',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: 'yellow',
},
]),
},
},
// data: [15, 22, 17, 33, 14],
data: left12[this.count + 1][0]
},
],
}
let that = this
this.chartCarousel.on('click', function (param) {
that.titleName = param.name
that.echartSingleTipShow = true
setTimeout(() => {
that.initChartLTip()
});
})
this.chartCarousel.setOption(option)
// tools.loopShowTooltip(myChart, option, {
// nterval: 2000,
// loopSeries: true,
// })
},
initChartL10 () {
let myChart = echarts.init(document.getElementById("echartL10"));
let option = {
title: {
text: '固定资产进度分布',
textStyle: {
color: '#69C0FF',
fontSize: 30,
fontWeight: 500,
fontFamily: 'Microsoft YaHei'
},
top: '20',
left: '20'
},
textStyle: {
color: '#fff',
},
tooltip: {
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: true,
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: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#fff', //X轴文字颜色
fontSize: 20,
padding: [-320, 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]
},
]
}
let that = this
myChart.on('click', function (param) {
that.showChartLTipDouble('固定资产')
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
},
initChartL11 () {
let myChart = echarts.init(document.getElementById("echartL11"));
let option = {
title: {
text: '股权类进度分布',
textStyle: {
color: '#69C0FF',
fontSize: 30,
fontWeight: 500,
fontFamily: 'Microsoft YaHei'
},
top: '20',
left: '20'
},
textStyle: {
color: '#fff',
},
tooltip: {
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: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
axisPointer: {
// lineStyle: {
// type: 'dashed',
// width: 2,
// color: 'rgba(255,255,255,0.6)'
// },
animation: true
}
},
grid: {
top: '0%',
right: '5%',
left: '15%',
bottom: '-10%',
},
yAxis: {
data: ['备案', '特别监管'],
splitLine: {
show: false,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
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: '#005094',
width: 1,
},
},
axisTick: {
show: true, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#fff', //X轴文字颜色
fontSize: 20,
padding: [-320, 0, 0, 0],
fontFamily: 'Microsoft YaHei'
},
},
},
series: [
{
name: '',
type: 'scatter',
symbol: 'circle',
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: '#40A9FF'
}
},
data: left14[0]
},
{
name: '',
type: 'scatter',
symbol: 'circle',
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: left14[1]
},
]
}
let that = this
myChart.on('click', function (param) {
that.showChartLTipDouble('股权类')
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
},
// 大屏二
initChartC1 () {
var chartData = center2
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#74a55d', '#cea446', '#b84b4b', '#5593ab', '#2a7652', '#c3643c', '#714585', '#b75d9f'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 60,
//beta: 0
},
events: {
// load，图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
legend: {
layout: 'vertical',
align: 'right',
y: -10,
verticalAlign: 'bottom',
itemStyle: {
fontSize: '20px',
color: '#fff',
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
}
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}：${this.percentage}%
投资完成额：${this.y}亿
投资数量：${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 500,
innerSize: 330, //环形图中间空白，0为饼图
depth: 75, //立体高度
slicedOffset: 40, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
title: {
text: '',
style: {
color: '#fff',
fontSize: 24,
fontFamily: 'Microsoft YaHei'
},
align: 'center',
verticalAlign: "bottom",
x: -120
},
series: [{
type: 'pie',
name: '占比',
center: ['74%', '50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartC1', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartC2 () {
let that = this
let myChart = echarts.init(this.$refs['echartC2'])
myChart.on('showTip', (params) => {
// 如果是7或者15并且满足防抖则切换
if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartC2Fd) {
that.echartC2Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartC2Fd = true
}, 2000)
}, 1900);
// 如果是17表示到了最后一个，那么重新来一遍
} else if (params.dataIndex == 17 && that.echartC2Fd) {
that.echartC2Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = 0
option.dataZoom[0].startValue = 5
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartC2Fd = true
}, 2000)
}, 1900)
}
})
let option = {
tooltip: {
formatter: data => {
return `${data[0].name}
${data[0].seriesName}：${data[0].value}亿
${data[1].seriesName}：${data[1].value}亿`
},
trigger: 'axis',
axisPointer: {
// type: 'cross',',
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
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, //鼠标滚轮触发滚动
}
],
grid: {
top: '10%',
right: '3%',
left: '7%',
bottom: '15%',
},
legend: {
top: '1',
right: 'center',
textStyle: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: center3.map(item => item.name),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 40,
textStyle: {
color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
},
yAxis: [
{
type: 'value',
name: '亿元',
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
],
series: [
{
name: '计划投资',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: center3.map(item => item.value),
},
{
name: '实际投资',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#957DFF',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: center3.map(item => item.value2),
},
],
}
myChart.on('click', function (param) {
that.projectListTipShow = true
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
// let arr = center3.map(item => item.value2)
// this.timeOut = setInterval(function () {
// let startValue = myChart.getModel().option.dataZoom[0].startValue;
// let endValue = myChart.getModel().option.dataZoom[0].endValue;
// let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
// let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
// // 每次向后滚动一个，最后一个从头开始。
// // console.log(option.dataZoom[0].endValue);
// if (option.dataZoom[0].endValue >= 12) {
// option.dataZoom[0].endValue = 5
// option.dataZoom[0].startValue = 0
// } else {
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
// }
// // myChart.dispatchAction({
// // type: 'showTip',
// // seriesIndex: 0,
// // dataIndex: startValue +1,
// // });
// myChart.setOption(option);
// }, 12000);
},
convertData (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
})
}
}
return res
},
initProvinceChart () {
var data = [
{ name: '大同市', value: 60.35, value2: 28 },
{ name: '朔州市', value: 33.61, value2: 13 },
{ name: '忻州市', value: 73.35, value2: 25 },
{ name: '吕梁市', value: 109.04, value2: 45 },
{ name: '太原市', value: 251.67, value2: 113 },
{ name: '阳泉市', value: 25.12, value2: 28 },
{ name: '晋中市', value: 148.57, value2: 52 },
{ name: '临汾市', value: 130.55, value2: 30 },
{ name: '长治市', value: 103.00, value2: 23 },
{ name: '运城市', value: 41.06, value2: 23 },
{ name: '晋城市', value: 45.43, value2: 31 }
]
this.geoCoordMap = []
/*获取地图数据*/
this.mapChart = echarts.init(this.$refs['echarts-map'])
echarts.registerMap('shanxi', shanxi)
var mapFeatures = echarts.getMap('shanxi').geoJson.features
mapFeatures.forEach(v => {
// 地区名称
var name = v.properties.name
// 地区经纬度
this.geoCoordMap[name] = v.properties.centroid
// 按照地图乱序
// data.push({ name: v.properties.name, value: v.properties.centroid[0], value2: v.properties.centroid[1] })
})
let option = {
tooltip: {
padding: 15,
enterable: true,
transitionDuration: 1,
formatter: (params, ticket, callback) => {
// 清空所有轮播
for (var k in this.geoCoordMap) {
this.mapChart.dispatchAction({
// type: 'geoUnSelect',
type: 'downplay',
name: k,
})
}
// 如果鼠标滑动到线线上面，则返回空
this.mapChart.dispatchAction({
// type: 'geoSelect',
type: 'highlight',
name: params.name,
})
if (params.componentSubType == 'lines') {
return
}
if (params.componentSubType == 'scatter') {
let tipHtml = `
`
callback(ticket, tipHtml)
return tipHtml
}
if (params.componentSubType == 'map') {
let tipHtml = `
`
callback(ticket, tipHtml)
return tipHtml
}
},
},
visualMap: {
show: false,
min: 0,
max: 300,
right: 0,
bottom: 0,
text: ['高', '低'],
textStyle: {
color: '#f1f1f1'
},
realtime: false,
calculable: false,
inRange: {
color: ['lightskyblue', '#2754b7']
}
},
geo: {
show: true,
map: 'shanxi',
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '140%',
label: {
normal: {
position: [100, 100],
fontSize: 25,
fontFamily: 'Microsoft YaHei',
fontWeight: 600,
color: '#fff',
show: true,
},
emphasis: {
show: true,
color: '#e7e1a0',
fontSize: 30,
},
},
roam: false,
itemStyle: {
normal: {
areaColor: '#1946a8',
shadowColor: '#1946a8',
borderWidth: 2, //设置外层边框
borderColor: '#1946a8',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
},
emphasis: {
areaColor: '#013d95',
borderColor: '#e7e1a0',
borderWidth: 4, //设置外层边框
},
},
},
series: [
{
type: 'map',
map: 'shanxi',
geoIndex: 0,
aspectScale: 1.5, //长宽比
data: data,
},
],
}
let that = this
this.mapChart.on('click', function (params) {
if (params.name == '太原市') {
that.showChartLTipDouble('太原市')
}
})
tools.loopShowTooltip(this.mapChart, option, {
interval: 2000,
loopSeries: false,
});
this.mapChart.setOption(option)
},
initChinaChart () {
var data = [{ name: '河北', value: 60.35, value2: 28 },
{ name: '山西', value: 4060.35, value2: 29 },
{ name: '辽宁', value: 260.35, value2: 30 },
{ name: '吉林', value: 360.35, value2: 30 },
{ name: '黑龙江', value: 460.35, value2: 30 },
{ name: '江苏', value: 560.35, value2: 30 },
{ name: '浙江', value: 60.35, value2: 28 },
{ name: '安徽', value: 160.35, value2: 29 },
{ name: '福建', value: 260.35, value2: 30 },
{ name: '江西', value: 360.35, value2: 30 },
{ name: '山东', value: 460.35, value2: 30 },
{ name: '河南', value: 560.35, value2: 30 },
{ name: '湖北', value: 60.35, value2: 28 },
{ name: '湖南', value: 160.35, value2: 29 },
{ name: '广东', value: 260.35, value2: 30 },
{ name: '海南', value: 360.35, value2: 30 },
{ name: '四川', value: 6.35, value2: 30 },
{ name: '贵州', value: 560.35, value2: 30 },
{ name: '云南', value: 60.35, value2: 28 },
{ name: '陕西', value: 160.35, value2: 29 },
{ name: '甘肃', value: 260.35, value2: 30 },
{ name: '青海', value: 360.35, value2: 30 },
{ name: '台湾', value: 460.35, value2: 30 },
{ name: '内蒙古', value: 560.35, value2: 30 },
{ name: '广西', value: 60.35, value2: 28 },
{ name: '西藏', value: 160.35, value2: 29 },
{ name: '宁夏', value: 260.35, value2: 30 },
{ name: '新疆', value: 360.35, value2: 30 },
{ name: '北京', value: 460.35, value2: 30 },
{ name: '天津', value: 560.35, value2: 30 },
{ name: '上海', value: 260.35, value2: 30 },
{ name: '重庆', value: 360.35, value2: 30 },
{ name: '香港', value: 460.35, value2: 30 },
{ name: '澳门', value: 560.35, value2: 30 },]
this.geoCoordMap = []
/*获取地图数据*/
this.mapChart = echarts.init(this.$refs['chinaMap'])
echarts.registerMap('china', china)
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] })
})
let option = {
tooltip: {
padding: 15,
enterable: true,
transitionDuration: 1,
formatter: (params, ticket, callback) => {
// 清空所有轮播
this.mapChart.dispatchAction({
// type: 'geoUnSelect',
type: 'downplay',
name: '南海诸岛',
})
for (var k in this.geoCoordMap) {
this.mapChart.dispatchAction({
// type: 'geoUnSelect',
type: 'downplay',
name: k,
})
}
// 如果鼠标滑动到线线上面，则返回空
this.mapChart.dispatchAction({
// type: 'geoSelect',
type: 'highlight',
name: params.name,
})
if (params.componentSubType == 'lines') {
return
}
if (params.componentSubType == 'scatter') {
let tipHtml = `
`
callback(ticket, tipHtml)
return tipHtml
}
if (params.componentSubType == 'map') {
let tipHtml = `
`
callback(ticket, tipHtml)
return tipHtml
}
},
},
visualMap: {
show: false,
min: 0,
max: 1000,
left: '100',
bottom: 100,
text: ['高', '低'],
textStyle: {
color: '#f1f1f1'
},
realtime: true, //拖拽时，是否实时更新
calculable: false,
inRange: {
color: ['lightskyblue', '#2754b7']
},
itemWidth: 50, //图形的宽度，即长条的宽度。
itemHeight: 400, //图形的高度，即长条的高度。
textStyle: {
fontSize: 30,
color: '#fff'
}
},
geo: {
show: true,
map: 'china',
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '110%',
label: {
normal: {
position: [100, 100],
fontSize: 25,
fontFamily: 'Microsoft YaHei',
fontWeight: 600,
color: '#fff',
show: true,
},
emphasis: {
show: true,
color: '#e7e1a0',
fontSize: 30,
},
},
// 滑轮缩放
roam: false,
itemStyle: {
normal: {
areaColor: '#1946a8',
shadowColor: '#1946a8',
borderWidth: 2, //设置外层边框
borderColor: '#0b245b',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
},
emphasis: {
areaColor: '#013d95',
borderColor: '#e7e1a0',
borderWidth: 4, //设置外层边框
},
},
},
series: [
{
type: 'map',
map: 'china',
geoIndex: 0,
data: data,
},
],
}
let that = this
this.mapChart.on('click', function (params) {
if (params.name == '山西') {
that.mapChart.dispose()
that.centerShow = true
setTimeout(() => {
that.initChartC1()
that.initChartC2()
that.initChartC3()
that.initChartC4()
that.initProvinceChart()
that.initProjectList()
})
}
})
tools.loopShowTooltip(this.mapChart, option, {
interval: 2000,
loopSeries: false,
});
this.mapChart.setOption(option)
},
initChartC3 () {
let myChart = echarts.init(this.$refs['echartC3'])
let option = {
tooltip: {
trigger: 'axis',
formatter: '{a0}：{c0}' + '亿元', //+ '
'+ '{a1}：{c1}' + '%',
axisPointer: {
// type: 'cross',',
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
grid: {
top: '8%',
right: '3%',
left: '7%',
bottom: '10%',
},
// legend: {
// top: '1',
// textStyle: {
// color: 'rgba(250,250,250,0.6)',
// },
// },
xAxis: {
data: center6.map(item => item.name),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 20,
textStyle: {
color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
},
yAxis: [
{
type: 'value',
name: '亿元',
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
{
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} %',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
],
series: [
{
type: 'bar',
name: '投资金额',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: center6.map(item => item.value),
},
],
}
myChart.on('click', function (param) {
that.projectListTipShow = true
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
interval: 2000,
loopSeries: true,
})
},
initChartC4 () {
var chartData = []
var timer = null;
var timer2 = null;
var i = 0;
center7.forEach((item, index) => {
let obj = {
name: item.name,
y: item.value2,
num: item.value,
sliced: false,
selected: false,
color: index == 0 ? '#74a55d' : '#cea446'
}
chartData.push(obj)
})
let that = this
var chart = Highcharts.chart('echartC4', {
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 60,
//beta: 0
},
events: {
// load，图表加载完成时触发
load: function () {
var chart = this;
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
}
}, 2000);
},
legendItemClick: function (event) {
console.log(event);
return true;
}
}
},
credits: {
enabled: false //去掉hightchats水印
},
title: {
text: null
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
// positioner: function(e){
// console.log(e, this)
// },
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = Math.round(this.percentage)
return `${this.key}：${this.percentage}%
投资完成额：${this.y}亿
投资数量：${num}个`
},
//pointFormat:
},
legend: {
layout: 'vertical',
align: 'right',
y: -10,
verticalAlign: 'bottom',
itemStyle: {
fontSize: '20px',
color: '#fff',
fontWeight: 0,
fontFamily: 'Microsoft YaHei'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 500,
innerSize: 330, //环形图中间空白，0为饼图
depth: 75, //立体高度
slicedOffset: 40, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
center: ['60%', '50%'],
y: -10,
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
}
}, 2000);
}
}
},
data: chartData
}]
});
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initProjectList () {
let dataList = []
center8.map(item => {
dataList.push([item.office, item.name, item.value + '亿'])
})
this.storageRecordConfig2.data = dataList
this.storageRecordConfig2 = { ...this.storageRecordConfig2 }
},
// 大屏三
initChartR1 () {
let that = this
let myChart = echarts.init(this.$refs['echartR1'])
myChart.on('showTip', (params) => {
// 如果是7或者15并且满足防抖则切换
if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) {
that.echartR1Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR1Fd = true
}, 2000)
}, 1900);
// 如果是17表示到了最后一个，那么重新来一遍
} else if (params.dataIndex == 17 && that.echartR1Fd) {
that.echartR1Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = 0
option.dataZoom[0].startValue = 5
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR1Fd = true
}, 2000)
}, 1900)
}
})
let option = {
tooltip: {
formatter: data => {
return `${data[0].name}
${data[0].seriesName}：${data[0].value}亿
${data[1].seriesName}：${data[1].value}亿
${data[2].seriesName}：${data[2].value}亿
${data[3].seriesName}：${data[3].value}亿
${data[4].seriesName}：${data[4].value}亿`
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
trigger: 'axis',
axisPointer: {
// type: 'cross',',
},
},
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, //鼠标滚轮触发滚动
}
],
grid: {
top: '10%',
right: '3%',
left: '5%',
bottom: '5%',
},
legend: {
data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
x: 'center',
y: '0px',
textStyle: {
color: '#fff',
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: right4.map(item => item.name),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
// rotate: 40,
textStyle: {
color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
},
},
yAxis: [
{
type: 'value',
name: '亿元',
nameTextStyle: {
color: 'rgba(255,255,255,0.6)',
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
],
series: [
{
name: '预算额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#74a55d',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right4.map(item => item.value),
},
{
name: '已签合同额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#cea446',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right4.map(item => item.value2),
},
{
name: '产值认定额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#b84b4b',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right4.map(item => item.value),
},
{
name: '结算额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5593ab',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right4.map(item => item.value2),
},
{
name: '付款额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#2a7652',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right4.map(item => item.value),
},
],
}
myChart.on('click', function (param) {
that.projectListTipShow = true
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
interval: 2000,
loopSeries: true,
})
},
initChartR2 () {
let that = this
const itemStyle = {
// opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.3)'
};
let myChart = echarts.init(this.$refs['echartR2'])
myChart.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
myChart.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
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR2Fd = true
}, 2000)
}, 1900)
}
})
let option = {
color: ['#74a55d', '#cea446', '#b84b4b'],
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,
data: ['正偏差', '容差', '负偏差'],
textStyle: {
fontSize: 20,
color: '#fff',
fontFamily: 'Microsoft YaHei'
}
},
textStyle: {
color: '#fff',
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
formatter: data => {
return `${data[0].value[0]}
${data[0].seriesName}：${data[0].data[1]}亿
${data[1].seriesName}：${data[1].data[1]}亿
${data[2].seriesName}：${data[2].data[1]}亿`
},
axisPointer: {
// // type: 'cross',',
},
},
grid: {
top: '10%',
right: '4%',
left: '5%',
bottom: '5%',
},
yAxis: {
name: '亿元',
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: right5[0].map(item => item[0]),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisTick: {
show: false, //隐藏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) {
return Math.sqrt(data[1]) * 9;
},
},
{
name: '容差',
type: 'scatter',
itemStyle: itemStyle,
data: right5[1],
symbolSize: function (data) {
return Math.sqrt(data[1]) * 8;
},
},
{
name: '负偏差',
type: 'scatter',
itemStyle: itemStyle,
data: right5[2],
symbolSize: function (data) {
return Math.sqrt(data[1]) * 7;
},
}
]
}
myChart.on('click', function (param) {
// that.showChartLTipDouble(param.name)
that.projectListTipShow = true
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
interval: 2000,
loopSeries: true,
})
},
initChartR3 () {
let that = this
let myChart = echarts.init(this.$refs['echartR3'])
myChart.on('showTip', (params) => {
this.echartR4Chart ? this.echartR4Chart.dispose() : ''
this.echartR5Chart ? this.echartR5Chart.dispose() : ''
that.initChartR4()
that.initChartR5()
// 如果是7或者15并且满足防抖则切换
if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) {
that.echartR3Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR3Fd = true
}, 2000)
}, 7900);
// 如果是17表示到了最后一个，那么重新来一遍
} else if (params.dataIndex == 17 && that.echartR3Fd) {
that.echartR3Fd = false
setTimeout(() => {
option.dataZoom[0].endValue = 0
option.dataZoom[0].startValue = 5
myChart.setOption(option);
// 防止勿刷新做的防抖
setTimeout(() => {
that.echartR3Fd = true
}, 2000)
}, 7900)
}
})
let option = {
tooltip: {
formatter: data => {
return `${data[0].name}
${data[0].seriesName}：${data[0].value}亿
${data[1].seriesName}：${data[1].value}亿
${data[2].seriesName}：${data[2].value}亿`
},
trigger: 'axis',
axisPointer: {
// type: 'cross',',
},
position: (params) => {
return [params[0] + 10, 60]
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
confine: true
},
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, //鼠标滚轮触发滚动
}
],
grid: {
top: '25%',
right: '3%',
left: '10%',
bottom: '20%',
},
legend: {
data: ["低风险", "中风险", '高风险'],
x: 'center',
y: '15px',
textStyle: {
// color: 'rgba(250,250,250,0.6)',
color: '#fff',
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: right4.map(item => item.name),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 40,
textStyle: {
color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
},
yAxis: [
{
type: 'value',
name: '亿元',
nameTextStyle: {
color: 'rgba(255,255,255,0.6)',
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '20',
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
],
series: [
{
name: '高风险',
type: 'bar',
stack: 'Ad',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#b84b4b',
},
{
offset: 1,
color: '#b84b4b',
},
]),
},
},
data: right6.map(item => item.value),
},
{
name: '中风险',
type: 'bar',
stack: 'Ad',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#cea446',
},
{
offset: 1,
color: '#cea446',
},
]),
},
},
data: right6.map(item => item.value2),
},
{
name: '低风险',
type: 'bar',
stack: 'Ad',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#2a7652',
},
{
offset: 1,
color: '#2a7652',
},
]),
},
},
data: right6.map(item => item.value3),
},
],
}
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
interval: 8000,
loopSeries: true,
})
},
initChartR4 () {
this.echartR4Chart = echarts.init(this.$refs['echartR4'])
option = {
title: {
text: ''
},
radar: {
center: ['50%', '50%'],
radius: 135,
indicator: [
{ name: '安全风险', max: 100000 },
{ name: '付款风险', max: 100000 },
{ name: '合同风险', max: 100000 },
{ name: '结算风险', max: 100000 },
{ name: '进度风险', max: 100000 },
{ name: '质量风险', max: 100000 },
],
axisLine: { // 设置雷达图中间射线的颜色
lineStyle: {
color: '#887d33',
},
},
splitLine: { //网格颜色设置
show: true,
lineStyle: {
width: 1,
color: ['#871b1a', '#638f41', '#d29e35', '#b6802b']
},
},
name: { //修改indicator文字的颜色
textStyle: {
color: "#fff",
fontSize: '20',
fontFamily: 'Microsoft YaHei'
}
},
splitNumber: 4, //有几个圈
splitArea: { //设置图表颜色，show的值为true
show: true,
areaStyle: {
// color:"#c1ddf8", //一般设置方式
//设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
//a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
//b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
// { offset: 0, color: '#887D33' }, // 0% 处的颜色
// { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色
// { offset: 1, color: '#430705' }// 100% 处的颜色
// ], false)
color: ['#638f41', '#887d33', '#7d4216', '#430705'],
}
}
},
series: [
{
name: '',
type: 'radar',
symbol: 'circle', // 单个数值点的样式，还可以取值'rect','angle'等
symbolSize: 0, // 数值点的大小
data: [
{
value: right7[0],
name: '安全风险',
itemStyle: { //该数值区域样式设置
normal: {
color: 'rgb(44,198,255,0.8)', //背景颜色，还需设置areaStyle
lineStyle: {
color: 'rgb(44,198,255,0.8)', //边框颜色
},
},
},
label: { //显示value中具体的数值
normal: {
show: false,
textStyle: { //更改数值样式
color: '#43EDE3'
}
},
},
areaStyle: { //设置区域背景颜色透明度
normal: {
width: 1,
opacity: 0.8,
},
},
}
]
}
]
};
// tools.loopShowTooltip(myChart, option, {
// interval: 2000,
// loopSeries: true,
// });
this.echartR4Chart.setOption(option)
},
initChartR5 () {
this.echartR5Chart = echarts.init(this.$refs['echartR5'])
let option = {
tooltip: {
formatter: data => {
return `${data[0].name}
${data[0].seriesName}：${data[0].value}亿
${data[1].seriesName}：${data[1].value}亿
${data[2].seriesName}：${data[2].value}亿
${data[3].seriesName}：${data[3].value}亿`
},
trigger: 'axis',
axisPointer: {
// type: 'cross',',
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
grid: {
top: '15%',
right: '3%',
left: '5%',
bottom: '35',
},
legend: {
data: ["预算额", "合同额", "结算额", "支付额"],
x: 'center',
y: '10px',
textStyle: {
// color: 'rgba(250,250,250,0.6)',
color: '#fff',
fontSize: "20",
fontFamily: 'Microsoft YaHei'
},
},
xAxis: {
data: ['设备费', '设计费', '施工费', '材料费'],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
// rotate: 40,
textStyle: {
color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
},
yAxis: [
{
type: 'value',
name: '亿元',
nameTextStyle: {
color: 'rgba(255,255,255,0.6)',
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '20', // 文字字体大小
fontFamily: 'Microsoft YaHei'
},
},
nameTextStyle: {
color: '#fff',
fontSize: 20,
fontFamily: 'Microsoft YaHei'
},
},
],
series: [
{
name: '预算额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#74a55d',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right8.map(item => item.value),
},
{
name: '合同额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#cea446',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right8.map(item => item.value2),
},
{
name: '结算额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#b84b4b',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right8.map(item => item.value3),
},
{
name: '支付额',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5593ab',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: right8.map(item => item.value4),
},
],
}
this.echartR5Chart.setOption(option)
tools.loopShowTooltip(this.echartR5Chart, option, {
interval: 2000,
loopSeries: true,
})
},
},
})