|
|
@@ -5,7 +5,7 @@ let app = new Vue({
|
|
|
count: 0, //重点项目两线指标轮到哪个
|
|
|
list: [], //重点项目两线指标数组
|
|
|
countType: 0, //重点项目两线指标数组
|
|
|
- mapShow: false, // false为中国地图 true为山西地图
|
|
|
+ mapShow: true, // false为中国地图 true为山西地图
|
|
|
leftEcharts1: "",
|
|
|
leftEcharts2: "",
|
|
|
leftEcharts3: "",
|
|
|
@@ -408,6 +408,7 @@ let app = new Vue({
|
|
|
topIndex: 0,
|
|
|
echartR1Fd1: true,
|
|
|
echartR2Fd2: true,
|
|
|
+ echartC1Fd1:true,
|
|
|
r3Index: 0,
|
|
|
riskData1: {
|
|
|
x: [
|
|
|
@@ -544,7 +545,6 @@ let app = new Vue({
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
-
|
|
|
const itemStyle = {
|
|
|
// opacity: 0.8,
|
|
|
shadowBlur: 10,
|
|
|
@@ -581,7 +581,39 @@ let app = new Vue({
|
|
|
}
|
|
|
})
|
|
|
let option = {
|
|
|
- color: ['#04635E', '#697143', '#4A3042'],
|
|
|
+ color: [{
|
|
|
+ type: 'radial', // linear 线性渐变 radial径向渐变
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.5,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#58F7DF' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#4ECFBB' // 100% 处的颜色
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'radial', // linear 线性渐变 radial径向渐变
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.5,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#7FD9FF' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#40A9FF' // 100% 处的颜色
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ type: 'radial', // linear 线性渐变 radial径向渐变
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.5,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#FF9592' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#D2706D' // 100% 处的颜色
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ ],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
// start: 9,//默认为@
|
|
|
@@ -888,11 +920,11 @@ let app = new Vue({
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: "#91231F", // 0% 处的颜色
|
|
|
+ color: "#07806E", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: "#F98784", // 100% 处的颜色
|
|
|
+ color: "#79FFEB", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
|
@@ -924,15 +956,15 @@ let app = new Vue({
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: "#07806E", // 0% 处的颜色
|
|
|
+ color: "#91231F", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: "#79FFEB", // 100% 处的颜色
|
|
|
+ color: "#F98784", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
|
- },
|
|
|
+ }
|
|
|
],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
@@ -992,7 +1024,10 @@ let app = new Vue({
|
|
|
fontSize: "28", // 文字字体大小
|
|
|
},
|
|
|
formatter: function (p) {
|
|
|
- return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
|
|
|
+ return `${p.name}<br>低风险：${that.riskData.y1[p.dataIndex]}个<br>
|
|
|
+ 中风险：${that.riskData.y2[p.dataIndex]}个<br>
|
|
|
+ 高风险：${that.riskData.y3[p.dataIndex]}个<br>
|
|
|
+ `
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
@@ -1228,6 +1263,7 @@ let app = new Vue({
|
|
|
position: "top",
|
|
|
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
|
|
|
borderColor: "rgba(50,50,50,0.7)",
|
|
|
+ confine: true,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
|
|
|
@@ -1236,7 +1272,12 @@ let app = new Vue({
|
|
|
},
|
|
|
|
|
|
formatter: function (p) {
|
|
|
- return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
|
|
|
+ return `${p.name}<br>应首评项目数：${that.riskData1.y1[p.dataIndex]}个<br>
|
|
|
+ 已完成首评项目数：${that.riskData1.y2[p.dataIndex]}个<br>
|
|
|
+ 应再评项目数：${that.riskData1.y3[p.dataIndex]}个<br>
|
|
|
+ 已完成再评项目数：${that.riskData1.y4[p.dataIndex]}个<br>
|
|
|
+ 再评达标项目数：${that.riskData1.y5[p.dataIndex]}个
|
|
|
+ `
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
@@ -1633,7 +1674,7 @@ let app = new Vue({
|
|
|
this.leftEcharts1 = echarts.init(this.$refs["leftEcharts1"]);
|
|
|
option = {
|
|
|
title: {
|
|
|
- text: that.industryProportion == 1 ? "30%" : "70%",
|
|
|
+ text: that.industryProportion == 1 ? "94.4%" : "46.62%",
|
|
|
x: "center",
|
|
|
y: "center",
|
|
|
textStyle: {
|
|
|
@@ -1695,8 +1736,8 @@ let app = new Vue({
|
|
|
let that = this;
|
|
|
this.leftEcharts2 = echarts.init(this.$refs["leftEcharts2"]);
|
|
|
let nameList = ["a"];
|
|
|
- let valueList = that.industryProportion == 1 ? [30] : [70];
|
|
|
- let total = 100; // 数据总数
|
|
|
+ let valueList = that.industryProportion == 1 ? [1287.5] : [635.84];
|
|
|
+ let total = 1363.88; // 数据总数
|
|
|
var category = nameList.map((item, index) => {
|
|
|
return {
|
|
|
value: valueList[index],
|
|
|
@@ -1910,7 +1951,7 @@ let app = new Vue({
|
|
|
this.leftEcharts3 = echarts.init(this.$refs["leftEcharts3"]);
|
|
|
option = {
|
|
|
title: {
|
|
|
- text: that.industryProportion == 1 ? "70%" : "30%",
|
|
|
+ text: that.industryProportion == 1 ? "5.6%" : "53.38%",
|
|
|
x: "center",
|
|
|
y: "center",
|
|
|
textStyle: {
|
|
|
@@ -1972,8 +2013,8 @@ let app = new Vue({
|
|
|
let that = this;
|
|
|
this.leftEcharts4 = echarts.init(this.$refs["leftEcharts4"]);
|
|
|
let nameList = ["a"];
|
|
|
- let valueList = that.industryProportion == 1 ? [70] : [30];
|
|
|
- let total = 100; // 数据总数
|
|
|
+ let valueList = that.industryProportion == 1 ? [76.38] : [728.04];
|
|
|
+ let total = 1363.88; // 数据总数
|
|
|
var category = nameList.map((item, index) => {
|
|
|
return {
|
|
|
value: valueList[index],
|
|
|
@@ -4472,10 +4513,10 @@ let app = new Vue({
|
|
|
color: commonColor,
|
|
|
title: {
|
|
|
show: true,
|
|
|
- text: '25%',
|
|
|
- top: '48%',
|
|
|
+ text: '35%',
|
|
|
+ top: '40%',
|
|
|
textAlign: "center",
|
|
|
- left: "49%",
|
|
|
+ left: "50%",
|
|
|
textStyle: {
|
|
|
fontWeight: '600',
|
|
|
fontFamily: 'Microsoft YaHei',
|
|
|
@@ -4558,7 +4599,69 @@ let app = new Vue({
|
|
|
leftEcharts14Fun () {
|
|
|
let that = this;
|
|
|
this.leftEcharts14 = echarts.init(this.$refs["leftEcharts14"]);
|
|
|
- option = {
|
|
|
+ that.leftEcharts14.on("showTip", (params) => {
|
|
|
+ // 如果是7或者15并且满足防抖则切换
|
|
|
+ if (
|
|
|
+ (params.dataIndex == 5 || params.dataIndex == 11) &&
|
|
|
+ that.echartC1Fd1
|
|
|
+ ) {
|
|
|
+ that.echartC1Fd1 = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
|
|
|
+ that.leftEcharts14.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echartC1Fd1 = true;
|
|
|
+ }, 2000);
|
|
|
+ }, 1900);
|
|
|
+ // 如果是17表示到了最后一个，那么重新来一遍
|
|
|
+ } else if (params.dataIndex == 17 && that.echartC1Fd1) {
|
|
|
+ that.echartC1Fd1 = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ option.dataZoom[0].endValue = 0;
|
|
|
+ option.dataZoom[0].startValue = 5;
|
|
|
+ that.leftEcharts14.setOption(option);
|
|
|
+ // 防止勿刷新做的防抖
|
|
|
+ setTimeout(() => {
|
|
|
+ that.echartC1Fd1 = true;
|
|
|
+ }, 2000);
|
|
|
+ }, 1900);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let option = {
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ // start: 9,//默认为@
|
|
|
+ // end: 100,//黑认认为1@0
|
|
|
+ type: "slider",
|
|
|
+ show: false,
|
|
|
+ yAxisIndex: 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, //鼠标滚轮触发滚动
|
|
|
+ },
|
|
|
+ ],
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
trigger: "axis",
|
|
|
@@ -4662,13 +4765,13 @@ let app = new Vue({
|
|
|
fontSize: 20,
|
|
|
fontFamily: 'Microsoft YaHei'
|
|
|
},
|
|
|
- data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团"]
|
|
|
+ data: that.riskData1.x
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '实际投资',
|
|
|
type: 'bar',
|
|
|
- data: [18203, 23489, 29034, 104970, 131744, 630230],
|
|
|
+ data: that.riskData1.y1,
|
|
|
barGap: '-145%',
|
|
|
barWidth: "15",
|
|
|
zlevel: 10,
|
|
|
@@ -4690,7 +4793,7 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '计划投资',
|
|
|
type: 'bar',
|
|
|
- data: [19325, 23438, 31000, 121594, 134141, 681807],
|
|
|
+ data: that.riskData1.y1,
|
|
|
barWidth: "30",
|
|
|
itemStyle: {
|
|
|
barBorderRadius: [0, 50, 50, 0],
|
|
|
@@ -4698,11 +4801,11 @@ let app = new Vue({
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#0F357C00',
|
|
|
+ color: '#0F357C80',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: '#10417F00',
|
|
|
+ color: '#10417F80',
|
|
|
|
|
|
},
|
|
|
]),
|
zhbyyy
