let app = new Vue({
el: '#app',
data () {
return {
echartEnterpriseShow: false, // 企业额度分析控制
mapChart: '',//地图专用echarts
chartCarousel: '',//做大屏轮播专用echarts
mapTipShow: false,
echartSingleTipShow: false,
echartDoubleTipShow: false,
backShow: false,
titleUrl: '',
titleName: '',
yellowCount: 0, // 黄圈轮播参数
yellowPosition: 40,// 黄圈悬浮窗位置参数
echartR1Fd: true,
echartR2Fd: 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,
mapName: 'shanxi',
geoCoordMap: {},
storageRecordConfig2: center9,
titleList: right1,
centerLeftList: right3,
storageRecordConfig: left11
}
},
created () {
this.time = formatDate()
this.timer = setInterval(() => {
this.time = formatDate()
}, 1000)
this.timer2 = setInterval(() => {
this.changeYellow()
}, 2000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer);
}
if (this.timer2) {
clearInterval(this.timer2);
}
},
mounted () {
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: {
// 回到中国地图
backChina () {
this.backShow = 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.echartDoubleTipShow = true
setTimeout(() => {
this.initChartLTip2()
this.initChartLTip3()
})
},
initChartLTip () {
let myChart = 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', // 文字字体大小
},
},
xAxis: {
data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "white",
fontSize: '20'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '亿元',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '20'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: '20'
},
},
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
//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: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28],
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",
},
right: 'center',
y: 5,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5,
},
};
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
myChart.on('click', function (param) {
window.location.href = './investHomeChild.html?type=2'
})
myChart.setOption(option);
},
initChartLTip2 () {
let myChart = echarts.init(document.getElementById("echartSingleTip2"));
let option = {
grid: {
top: 35,
right: 0,
left: 60,
bottom: 50,
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
},
},
xAxis: {
data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "white",
fontSize: '15'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '亿元',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '15'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: '15'
},
},
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
//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: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28],
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",
},
right: 'center',
y: 5,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5,
},
};
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
myChart.on('click', function (param) {
window.location.href = './investHomeChild.html?type=2'
})
myChart.setOption(option);
},
initChartLTip3 () {
let myChart = echarts.init(document.getElementById("echartSingleTip3"));
let option = {
grid: {
top: 35,
right: 0,
left: 60,
bottom: 50,
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
},
},
xAxis: {
data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "white",
fontSize: '15'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '个',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
fontSize: '15'
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: '15'
},
},
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
//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: [359.91, 400.49, 117.65, 148.96, 34.84, 17.79, 26.15, 26.18, 16.83, 0.00, 43.49, 0.00, 43.39, 76.53, 5.05, 8.59, 0.00, 0.28],
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",
},
right: 'center',
y: 5,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5,
},
};
tools.loopShowTooltip(myChart, option, {
nterval: 2000,
loopSeries: true,
})
let that = this
myChart.on('click', function (param) {
window.location.href = './investHomeChild.html?type=2'
})
myChart.setOption(option);
},
closeTap () {
this.echartEnterpriseShow = false
this.mapTipShow = false
this.echartSingleTipShow = false
this.echartDoubleTipShow = false
},
//点击弹窗左半部分
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.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 = 0.1463;
var data = [value];
let option = {
backgroundColor: 'transparent',
title: [
{
// text: '总额度285.48亿',
// formatter: `总额度285.48亿`,
x: '37%',
y: '80%',
textStyle: {
fontSize: 24,
fontWeight: 'bold',
color: '#2CB7E0',
lineHeight: 16,
textAlign: 'center',
},
}
],
series: [
{
type: 'liquidFill',
radius: '70%',
center: ['50%', '40%'],
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5',
},
{
offset: 1,
color: '#2ca3e2',
},
],
globalCoord: false,
},
],
data: [value, value], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: 'RGBA(51, 66, 127, 0.7)',
},
label: {
normal: {
formatter: function (data) {
return (data.value * 100).toFixed(2) + '%'
},
textStyle: {
fontSize: 30,
color: '#fff',
},
},
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: 'transparent',
},
},
},
],
}
myChart.setOption(option)
},
initChartL1 () {
let myChart = echarts.init(this.$refs['echartL1'])
var value = left2[0];
let option = {
backgroundColor: 'transparent',
title: [
{
// text: '总额度285.48亿',
// formatter: `总额度285.48亿`,
x: '37%',
y: '80%',
textStyle: {
fontSize: 24,
fontWeight: 'bold',
color: '#2CB7E0',
lineHeight: 16,
textAlign: 'center',
},
}
],
series: [
{
type: 'liquidFill',
radius: '70%',
center: ['50%', '40%'],
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5',
},
{
offset: 1,
color: '#2ca3e2',
},
],
globalCoord: false,
},
],
data: [value, value], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: 'RGBA(51, 66, 127, 0.7)',
},
label: {
normal: {
formatter: function (data) {
return (data.value * 100).toFixed(2) + '%'
},
textStyle: {
fontSize: 30,
color: '#fff',
},
},
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: 'transparent',
},
},
},
],
}
myChart.setOption(option)
},
initChartL2 () {
var chartData = left5
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
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) {
console.log(e)
}
}
},
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: -30,
y: 50,
symbolWidth: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20
},
},
title: {
text: '主辅业计划占比',
style: {
color: '#fff',
fontSize: 22,
},
align: 'center',
verticalAlign: "bottom",
x: -80
},
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'
},
formatter: function (e) {
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
// center: ['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) {
that.showTip3 = true
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: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
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) {
console.log(e)
}
}
},
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: -30,
y: 50,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20
},
},
title: {
text: '项目管理类型',
style: {
color: '#fff',
fontSize: 22,
},
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'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
// center: ['70%', '50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
console.log(e)
}
}
},
data: chartData
}]
})
}
}, 2000);
}
}
},
data: chartData
}]
});
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL4 () {
let myChart = echarts.init(document.getElementById("echartL4"));
let option = {
grid: {
top: 45,
right: 0,
left: 60,
bottom: 60,
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
},
},
xAxis: {
data: commonCompany,
axisTick: {
show: false,
},
// x轴的字体颜色
axisLabel: {
rotate: 40,
textStyle: {
color: "white",
fontSize: '15'
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
},
yAxis: {
name: '亿元',
nameTextStyle: {//y轴上方单位的颜色
color: '#fff',
},
axisTick: {
lineStyle: {
color: "#18416F",
},
},
// y轴的字体颜色
axisLabel: {
textStyle: {
color: "white",
fontSize: '15'
},
},
splitLine: {
show: true,
lineStyle: {
color: "#204561",
width: 1,
type: "dotted",
},
},
//y轴线的颜色以及宽度
axisLine: {
show: true,
lineStyle: {
color: "#1E5389",
width: 1,
type: "solid",
},
},
nameTextStyle: {
color: '#fff',
fontSize: 15,
},
},
series: [
{
name: "2023年额度",
type: "bar",
data: left3[0],
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",
},
right: 'center',
y: 5,
icon: "roundRect",
// 小图标的宽高
itemHeight: 5,
},
};
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: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
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: 50,
symbolWidth: 50,
itemDistance: 50,
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20
},
},
title: {
text: '传统产业分析',
style: {
color: '#fff',
fontSize: 22,
},
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'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL5', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL6 () {
var chartData = left8
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39', '#5783ab'],
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
},
},
title: {
text: '战略性新兴产业',
style: {
color: '#fff',
fontSize: 22,
},
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'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL6', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL7 () {
var chartData = left9
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
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: 22,
},
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
},
},
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'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL7', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL8 () {
var chartData = left10
var timer = null;
var i = 0;
let that = this
var option = {
colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
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: 22,
},
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
},
},
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'
},
formatter: function (e) {
//console.log(this)
let num = chartData[this.colorIndex].num
this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
return `${this.key}:${this.percentage}%
${this.y}亿,${num}个`
},
//pointFormat:
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 220,
innerSize: 150, //环形图中间空白,0为饼图
depth: 25, //立体高度
slicedOffset: 21, //动画距离
dataLabels: {
enabled: false, // 是否展示指示线
format: '{point.name}: {point.percentage}'
}
},
},
series: [{
type: 'pie',
name: '占比',
//center: ['35%','50%'],
point: {
events: {
click: function (e) { //点击事件
that.showChartLTipDouble(e.point.name)
},
mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中
//console.log(e)
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
})
chartData[e.target.index].sliced = true
chartData[e.target.index].selected = true
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
timer && clearInterval(timer);
},
mouseOut: function () { // 鼠标移出后需要继续执行轮播
var points = chart.series[0].points;
var len = points.length;
timer && clearInterval(timer);
timer = setInterval(function () {
autoTooltip(points[i]);
chartData.forEach((item, index) => {
item.sliced = false
item.selected = false
if (index == i) {
item.sliced = true
item.selected = true
}
})
chart.update({
series: [{
type: 'pie',
name: '占比',
point: {
events: {
click: function (e) {
that.showChartLTipDouble(e.point.name)
}
}
},
data: chartData
}]
})
i++;
if (i === len) {
i = 0;
}
}, 2000);
}
}
},
data: chartData
}]
}
var chart = Highcharts.chart('echartL8', option);
function autoTooltip (point) {
chart.tooltip.refresh(point);
}
},
initChartL9 () {
this.chartCarousel = echarts.init(document.getElementById("echartL9"));
option = {
tooltip: {
trigger: 'axis',
formatter: '指标:' + '{c0}' + '
' + '发展线:' + '{c1}' + '
' + '生存线:' + '{c2}', //+ '
'+ '{a1}:{c1}' + '%',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: '10%',
right: '5%',
left: '10%',
bottom: '10%',
},
xAxis: {
// data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
data: left15[this.countType],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: true, //隐藏X轴刻度
},
axisLabel: {
show: true,
rotate: 15,
textStyle: {
color: '#fff', //X轴文字颜色
fontSize: 15,
},
},
},
yAxis: [
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
color: '#fff',
fontSize: 15
},
},
nameTextStyle: {
color: '#ebf8ac',
fontSize: 16,
},
},
],
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: [70, 52, 33, 41, 52],
data: left12[this.count + 1][2]
// markLine: {
// symbol: ['none', 'none'],
// data: [
// {
// name: '生存线',
// yAxis: 10,
// lineStyle: {
// color: '#FF8F0A',
// },
// label: {
// formatter: '{b}',
// position: 'middle',
// color: '#FF8F0A',
// fontSize: 12,
// },
// },
// {
// name: '发展线',
// yAxis: 15,
// lineStyle: {
// color: '#00EEA2',
// },
// label: {
// formatter: '{b}',
// position: 'middle',
// color: '#00EEA2',
// fontSize: 12,
// },
// },
// ],
// label: {
// distance: [50, 0],
// },
// },
},
{
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: 25,
fontWeight: 500
},
top: '20',
left: '20'
},
textStyle: {
color: '#fff',
},
tooltip: {
trigger: "axis",
formatter: function (params) {
var tip = params[0].axisValue + '
' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '
' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿元';
return tip
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
},
axisPointer: {
lineStyle: {
type: 'dashed',
width: 2,
color: 'rgba(255,255,255,0.6)'
},
animation: true
}
},
grid: {
top: '10%',
right: '5%',
left: '15%',
bottom: '6%',
},
yAxis: {
data: ['备案', '特别监管'],
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
color: '#fff',
fontSize: 15,
},
},
nameTextStyle: {
color: '#ebf8ac',
fontSize: 16,
},
},
xAxis: {
data: ['项目储备', '项目立项', '可研论证', '投资决策'],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#fff', //X轴文字颜色
fontSize: 15,
},
},
},
series: [
{
name: '特别监管',
type: 'scatter',
symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: function (data) {
return Math.sqrt(data[2]) * 3;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[2];
},
position: 'top'
}
},
itemStyle: {
normal: {
color: '#40A9FF'
}
},
data: left13[0]
},
{
name: '备案',
type: 'scatter',
symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: function (data) {
return Math.sqrt(data[2]) * 3;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[2];
},
position: 'top'
}
},
itemStyle: {
normal: {
color: '#45DAD1'
}
},
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: 25,
fontWeight: 500
},
top: '20',
left: '20'
},
textStyle: {
color: '#fff',
},
tooltip: {
trigger: "axis",
formatter: function (params) {
var tip = params[0].axisValue + '
' + params[0].marker + params[0].data[1] + ':' + params[0].data[2] + '个,' + params[0].data[3] + '亿元' + '
' + params[1].marker + params[1].data[1] + ':' + params[1].data[2] + '个,' + params[1].data[3] + '亿元';
return tip
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
},
axisPointer: {
lineStyle: {
type: 'dashed',
width: 2,
color: 'rgba(255,255,255,0.6)'
},
animation: true
}
},
grid: {
top: '10%',
right: '5%',
left: '15%',
bottom: '6%',
},
yAxis: {
data: ['备案', '特别监管'],
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
color: "#fff",
fontSize: 15,
},
},
nameTextStyle: {
color: '#ebf8ac',
fontSize: 16,
},
},
xAxis: {
data: ['项目储备', '项目立项', '可研论证', '投资决策'],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#fff', //X轴文字颜色
fontSize: 15,
},
},
},
series: [
{
name: '',
type: 'scatter',
symbol: 'circle',
symbolSize: function (data) {
return Math.sqrt(data[2]) * 3;
},
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]) * 3;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[2];
},
position: 'top'
}
},
itemStyle: {
normal: {
color: '#45DAD1'
}
},
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 = []
var timer = null;
var timer2 = null;
var i = 0;
center2.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('echartC1', {
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: null
},
tooltip: {
crosshairs: true,
backgroundColor: 'rgba(0,0,0,0.5)',
useHTML: false, //开启html模式
style: {
color: '#fff',
fontSize: '20'
},
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: 'right',
verticalAlign: 'bottom',
itemStyle: {
fontSize: '20px',
color: '#fff',
x: 20
}
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true, // 图例
cursor: 'pointer',
size: 500,
innerSize: 300, //环形图中间空白,0为饼图
depth: 28, //立体高度
slicedOffset: 23, //动画距离
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) {
console.log(222222)
that.showChartLTipDouble(e.point.name)
// 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) {
console.log(111111)
that.showChartLTipDouble(e.point.name)
// 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);
}
},
initChartC2 () {
let myChart = echarts.init(this.$refs['echartC2'])
let option = {
tooltip: {
formatter: data => {
return `${data[0].name}
${data[0].seriesName}:${data[0].value}亿
${data[1].seriesName}:${data[1].value}亿`
},
trigger: 'axis',
axisPointer: {
type: 'cross',
},
textStyle: {
color: '#FFF', // 文字的颜色
fontSize: '20', // 文字字体大小
},
},
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: '10%',
},
legend: {
top: '1',
right: '10',
textStyle: {
color: 'rgba(250,250,250,0.6)',
fontSize: '15'
},
},
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: '15'
},
},
},
yAxis: [
{
type: 'value',
name: '亿元',
nameTextStyle: {
color: 'rgba(255,255,255,0.6)',
fontSize: '15'
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '15'
},
},
nameTextStyle: {
color: '#fff',
fontSize: 15,
},
},
],
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) {
window.location.href = './investHomeChild.html?type=2'
})
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 = center5
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],
],
},
],
}
/*获取地图数据*/
this.mapChart = 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
})
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 = `
项目数量:${data[params.dataIndex].value2}个
总投资额:${params.data.value[2]}亿
项目数量:${data[params.dataIndex].value2}个
总投资额:${params.data.value}亿
当前阶段:可论证阶段
//时间节点:2021.10-2022.10
let option = { geo: { show: true, map: 'china', layoutCenter: ['50%', '50%'], //地图位置 layoutSize: '65%', zoom: 1.5, label: { normal: { show: false, }, emphasis: { show: false, }, }, roam: false, itemStyle: { normal: { areaColor: '#70b0ea', shadowColor: '#1946a8', borderWidth: 1, //设置外层边框 borderColor: '#1946a8', shadowOffsetX: 2, shadowOffsetY: 1, 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: 20, fontWeight: 600, // fontStyle: 'italic', color: '#fff', show: true, }, emphasis: { show: true, }, }, itemStyle: { normal: { color: 'rgba(0,0,0,0)', borderWidth: 2, borderColor: '#fff', }, }, }, ], } let that = this this.mapChart.on('click', function (params) { if (params.name == '山西') { that.backShow = true setTimeout(() => { that.initProvinceChart() }) } }) tools.loopShowTooltip(this.mapChart, option, { interval: 2000, loopSeries: true, }) this.mapChart.setOption(option) }, initChartC3 () { let myChart = echarts.init(this.$refs['echartC3']) let option = { tooltip: { trigger: 'axis', formatter: '{a0}:{c0}' + '亿元', //+ '