|
|
@@ -0,0 +1,5168 @@
|
|
|
+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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}' + '<br/>' + '发展线：' + '{c1}' + '<br/>' + '生存线：' + '{c2}', //+ '<br/>'+ '{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 + '<br/>' + params[0].marker + params[0].data[1] + '：' + params[0].data[2] + '个，' + params[0].data[3] + '亿元' + '<br/>' + 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 + '<br/>' + params[0].marker + params[0].data[1] + '：' + params[0].data[2] + '个，' + params[0].data[3] + '亿元' + '<br/>' + 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}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${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 = `
|
|
|
+ <div class="tooltip-cont">
|
|
|
+ <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
+ <p>总投资额：<span>${params.data.value[2]}亿</span></p>
|
|
|
+ </div>`
|
|
|
+ callback(ticket, tipHtml)
|
|
|
+ return tipHtml
|
|
|
+ }
|
|
|
+ if (params.componentSubType == 'map') {
|
|
|
+ let tipHtml = `
|
|
|
+ <div class="tooltip-cont">
|
|
|
+ <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
+ <p>总投资额：<span>${params.data.value}亿</span></p>
|
|
|
+ </div>`
|
|
|
+ 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 = `
|
|
|
+ <div class="tooltip-cont">
|
|
|
+ <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
+ <p>总投资额：<span>${params.data.value[2]}亿</span></p>
|
|
|
+ </div>`
|
|
|
+ callback(ticket, tipHtml)
|
|
|
+ return tipHtml
|
|
|
+ }
|
|
|
+ if (params.componentSubType == 'map') {
|
|
|
+ let tipHtml = `
|
|
|
+ <div class="tooltip-cont">
|
|
|
+ <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
|
|
|
+ <p>总投资额：<span>${params.data.value}亿</span></p>
|
|
|
+ </div>`
|
|
|
+ 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}' + '亿元', //+ '<br/>'+ '{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, {
|
|
|
+ nterval: 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}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
+ },
|
|
|
+ //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}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}：${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}：${data[3].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[4].color.colorStops[0].color}"></span> ${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]}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color}"></span> ${data[0].seriesName}：${data[0].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color}"></span> ${data[1].seriesName}：${data[1].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color}"></span> ${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}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${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}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}：${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${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,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+})
|
zhbyyy
