let app = new Vue({
el: '#app',
data() {
return {
showTip: false,
showTip2: false,
timeOut: '',
tipTitle: '',
tipTitle2: '',
year: '2022',
time: '',
timer: '',
mapName: 'shanxi',
geoCoordMap: {},
config1: {
number: [100],
content: '{nt}个',
},
storageRecordConfig: null,
companyList: [
{ name: '山西焦煤' },
{ name: '晋能控股' },
{ name: '华新燃气' },
{ name: '山西建投' },
{ name: '潞安化工' },
{ name: '华远陆港' },
{ name: '航产集团' },
{ name: '大地控股' },
{ name: '国新能源' },
{ name: '汾酒集团' },
{ name: '云时代' },
{ name: '神农科技' },
{ name: '华阳新材' },
{ name: '华舰体育' },
{ name: '交控集团' },
{ name: '文旅集团' },
{ name: '水控集团' },
{ name: '太重集团' },
],
amountList: amountList,
amountTotal: 0,
classOption: {
step: 0.5
}
}
},
created() {
this.amountList.map(item => {
this.amountTotal += Number(item.value)
})
this.time = formatDate()
this.timer = setInterval(() => {
this.time = formatDate()
}, 1000)
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
clearInterval(this.timeOut)
},
mounted() {
setTimeout(() => {
// 左侧图表
//this.initChartTip()
this.initChartTip2()
this.initChartTip3()
this.initChartTip4()
this.initChartL1()
this.initChartL2()
this.initChartR1()
this.initChartR2()
this.initChinaChart()
this.initProjectList()
}, 0)
},
methods: {
numFormat(value) {
if (!value) return '0'
var intPart = Number(value).toFixed(0) // 获取整数部分
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
}
},
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
},
initChinaChart() {
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 }
]
var moveLine = {
normal: [
{
fromName: '太原市',
toName: '吕梁市',
coords: [
[112.3352, 37.9413],
[111.3574, 37.7325],
],
},
{
fromName: '太原市',
toName: '忻州市',
coords: [
[112.3352, 37.9413],
[112.4561, 38.8971],
],
},
{
fromName: '太原市',
toName: '临汾市',
coords: [
[112.3352, 37.9413],
[111.4783, 36.1615],
],
},
{
fromName: '太原市',
toName: '阳泉市',
coords: [
[112.3352, 37.9413],
[113.4778, 38.0951],
],
},
{
fromName: '太原市',
toName: '晋中市',
coords: [
[112.3352, 37.9413],
[112.7747, 37.37],
],
},
{
fromName: '太原市',
toName: '运城市',
coords: [
[112.3352, 37.9413],
[111.1487, 35.2002],
],
},
{
fromName: '太原市',
toName: '大同市',
coords: [
[112.3352, 37.9413],
[113.7854, 39.8035],
],
},
{
fromName: '太原市',
toName: '晋城市',
coords: [
[112.3352, 37.9413],
[112.7856, 35.6342],
],
},
{
fromName: '太原市',
toName: '长治市',
coords: [
[112.3352, 37.9413],
[112.8625, 36.4746],
],
},
{
fromName: '太原市',
toName: '朔州市',
coords: [
[112.3352, 37.9413],
[113.0713, 39.6991],
],
},
],
}
/*获取地图数据*/
let myChart = echarts.init(this.$refs['echarts-map'])
echarts.registerMap('shanxi', {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
id: '1409',
properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
geometry: {
type: 'Polygon',
coordinates: [
'@@Vx@lnbn¦WlnnUm°²VVVVVnUnºlz@l@J@kXWVXl@La@KULlbnKlLnKLnKÆXn°bVV@bUVl°Un@LnaVJUbW@UX²l@ČwlVVIWnkÆa°anVKn°UW¯@aVUVk@Un@aV@ValwUanmWUk@WVUUanaVwnLVl°@nk@mVU@UVK@wLVKVU@K@UUKVUV@@bnLaVaôlIXmlKX_°KVV@bVV@zV`kblIVUlL@bnV@VĊllVlIXW@kaU²blKVnIlJalbXXlWVn°JnnL@l@XlJlaX@XW²@l_VmnKUblU@mnkVK¯@U@ma@kX¥VmakkLa@a@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@VkaWWkXKmXk¯@WKLkak@±bw@aa@aka@ma¯@LKÇÅkKWbkmġ±ÅULUKVVkm¯LUVVbUwUW¯bmULxWJ@klmkUm@@KnwVkVK@akw@@a¯bKknVUIb¯mmbk@UbmKUL@xUU@klmLUlVXIVVVUVUU`mLXVWbXnW`Ų°xmxU@mĉwU@mbU@UmbkVW¦kJ@X@`¯Im@UlUVVnb@bWJXnmbJUUUUa@UamIkax@@x@b',
],
encodeOffsets: [[113614, 39657]],
},
},
{
type: 'Feature',
id: '1411',
properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
geometry: {
type: 'Polygon',
coordinates: [
'@@@a@w@wlbnJVb@VbVVVInaWmXI@aaUmVUVkn@°J@_W@lIX¥lUnaVV@naV@xĊnV@wn¯wƱX_WmXaWUnKV_VVUUUUWJkUVnKlk¯@@kmKUaűKkU@WmI@WUIlUUmVwXw@UlUVwV@LnbW@anU@UaVkô@l»n@naJnUÈLVaÆUUVmVKV²L@mU_lK@UVWkUa@a@U¯aUaÑóÑUbKk@@ak¯mVaUwVÑkWUmK@UUKmXUWÝwUaLUU@aWJUUU@UaÝU@WL@VKVaVI@WnU@alIVK@kImIkJ@m@@@_K@x@kaW@U@Vmn@UK@mIJUXV¤XXWlkKkkK@XmJVakImJU@ó¯LWKUV@nUVLkxmKkLma@kXKmmLabLmK@V@mXVÆUxX@`nLaV@@VmLUVnLlLb@°²nx@bVUxlb@V¯bUV@zVXVĊXVx@lVn@VnnmU@LlJXVz¯VWVXbV@bmnVUVkÇþÅ@XVxmbUlVUlnW@Xl@VLXÒ@bÞJ°¦Lò@nUb@°X@XbmVUVnb@xx',
],
encodeOffsets: [[113614, 39657]],
},
},
{
type: 'Feature',
id: '1410',
properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
geometry: {
type: 'Polygon',
coordinates: [
'@@nW@@UnLKabKnnWL@lnblKnLlwKVU@mVUXL°KôV@nIlJUbnI@WlLllLXkWWU£VWInJ@VL@nm@UVX@lb@@wL@`@n@V@lw@nVmVXWmwnUla@_lKwVlUn°xVKVXXWlUVVI@K@Kn°KwlVlU@kna@V_WnmUVm@kXml_@mLlKXw°m@_ôJVUV@Xl@UaV@Va°Ilk»VwUkVmwUmmVn@V¯@KUwmK@U¯wUVÝ@mJUnWK@@UnKVa_lykUmKÛnm@x@UUlwVkXW@a@U@@K@kIVnammVakUl@wX@@k¯@VVbml@°UbULmlVbnbÅK±VKVXUJWa@ULWaUU@@U@aWK@UkxUKLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUxLlUUx@VUVU@aIUlL@°mLUbkUUaWUUaUU@aWKLWJ@bUL@VUVVbU@m@a@kmKmnĉlUKXWUblbxmIkU@xWb@lkVxLXmzVV@bklVVUzm@bk@Vx@xlU@lUbVnl@Wxnl@n@UbVmLmb@`X@lUX@@xlnkLWaUJnnWVVn@l@bULVV@lV@XnJVX',
],
encodeOffsets: [[113063, 37784]],
},
},
{
type: 'Feature',
id: '1407',
properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
geometry: {
type: 'Polygon',
coordinates: [
'@@@lInJlJ@ULkJ@bmV@XUJUbL@UXKV@ÞVbV@VVXI@bVVKVbÞxVXnWVL@VnLVlXÒUVxUb°nl@bl@LVaôÒÒVb°b@VnLnnV@lmn@lbUV@JUVVXkl@lUzmJ@xXklbUnJVUbnUlbV@nlLX@lakV`Ub°@XVJnUL²KlxnI@KV@lbUbVVKnVl@zlm@U@nI@WUaVl@@mVU@XkW@nkVKV_Vwy@knwVa@XalU@Vnml@X@VLKVaÞbnnlJImVKnVVVInVlU@m@mXK@UmyUI@mWUUakamw@wUwmLkakwVmKw@wUam£y@am_W@UU@knmmamU@WUa@knw@UUUUV@nJm@mVUkKVUUUkKmwKULKUImV@lUnnm@mbUK@°bUnmbUmkkWUb@am@UXkK@a±@V@ĉÅVUXVxUVkLWl¯@@bULUlm@@nm`XlWakIkmVUbUL@Vm@kI@@Km@VaXI@W@aU@kUVU_KbJkkÇb@nkKmLwÅW@kVUUVU@WUIJmIXmma@_kyVaUUlkUm@kUx¯Lm@L@LUJUkVWXUWUL¯wVmUkxkL@`bkmVnxXUWUnm@kxU@',
],
encodeOffsets: [[114087, 37682]],
},
},
{
type: 'Feature',
id: '1408',
properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
geometry: {
type: 'Polygon',
coordinates: [
'@@VlnJwkaVaXWVLĊknmnLl@@bnV@UaVU@UVK@aXIKXL@bVVVbXVVblVaVnK@¯KVkJ@bVVU@UVwkVKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVVKVLlw@VXL@b@VV@VXbVK@XbVIUWLU²ÆLmaUankVKVa¯@nkUaU°@n@@kWaUVaXUW@IXKVw@UWU@W@@UUU@mn@`m@UUULkUmJIU@@UK@U@anak_@wmKUwmakVkmKVk¯bw`kwUIÇx¯»ÇaÅmn@@mmUkV@wkKW@kxmLUkĉLÝkxÝw¯lóVUmV@ĀVVX¦W¤kz@`Vx°²ĸ@Ul@xêĸNJ°¤VVlXLWnXxmV@nUl@',
],
encodeOffsets: [[113232, 36597]],
},
},
{
type: 'Feature',
id: '1402',
properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
geometry: {
type: 'Polygon',
coordinates: [
'@@²£yl@ČĖ@bĸĢbĸXaKŤnn@ŎôllÈxnVnÞÇV@bnXllL°KbVb@J@b@UxlKXLlKlXk@UlkJlkUVKXUÇVIVm@_nÇLalwVnU@UUwma@aaÝaLmUk@@W@U@@XwVWÝUUUk@@VmLKV»nwUwaUL@`mzJUIVUaUwKUaVIlJôanÑlLVUn@a@VV@@UUwVK°Vn_lJÆLéW@UUUÅ@»lm@aÞIVwXWUUkkm@U@aU@mwU£VWU_kWmXwW_°yUkkK@UÇK@kkUVymóKU@KWIbUak@mJ@bkbmLkUmkVUW¦@lnb@@V°ULml@nkVaVmLUnk`±@XWW@kbǦX¯WxI@xmbmxXlWV@bÅUz@Jb@bÞbU@Wbk@xk@WX¯VÛWÝbÝUkVUU@alI@a@akLWam@U¯UUmÇL@K@aU@¯VUkKmX@`@kJ@nVUb@lbVÆXVWULU`VbkLUV@XWl@bXJ@VbV@Vl',
],
encodeOffsets: [[115335, 41209]],
},
},
{
type: 'Feature',
id: '1404',
properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
geometry: {
type: 'Polygon',
coordinates: [
'@@UkLky@IJVa@mÞaWy@_W@_WXVlUVw@nw°K@mUVamVkU@mmmnLVUmKXaU@IlKVUnK@UmWkX@WV_V@akU@aKWIXyIUVmUnUa@WaXUVKVmkUWVkULU@@VbKbIUm@mbVLxWUUkn±V¯wbÅJUbmLkbmKÅKbVnUbVKUbKUbmLKmbaKkUm@UnnVnxUVlUxl¼k¯JUbU@Vbk@WU@UVóI@`¯nWxkLK@nk`Wn@lUnVnmXU`@mb@lkV@VnklVVUblz@`nbWnnJIVJ@XUVVUV@lÆXxnKlL@maÈllIaLV`UlVV@@b@XJWUb@n@L@lJn@@UVKVaUlnlJXbkWn_@mn@VkVK@a°@XklKVUUwVWUĊÆ@U²@@blLVWn@@bVaXllVnnaVma@¯VLnan@mVm@knUVJ',
],
encodeOffsets: [[116269, 37637]],
},
},
{
type: 'Feature',
id: '1406',
properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
geometry: {
type: 'Polygon',
coordinates: [
'@@XXWVXVWnnlnn@èƼ@xlVnblVÈUVl@blnLÜĊmUkU@Ua@WI@aXk@WVUlKUaV_VKXWUUÅka@VaU@mlI@@_nWLVl°UV@@b@LÈKVn°V@VnXblK@b@bkJ@bVVlUÞVÞaXÜ°UXWl@wl@XaV@Ýa@aa@IVyÆ@aXUWknwna@wJXw°WÈ¥kI@W@kmKm¯IUmkXWWkabkImJUkL±aVb@lWXkJUkĉk@UmU@aKkVUkJlaU_y@UU@aUU¯LW`kLWnkJóbUbmK@aU@UVVL@VL@UVULK@xUL@VUV@nml¯@UkmKUxmbVbUV@XlXVmnVbkxUbU@bm@@VUlUVb°@VX¯m',
],
encodeOffsets: [[114615, 40562]],
},
},
{
type: 'Feature',
id: '1405',
properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
geometry: {
type: 'Polygon',
coordinates: [
'@@lVLbanLnKVaLVaLUVaUmaÆLnLlanKVaÆIa°x²UlmVVXwUKna@VnJaLa@UV@@alUkKVKnkmmVwUkw@@kxWUXW@@mk@aUa@a¯aLkKmwkUm@kL@K@aWIXmVXWkUVakL@UVKw@aUK@UUKmLU@¯nKUwVUIWJUWmka@UXJk@UkmW@kLWKVx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@VbLkKmV@XWVUbVXb@lm@@lW@@xklVUbnnmbUlJ@@L@@Vb@WXUlkxVV@wn@ÜmnLlVkz`UbmL@V@XLmVnIÞ@VU°x@VnLxV@LU°',
],
encodeOffsets: [[115223, 36895]],
},
},
{
type: 'Feature',
id: '1401',
properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
geometry: {
type: 'Polygon',
coordinates: [
'@@@VV@wVKnLVal@na°naVJUlmL°a@b@lx@bULUlmx@Ln@lVknl@XIwKVn°aVXVxUaVU°KnUlUVLKÆV²ĢlnXalLÈÆLKUaVkUanmWUa@WwkUWU¯y¯Ñ@anIl@@aVUmIymULUUVakaU@@LmJkw±LKmVUI@W¯VaU_lkbW@kK@mUkaVmVaUIVmalkW@wnIVy@klkWUUVI@UVkam@knU@mmmK@bblVUX@VkLV`@n±KUULUnVVÅUbÇKmVImbm@k¼ó@Ulb@VmV@bXmaK@UUxkVV@xWUxVnkVVJ@XnJ@XlV²LÆVbnL@l@°',
],
encodeOffsets: [[114503, 39134]],
},
},
{
type: 'Feature',
id: '1403',
properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
geometry: {
type: 'Polygon',
coordinates: [
'@@°@nb@lb@bbb@x²al@lbKXU@mkUWkkmUUVwV@XUW@naVklKXblKnLnLVanImaXKlLaV@U@KUKWalXK@£WKXUV@VUUUVW_V@W@@K@UIWmXUmULnJkImmÝaUbLK@UWk@mnU@kVWb@Ubmx@lzUx`UULml@XWl@UV@nk@UVb@XJm@@Vknyk@zJnUV@bk@mJ@b°Ò°zXVlVXx@bXVmnVbUlVb',
],
encodeOffsets: [[115864, 39336]],
},
},
],
UTF8Encoding: true,
})
var mapFeatures = echarts.getMap(this.mapName).geoJson.features
mapFeatures.forEach(v => {
// 地区名称
var name = v.properties.name
// 地区经纬度
this.geoCoordMap[name] = v.properties.cp
})
//
当前阶段:可论证阶段
// 时间节点:2021.10-2022.10
let option = {
tooltip: {
padding: 15,
enterable: true,
transitionDuration: 1,
formatter: (params, ticket, callback) => {
// 清空所有轮播
for (var k in this.geoCoordMap) {
myChart.dispatchAction({
// type: 'geoUnSelect',
type: 'downplay',
name: k,
})
}
// 如果鼠标滑动到线线上面,则返回空
myChart.dispatchAction({
// type: 'geoSelect',
type: 'highlight',
name: params.name,
})
if (params.componentSubType == 'lines') {
return
}
if (params.componentSubType == 'scatter') {
let tipHtml = `
`
callback(ticket, tipHtml)
return tipHtml
}
if (params.componentSubType == 'map') {
let tipHtml = `
`
callback(ticket, tipHtml)
return tipHtml
}
},
},
visualMap: {
show: false,
min: 0,
max: 300,
right: 0,
bottom: 0,
text: ['高', '低'],
textStyle: {
color: '#f1f1f1'
},
realtime: false,
calculable: false,
inRange: {
color: ['lightskyblue', '#2754b7']
}
},
geo: {
show: true,
map: 'shanxi',
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '100%',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
roam: false,
itemStyle: {
normal: {
areaColor: '#1946a8',
shadowColor: '#1946a8',
borderWidth: 1, //设置外层边框
borderColor: '#1946a8',
shadowOffsetX: 10,
shadowOffsetY: 5,
shadowBlur: 2,
},
emphasis: {
areaColor: '#1946a8',
borderColor: '#d4bc1d',
borderWidth: 2, //设置外层边框
},
},
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData(data),
symbolSize: function (val) {
return 10
},
label: {
normal: {
formatter: '{b}',
position: [10, 10],
fontSize: 15,
fontWeight: 600,
fontStyle: 'italic',
color: '#fff',
show: true,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: '#000',
borderWidth: 2,
borderColor: '#fff',
},
},
},
{
type: 'map',
map: this.mapName,
geoIndex: 0,
aspectScale: 1.5, //长宽比
showLegendSymbol: true, // 存在legend时显示
label: {
normal: {
show: true,
},
emphasis: {
show: false,
textStyle: {
color: '#fff',
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
},
},
animation: false,
data: data,
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 6,
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: this.convertData(
data
.sort(function (a, b) {
return b.value - a.value
})
.slice(0, 5)
),
symbolSize: function (val) {
return 15
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: false,
},
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow',
},
},
zlevel: 1000,
},
{
name: '线路',
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度,值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
color: '#00FFFF',
width: 1,
type: 'dashed',
opacity: 0.5, //尾迹线条透明度
curveness: -0.3, //尾迹线条曲直度
},
},
data: moveLine.normal,
},
],
}
let that = this
myChart.on('click', function (params) {
if (params.name == '太原市') {
that.showTip = true
}
// window.open('https://www.baidu.com')
})
tools.loopShowTooltip(myChart, option, {
interval: 2000,
loopSeries: false,
});
myChart.setOption(option)
},
// initChartTip(){
// let myChart = echarts.init(this.$refs['echartTip'])
// let option = {
// tooltip: {
// trigger: 'item',
// },
// color: ['#6682f5', '#69c0ff', '#43ede3','#8ba2ff'],
// legend: {
// top: '0',
// orient: 'vertical',
// left: '2%',
// textStyle: {
// color: '#9DB9EB',
// },
// },
// series: [
// {
// name: '',
// type: 'pie',
// center: ['45%','40%'],
// radius: ['35%', '50%'],
// labelLine: {
// normal: {
// lineStyle: {
// width: 1,
// },
// },
// },
// data: statusList,
// },
// ],
// }
// myChart.setOption(option)
// tools.loopShowTooltip(myChart, option, {
// nterval: 2000,
// loopSeries: true,
// })
// myChart.on('click', function(param) {
// console.log(param)
// window.open('https://www.baidu.com')
// })
// },
initChartTip2() {
let myChart = echarts.init(this.$refs['echartTip2'])
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
// dataZoom:[
// {
// // start: 9,//默认为@
// // end: 100,//黑认认为1@0
// type: "slider",
// show: true,
// // xAxisIndex: [0]
// handlesize: 0,//滑动条的 左右2个滑动条的大小
// startValue: 9,// 初始显示值
// endValue: 6,// 结束显示值
// height: 10,//组件高度
// left:"5%",
// right: "4%",//右边的距离
// bottom: "25%",//底边的距离
// borderColor:"#939",
// fillerColor:"#269cdb",
// borderRadius: 5,
// backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
// showDataShadow: false,//是否显示数据阴影
// showDetail: false,//即拖拽时候是否显示详细数值信息
// truerealtime: false,//是否实时更新
// filterMode: "filter"
// },{
// type:'inside',
// show: true,
// start: 1,
// end: 100
// }
// ],
grid: {
top: '10%',
right: '3%',
left: '10%',
bottom: '30%',
},
legend: {
top: '1',
right: '20',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
xAxis: {
data: tipData.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轴文字颜色
},
},
},
yAxis: [
{
type: 'value',
nameTextStyle: {
color: '#ebf8ac',
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
formatter: '{value} 亿',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
],
series: [
{
name: '投资金额',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: tipData.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: executeList.map(item=>item.value2),
// },
],
}
myChart.on('click', function (data) {
if (data.name == '交控集团') {
window.location.href = './investHomeChild.html?type=1'
}
})
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
myChart.setOption(option)
},
initChartTip3() {
let myChart = echarts.init(this.$refs['echartTip3'])
let option = {
title: {
//text : '产业类别',
x: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
grid: {
top: '15%',
right: '3%',
left: '10%',
bottom: '30%',
},
legend: {
top: '1',
right: '15',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
xAxis: {
data: tipTopData.map(item => item.name),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 30,
textStyle: {
color: '#fff'//color: 'rgba(255,255,255,0.6)', //X轴文字颜色
},
},
},
yAxis: [
{
type: 'value',
nameTextStyle: {
color: '#ebf8ac',
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
formatter: '{value} 亿',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
],
series: [
{
name: '2022年投资完成额',
type: 'line',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#69c0ff',
},
]),
},
},
data: tipTopData.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: executeList.map(item=>item.value2),
// },
],
}
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
},
initChartTip4() {
let myChart = echarts.init(this.$refs['echartTip4'])
let option = {
title: {
//text : '投资项目列表',
x: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
// dataZoom:[
// {
// // start: 9,//默认为@
// // end: 100,//黑认认为1@0
// type: "slider",
// show: true,
// // xAxisIndex: [0]
// handlesize: 0,//滑动条的 左右2个滑动条的大小
// startValue: 9,// 初始显示值
// endValue: 6,// 结束显示值
// height: 10,//组件高度
// left:"5%",
// right: "4%",//右边的距离
// bottom: "25%",//底边的距离
// borderColor:"#939",
// fillerColor:"#269cdb",
// borderRadius: 5,
// backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
// showDataShadow: false,//是否显示数据阴影
// showDetail: false,//即拖拽时候是否显示详细数值信息
// truerealtime: false,//是否实时更新
// filterMode: "filter"
// },{
// type:'inside',
// show: true,
// start: 1,
// end: 100
// }
// ],
grid: {
top: '15%',
right: '3%',
left: '10%',
bottom: '20%',
},
legend: {
top: '0',
right: '20',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
xAxis: {
data: tipBottomData.map(item => item.name),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 30,
textStyle: {
color: '#fff'//color: 'rgba(255,255,255,0.6)', //X轴文字颜色
},
},
},
yAxis: [
{
type: 'value',
nameTextStyle: {
color: '#ebf8ac',
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
formatter: '{value} 亿',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
],
series: [
{
name: '2022年投资完成额',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: tipBottomData.map(item => item.value),
},
],
}
myChart.on('click', function (data) {
if (data.name == '华阳新材') {
window.location.href = './investHomeChild.html?type=2'
}
})
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
},
//这个是3D环图
// initChartL1() {
// let myChart = echarts.init(this.$refs['echartR1'])
// // 生成扇形的曲面参数方程,用于 series-surface.parametricEquation
// function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
// // 计算
// let midRatio = (startRatio + endRatio) / 2;
// let startRadian = startRatio * Math.PI * 2;
// let endRadian = endRatio * Math.PI * 2;
// let midRadian = midRatio * Math.PI * 2;
// // 如果只有一个扇形,则不实现选中效果。
// if (startRatio === 0 && endRatio === 1) {
// isSelected = false;
// }
// // 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)
// k = typeof k !== 'undefined' ? k : 1 / 3;
// // 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)
// let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
// let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// // 计算高亮效果的放大比例(未高亮,则比例为 1)
// let hoverRate = isHovered ? 1.17 : 1;
// // 返回曲面参数方程
// return {
// u: {
// min: -Math.PI,
// max: Math.PI * 3,
// step: Math.PI / 32,
// },
// v: {
// min: 0,
// max: Math.PI * 2,
// step: Math.PI / 20,
// },
// x: function (u, v) {
// if (u < startRadian) {
// return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
// }
// if (u > endRadian) {
// return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
// }
// return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
// },
// y: function (u, v) {
// if (u < startRadian) {
// return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
// }
// if (u > endRadian) {
// return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
// }
// return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
// },
// z: function (u, v) {
// if (u < -Math.PI * 0.5) {
// return Math.sin(u);
// }
// if (u > Math.PI * 2.5) {
// return Math.sin(u);
// }
// return Math.sin(v) > 0 ? 1 : -1;
// },
// };
// }
// // 生成模拟 3D 饼图的配置项
// function getPie3D(pieData, internalDiameterRatio) {
// let series = [];
// let sumValue = 0;
// let startValue = 0;
// let endValue = 0;
// let legendData = [];
// let k =
// typeof internalDiameterRatio !== 'undefined'
// ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
// : 1 / 5;
// // 新增标签 series @20210613
// let labelSeries = {
// id: 'labelSeries',
// type: 'bar3D',
// //zlevel:-9,
// barSize: [0.1, 0.1],
// data: [],
// label: {
// show: true,
// formatter: function (params) {
// return `${params.name}\n${params.value[3]}`;
// },
// backgroundColor: '#fff',
// },
// };
// // 为每一个饼图数据,生成一个 series-surface 配置
// for (let i = 0; i < pieData.length; i++) {
// sumValue += pieData[i].value;
// let seriesItem = {
// name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
// type: 'surface',
// parametric: true,
// wireframe: {
// show: false,
// },
// pieData: pieData[i],
// pieStatus: {
// selected: false,
// hovered: false,
// k: k,
// },
// };
// if (typeof pieData[i].itemStyle != 'undefined') {
// let itemStyle = {};
// typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
// typeof pieData[i].itemStyle.opacity != 'undefined'
// ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
// : null;
// seriesItem.itemStyle = itemStyle;
// }
// series.push(seriesItem);
// }
// // 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,
// // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。
// for (let i = 0; i < series.length; i++) {
// endValue = startValue + series[i].pieData.value;
// series[i].pieData.startRatio = startValue / sumValue;
// series[i].pieData.endRatio = endValue / sumValue;
// series[i].parametricEquation = getParametricEquation(
// series[i].pieData.startRatio,
// series[i].pieData.endRatio,
// false,
// false,
// k
// );
// startValue = endValue;
// legendData.push(series[i].name);
// // 判断增加 label 效果 @20210613
// if (pieData[i].label && pieData[i].label.show) {
// labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
// labelSeries.data.push({
// name: series[i].name,
// value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
// itemStyle: {
// opacity: 1,
// },
// });
// }
// }
// // 补充一个透明的圆环,用于支撑高亮功能的近似实现。
// series.push({
// name: 'mouseoutSeries',
// type: 'surface',
// parametric: true,
// wireframe: {
// show: false,
// },
// itemStyle: {
// opacity: 0,
// },
// parametricEquation: {
// u: {
// min: 0,
// max: Math.PI * 2,
// step: Math.PI / 20,
// },
// v: {
// min: 0,
// max: Math.PI,
// step: Math.PI / 20,
// },
// x: function (u, v) {
// return Math.sin(v) * Math.sin(u) + Math.sin(u);
// },
// y: function (u, v) {
// return Math.sin(v) * Math.cos(u) + Math.cos(u);
// },
// z: function (u, v) {
// return Math.cos(v) > 0 ? 0.1 : -0.1;
// },
// },
// });
// // 将 labelSeries 添加进去 @20210613
// series.push(labelSeries);
// // 准备待返回的配置项,把准备好的 legendData、series 传入。
// let option = {
// //animation: false,
// legend: {
// data: legendData,
// op: '5%',
// //orient: 'vertical',
// textStyle: {
// color: '#fff',
// },
// },
// tooltip: {
// formatter: (params) => {
// if (params.seriesName !== 'mouseoutSeries') {
// return `${
// params.seriesName
// }
${option.series[params.seriesIndex].pieData.value}`;
// }
// },
// },
// // 增加渐变色尝试(手动通过 seriesIndex 指定系列) @20211228
// xAxis3D: {
// min: -1,
// max: 1,
// },
// yAxis3D: {
// min: -1,
// max: 1,
// },
// zAxis3D: {
// min: -1,
// max: 1,
// },
// grid3D: {
// show: false,
// boxHeight: 10,
// //top: '30%',
// bottom: '50%',
// viewControl: {
// //3d效果可以放大、旋转等,请自己去查看官方配置
// alpha: 30, //角度
// distance: 150, //调整视角到主体的距离,类似调整zoom
// rotateSensitivity: 0, //设置为0无法旋转
// zoomSensitivity: 0, //设置为0无法缩放
// panSensitivity: 0, //设置为0无法平移
// autoRotate: false, //自动旋转
// },
// },
// series: series,
// };
// return option;
// }
// // 传入数据生成 option
// option = getPie3D([
// {
// name: '传统产业投资',
// value: 405.29,
// itemStyle: {
// color: 'rgb(243,178,119)'
// }
// }, {
// name: '战略新兴产业投资',
// value: 196.44,
// itemStyle: {
// color: 'rgb(110,222,191)'
// }
// }, {
// name: '基础产业投资',
// value: 722.34,
// itemStyle: {
// color: 'rgb(82,161,229)'
// }
// }
// ]);
// myChart.setOption(option);
// // 监听鼠标事件,实现饼图选中效果(单选),近似实现高亮(放大)效果。
// let selectedIndex = '';
// let hoveredIndex = '';
// let that = this
// // 监听点击事件,实现选中效果(单选)
// myChart.on('click', function (param) {
// console.log(param)
// if (param.seriesName == '战略新兴产业投资') {
// that.tipTitle2 = param.seriesName
// that.showTip2 = true
// }
// // 从 option.series 中读取重新渲染扇形所需的参数,将是否选中取反。
// // let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
// // let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
// // let k = option.series[params.seriesIndex].pieStatus.k;
// // let startRatio = option.series[params.seriesIndex].pieData.startRatio;
// // let endRatio = option.series[params.seriesIndex].pieData.endRatio;
// // // 如果之前选中过其他扇形,将其取消选中(对 option 更新)
// // if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
// // option.series[selectedIndex].parametricEquation = getParametricEquation(
// // option.series[selectedIndex].pieData.startRatio,
// // option.series[selectedIndex].pieData.endRatio,
// // false,
// // false,
// // k
// // );
// // option.series[selectedIndex].pieStatus.selected = false;
// // }
// // // 对当前点击的扇形,执行选中/取消选中操作(对 option 更新)
// // option.series[params.seriesIndex].parametricEquation = getParametricEquation(
// // startRatio,
// // endRatio,
// // isSelected,
// // isHovered,
// // k
// // );
// // option.series[params.seriesIndex].pieStatus.selected = isSelected;
// // // 如果本次是选中操作,记录上次选中的扇形对应的系列号 seriesIndex
// // isSelected ? (selectedIndex = params.seriesIndex) : null;
// // // 使用更新后的 option,渲染图表
// // myChart.setOption(option);
// });
// //这里是动画
// let i = 0
// this.timeOut = setInterval(function() {
// console.log(i)
// let startRatio = option.series[i].pieData.startRatio;
// let endRatio = option.series[i].pieData.endRatio;
// let isSelected = option.series[i].pieStatus.selected;
// let k = option.series[i].pieStatus.k;
// if(i == 0){
// let startRatio2 = option.series[2].pieData.startRatio;
// let endRatio2 = option.series[2].pieData.endRatio;
// let isSelected2 = option.series[2].pieStatus.selected;
// let k2 = option.series[2].pieStatus.k;
// option.series[2].parametricEquation = getParametricEquation(startRatio2, endRatio2, isSelected2, false, k2)
// } else {
// let startRatio3 = option.series[i-1].pieData.startRatio;
// let endRatio3 = option.series[i-1].pieData.endRatio;
// let isSelected3 = option.series[i-1].pieStatus.selected;
// let k3 = option.series[i-1].pieStatus.k;
// option.series[i-1].parametricEquation = getParametricEquation(startRatio3, endRatio3, isSelected3, false, k3)
// }
// option.series[i].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, true, k)
// myChart.setOption(option);
// i ++
// if(i == 3) {
// i = 0
// }
// }, 3000);
// // 监听 mouseover,近似实现高亮(放大)效果
// myChart.on('mouseover', function (params) {
// // 准备重新渲染扇形所需的参数
// let isSelected;
// let isHovered;
// let startRatio;
// let endRatio;
// let k;
// // 如果触发 mouseover 的扇形当前已高亮,则不做操作
// if (hoveredIndex === params.seriesIndex) {
// return;
// // 否则进行高亮及必要的取消高亮操作
// } else {
// // 如果当前有高亮的扇形,取消其高亮状态(对 option 更新)
// if (hoveredIndex !== '') {
// // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 false。
// isSelected = option.series[hoveredIndex].pieStatus.selected;
// isHovered = false;
// startRatio = option.series[hoveredIndex].pieData.startRatio;
// endRatio = option.series[hoveredIndex].pieData.endRatio;
// k = option.series[hoveredIndex].pieStatus.k;
// // 对当前点击的扇形,执行取消高亮操作(对 option 更新)
// option.series[hoveredIndex].parametricEquation = getParametricEquation(
// startRatio,
// endRatio,
// isSelected,
// isHovered,
// k
// );
// option.series[hoveredIndex].pieStatus.hovered = isHovered;
// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
// hoveredIndex = '';
// }
// // 如果触发 mouseover 的扇形不是透明圆环,将其高亮(对 option 更新)
// if (params.seriesName !== 'mouseoutSeries') {
// // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 true。
// isSelected = option.series[params.seriesIndex].pieStatus.selected;
// isHovered = true;
// startRatio = option.series[params.seriesIndex].pieData.startRatio;
// endRatio = option.series[params.seriesIndex].pieData.endRatio;
// k = option.series[params.seriesIndex].pieStatus.k;
// // 对当前点击的扇形,执行高亮操作(对 option 更新)
// option.series[params.seriesIndex].parametricEquation = getParametricEquation(
// startRatio,
// endRatio,
// isSelected,
// isHovered,
// k
// );
// option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// // 记录上次高亮的扇形对应的系列号 seriesIndex
// hoveredIndex = params.seriesIndex;
// }
// // 使用更新后的 option,渲染图表
// myChart.setOption(option);
// }
// });
// // 修正取消高亮失败的 bug
// myChart.on('globalout', function () {
// if (hoveredIndex !== '') {
// // 从 option.series 中读取重新渲染扇形所需的参数,将是否高亮设置为 true。
// isSelected = option.series[hoveredIndex].pieStatus.selected;
// isHovered = false;
// k = option.series[hoveredIndex].pieStatus.k;
// startRatio = option.series[hoveredIndex].pieData.startRatio;
// endRatio = option.series[hoveredIndex].pieData.endRatio;
// // 对当前点击的扇形,执行取消高亮操作(对 option 更新)
// option.series[hoveredIndex].parametricEquation = getParametricEquation(
// startRatio,
// endRatio,
// isSelected,
// isHovered,
// k
// );
// option.series[hoveredIndex].pieStatus.hovered = isHovered;
// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
// hoveredIndex = '';
// }
// // 使用更新后的 option,渲染图表
// myChart.setOption(option);
// });
// // 新增监听图例事件,同步显示隐藏对应 label @20210613
// myChart.on('legendselectchanged', function (params) {
// let seriesLength = option.series.length;
// console.log(option.series[seriesLength - 1].data);
// for (let i = 0; i < option.series[seriesLength - 1].data.length; i++) {
// console.log(option.series[seriesLength - 1].data[i]);
// if (option.series[seriesLength - 1].data[i].name == params.name) {
// console.log(option.series[seriesLength - 1].data[i]);
// params.selected[params.name]
// ? (option.series[seriesLength - 1].data[i].itemStyle.opacity = 1)
// : (option.series[seriesLength - 1].data[i].itemStyle.opacity = 0);
// }
// }
// myChart.setOption(option);
// });
// console.log('66', myChart);
// },
//这个是2d环图
initChartL1 () {
var chartData = []
var timer = null;
var timer2 = null;
var i = 0;
industryList.forEach((item,index) => {
let obj = {
name: item.name,
y: item.value,
sliced: false,
selected: false,
color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
}
chartData.push(obj)
})
let that = this
var chart = Highcharts.chart('echartR1', {
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){
if (e.point.name == '战略新兴产业') {
that.tipTitle2 = e.point.name
that.showTip2 = true
}
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 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)',
useHTML: true, //开启html模式
style: {
color:'#fff',
},
formatter: function(e){
//console.log(this, e)
this.percentage = Math.round(this.percentage)
// e.options.backgroundColor = 'rgba(0,0,0,0.5)'
// e.options.style.color = '#fff'
return `${this.key}:${this.percentage}%
金额:${this.y}亿`
},
//pointFormat:
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom',
itemStyle:{
color: '#fff'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 180,
innerSize : 110, //环形图中间空白,0为饼图
depth: 28, //立体高度
slicedOffset: 23, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
center: ['35%','50%'],
point: {
events:{
click:function(e){ //点击事件
//console.log(e)
if (e.point.name == '战略新兴产业') {
that.tipTitle2 = e.point.name
that.showTip2 = true
}
},
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){
if (e.point.name == '战略新兴产业') {
that.tipTitle2 = e.point.name
that.showTip2 = true
}
}
}
},
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){
if (e.point.name == '战略新兴产业') {
that.tipTitle2 = e.point.name
that.showTip2 = true
}
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
});
function autoTooltip(point) {
chart.tooltip.refresh(point);
}
// let myChart = echarts.init(this.$refs['echartR1'])
// let option = {
// tooltip: {
// trigger: 'item',
// //position: ['65%', '42%'],
// position: (point,params,dom,rect,size) => {
// if(params.name == '传统产业'){
// return ['55%','25%']
// } else if (params.name == '战略新兴产业') {
// return ['55%','65%']
// } else if (params.name == '基础产业') {
// return ['18%','35%']
// }
// },
// formatter: params => {
// return ` ${params.name}:${params.percent}%
金额:${params.value}亿`
// }, //+ '
'+ '{a1}:{c1}' + '%',
// axisPointer: {
// type: 'cross',
// },
// },
// color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
// legend: {
// left: '2%',
// bottom: '2%',
// orient: 'vertical',
// //right: '2%',
// textStyle: {
// color: '#9DB9EB',
// },
// },
// series: [
// // {
// // hoverOffset: 0,
// // startAngle: 90,
// // type: "pie",
// // radius: [48, 55],
// // center: ["50%", "50%"],
// // itemStyle: {
// // normal: {
// // borderColor: 'rgba(1,31,6,0.7)',
// // borderWidth: 4
// // }
// // },
// // tooltip: {
// // show: false
// // },
// // labelLine: {
// // show: false
// // },
// // label: {
// // show: false
// // },
// // data: industryList
// // },
// {
// name: '',
// type: 'pie',
// radius: ['50%', '75%'],
// center: ["50%", "50%"],
// label:{
// show: false,
// },
// itemStyle: {
// normal: {
// borderColor: 'rgba(1,31,64,0.7)',
// borderWidth: 6
// }
// },
// labelLine: {
// show: false,
// },
// data: industryList,
// },
// ],
// }
// let that = this
// myChart.on('click', function (param) {
// if (param.name == '战略新兴产业') {
// that.tipTitle2 = param.name
// that.showTip2 = true
// }
// })
// myChart.setOption(option)
// tools.loopShowTooltip(myChart, option, {
// nterval: 2000,
// loopSeries: true,
// })
},
initChartL2() {
let myChart = echarts.init(this.$refs['echartL2'])
let option = {
tooltip: {
formatter: data => {
return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿`
},
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
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
}
],
grid: {
top: '16%',
right: '3%',
left: '10%',
bottom: '23%',
},
legend: {
top: '1',
right: '10',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
xAxis: {
data: executeList.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轴文字颜色
},
},
},
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: 'rgba(250,250,250,0.6)',
},
},
},
],
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: executeList.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: executeList.map(item => item.value2),
},
],
}
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
let arr = executeList.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);
},
initChartR1() {
let myChart = echarts.init(this.$refs['echartL1'])
let option = {
tooltip: {
trigger: 'axis',
formatter: '{a0}:{c0}' + '亿元', //+ '
'+ '{a1}:{c1}' + '%',
axisPointer: {
type: 'cross',
},
},
grid: {
top: '16%',
right: '10%',
left: '10%',
bottom: '22%',
},
// legend: {
// top: '1',
// textStyle: {
// color: 'rgba(250,250,250,0.6)',
// },
// },
xAxis: {
data: statusList.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轴文字颜色
},
},
},
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: 'rgba(250,250,250,0.6)',
},
},
},
{
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: statusList.map(item => item.value),
},
],
}
myChart.setOption(option)
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
},
initChartR2() {
var chartData = []
var timer = null;
var timer2 = null;
var i = 0;
chartDateR2.forEach((item,index) => {
let obj = {
name: item.name,
y: item.value2,
x: item.value,
sliced: false,
selected: false,
color: index == 0 ? '#43ede3' : '#8ba2ff'
}
chartData.push(obj)
})
let that = this
var chart = Highcharts.chart('echartR2', {
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){
console.log(e)
}
}
},
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);
},
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: true, //开启html模式
style: {
color:'#fff',
},
formatter: function(e){
//console.log(this)
let num = chartData[this.colorIndex].x
this.percentage = Math.round(this.percentage)
return `${this.key}:${this.percentage}%
投资完成额:${this.y}亿
投资数量:${num}个`
},
//pointFormat:
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom',
itemStyle:{
color: '#fff'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 180,
innerSize : 110, //环形图中间空白,0为饼图
depth: 28, //立体高度
slicedOffset: 23, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
center: ['35%','50%'],
point: {
events:{
click:function(e){ //点击事件
},
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){
console.log(e)
}
}
},
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){
console.log(e)
}
}
},
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);
}
// let myChart = echarts.init(this.$refs['echartR2'])
// let option = {
// tooltip: {
// trigger: 'item',
// position: (point,params,dom,rect,size) => {
// if(params.name == '新建'){
// return ['55%','45%']
// } else {
// return ['15%','40%']
// }
// },
// formatter: params => {
// return ` ${params.name}:${params.value}个
投资完成额:${params.data.value2}亿`
// }, //+ '
'+ '{a1}:{c1}' + '%',
// axisPointer: {
// type: 'cross',
// },
// },
// color: [ '#43ede3', '#8ba2ff'],
// legend: {
// left: '5%',
// bottom: '2%',
// orient: 'vertical',
// //right: '2%',
// textStyle: {
// color: '#9DB9EB',
// },
// },
// series: [
// {
// name: '',
// type: 'pie',
// radius: ['50%', '75%'],
// center: ["50%", "50%"],
// label:{
// show: false,
// },
// itemStyle: {
// normal: {
// borderColor: 'rgba(1,31,64,0.7)',
// borderWidth: 6
// }
// },
// labelLine: {
// show: false,
// },
// data: chartDateR2,
// },
// ],
// }
// myChart.setOption(option)
// tools.loopShowTooltip(myChart, option, {
// nterval: 10000,
// loopSeries: true,
// })
},
initProjectList() {
let dataList = []
projectList.map(item => {
dataList.push([item.office,item.name, item.value + '亿'])
})
this.storageRecordConfig = {
header: ['企业集团', '项目名称', '投资金额'],
headerBGC: '#05507b33',
oddRowBGC: '#05507b33',
evenRowBGC: '',
headerHeight: '40',
rowNum: 5,
columnWidth: [100, 350],
align: ['center', 'center', 'center'],
data: dataList,
}
}
},
})