|
|
@@ -2,9 +2,11 @@ let app = new Vue({
|
|
|
el: '#app',
|
|
|
data () {
|
|
|
return {
|
|
|
- timeOut1:'',
|
|
|
- timeOut2:'',
|
|
|
- timeOut3:'',
|
|
|
+ echarts1Time: 16000,
|
|
|
+ timeOut1: '',
|
|
|
+ timeOut2: '',
|
|
|
+ timeOut3: '',
|
|
|
+ timeOut4: '', // 散点图
|
|
|
titleList: [
|
|
|
{ name: '初步设计', type: 1, number: '106' },
|
|
|
{ name: '', type: 1, number: '' },
|
|
|
@@ -52,6 +54,7 @@ let app = new Vue({
|
|
|
},
|
|
|
methods: {
|
|
|
initChart1 () {
|
|
|
+ let that = this
|
|
|
let myChart = echarts.init(this.$refs['echart1'])
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
@@ -71,7 +74,7 @@ let app = new Vue({
|
|
|
show: false,
|
|
|
// xAxisIndex: [0]
|
|
|
handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
- startValue: 8,// 初始显示值
|
|
|
+ startValue: 7,// 初始显示值
|
|
|
endValue: 0,// 结束显示值
|
|
|
height: 10,//组件高度
|
|
|
left: "5%",
|
|
|
@@ -99,7 +102,7 @@ let app = new Vue({
|
|
|
bottom: '15%',
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ["预算额", "已签合同额", '产值认定额', '结算额', '结算额'],
|
|
|
+ data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
|
|
|
x: 'center',
|
|
|
y: '20px',
|
|
|
textStyle: {
|
|
|
@@ -264,20 +267,25 @@ let app = new Vue({
|
|
|
})
|
|
|
let arr = echart1.map(item => item.value2)
|
|
|
this.timeOut1 = 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 >= 9) {
|
|
|
- option.dataZoom[0].endValue = 8
|
|
|
+ // 如果到最后了，就重新加载图
|
|
|
+ if (option.dataZoom[0].endValue == 8) {
|
|
|
+ setTimeout(() => {
|
|
|
+ clearInterval(that.timeOut1);
|
|
|
+ that.initChart1()
|
|
|
+ }, 4000)
|
|
|
+ }
|
|
|
+ if (option.dataZoom[0].endValue >= 10) {
|
|
|
+ option.dataZoom[0].endValue = 7
|
|
|
option.dataZoom[0].startValue = 0
|
|
|
} else {
|
|
|
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 9
|
|
|
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 9
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 8
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 8
|
|
|
}
|
|
|
|
|
|
// myChart.dispatchAction({
|
|
|
@@ -286,10 +294,11 @@ let app = new Vue({
|
|
|
// dataIndex: startValue +1,
|
|
|
// });
|
|
|
myChart.setOption(option);
|
|
|
- }, 18000);
|
|
|
+ }, this.echarts1Time);
|
|
|
|
|
|
},
|
|
|
initChart2 () {
|
|
|
+ let that = this
|
|
|
const itemStyle = {
|
|
|
// opacity: 0.8,
|
|
|
shadowBlur: 10,
|
|
|
@@ -309,6 +318,35 @@ let app = new Vue({
|
|
|
top: '10',
|
|
|
left: '10'
|
|
|
},
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ // start: 9,//默认为@
|
|
|
+ // end: 100,//黑认认为1@0
|
|
|
+ type: "slider",
|
|
|
+ show: false,
|
|
|
+ // xAxisIndex: [0]
|
|
|
+ handlesize: 0,//滑动条的 左右2个滑动条的大小
|
|
|
+ startValue: 7,// 初始显示值
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ ],
|
|
|
legend: {
|
|
|
top: 10,
|
|
|
data: ['正偏差', '容差', '负偏差'],
|
|
|
@@ -323,21 +361,20 @@ let app = new Vue({
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
trigger: "axis",
|
|
|
- // formatter: function (params) {
|
|
|
- // var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1] + '：' + params[0].data[2] + '个，' + params[0].data[3] + '亿元' + '<br/>' + params[1].marker + params[1].data[1] + '：' + params[1].data[2] + '个，' + params[1].data[3] + '亿元';
|
|
|
- // return tip
|
|
|
- // },
|
|
|
formatter: data => {
|
|
|
return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color}"></span> ${data[0].seriesName}：${data[0].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color}"></span> ${data[1].seriesName}：${data[1].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color}"></span> ${data[2].seriesName}：${data[2].data[1]}亿`
|
|
|
},
|
|
|
axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- width: 2,
|
|
|
- color: 'rgba(255,255,255,0.6)'
|
|
|
- },
|
|
|
- animation: true
|
|
|
- }
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ // axisPointer: {
|
|
|
+ // lineStyle: {
|
|
|
+ // type: 'dashed',
|
|
|
+ // width: 2,
|
|
|
+ // color: 'rgba(255,255,255,0.6)'
|
|
|
+ // },
|
|
|
+ // animation: true
|
|
|
+ // }
|
|
|
},
|
|
|
grid: {
|
|
|
top: '15%',
|
|
|
@@ -414,7 +451,7 @@ let app = new Vue({
|
|
|
itemStyle: itemStyle,
|
|
|
data: echart2[1],
|
|
|
symbolSize: function (data) {
|
|
|
- return Math.sqrt(data[1])* 4;
|
|
|
+ return Math.sqrt(data[1]) * 4;
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -423,160 +460,46 @@ let app = new Vue({
|
|
|
itemStyle: itemStyle,
|
|
|
data: echart2[2],
|
|
|
symbolSize: function (data) {
|
|
|
- return Math.sqrt(data[1])* 4;
|
|
|
+ return Math.sqrt(data[1]) * 4;
|
|
|
},
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
myChart.setOption(option)
|
|
|
tools.loopShowTooltip(myChart, option, {
|
|
|
- nterval: 2000,
|
|
|
+ interval: 2000,
|
|
|
loopSeries: true,
|
|
|
})
|
|
|
- },
|
|
|
- // let myChart = echarts.init(this.$refs['echart3'])
|
|
|
- // let option = {
|
|
|
- // tooltip: {
|
|
|
- // formatter: data => {
|
|
|
- // return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿`
|
|
|
- // },
|
|
|
- // trigger: 'axis',
|
|
|
- // // axisPointer: {
|
|
|
- // // type: 'cross',
|
|
|
- // // },
|
|
|
- // },
|
|
|
- // grid: {
|
|
|
- // top: '16%',
|
|
|
- // right: '3%',
|
|
|
- // left: '10%',
|
|
|
- // bottom: '25%',
|
|
|
- // },
|
|
|
- // legend: {
|
|
|
- // data: ["高风险", "中风险", '低风险'],
|
|
|
- // x: 'center',
|
|
|
- // y: '10px',
|
|
|
- // textStyle: {
|
|
|
- // color: 'rgba(250,250,250,0.6)',
|
|
|
- // },
|
|
|
- // },
|
|
|
- // xAxis: {
|
|
|
- // data: title.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: 5,
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // color: '#69c0ff',
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: '#082550',
|
|
|
- // },
|
|
|
- // ]),
|
|
|
- // },
|
|
|
- // },
|
|
|
- // data: echart3.map(item => item.value),
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '中风险',
|
|
|
- // type: 'bar',
|
|
|
- // barWidth: 5,
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // color: '#957DFF',
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: '#082550',
|
|
|
- // },
|
|
|
- // ]),
|
|
|
- // },
|
|
|
- // },
|
|
|
- // data: echart3.map(item => item.value2),
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '低风险',
|
|
|
- // type: 'bar',
|
|
|
- // barWidth: 5,
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // color: '#957DFF',
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: '#082550',
|
|
|
- // },
|
|
|
- // ]),
|
|
|
- // },
|
|
|
- // },
|
|
|
- // data: echart3.map(item => item.value3),
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // }
|
|
|
- // myChart.setOption(option)
|
|
|
- // tools.loopShowTooltip(myChart, option, {
|
|
|
- // nterval: 2000,
|
|
|
- // loopSeries: true,
|
|
|
- // })
|
|
|
+ this.timeOut4 = 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 == 8) {
|
|
|
+ setTimeout(() => {
|
|
|
+ clearInterval(that.timeOut4);
|
|
|
+ that.initChart2()
|
|
|
+ }, 4000)
|
|
|
+ }
|
|
|
+ if (option.dataZoom[0].endValue >= 10) {
|
|
|
+ option.dataZoom[0].endValue = 7
|
|
|
+ option.dataZoom[0].startValue = 0
|
|
|
+ } else {
|
|
|
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 8
|
|
|
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 8
|
|
|
+ }
|
|
|
|
|
|
- // },
|
|
|
+ // myChart.dispatchAction({
|
|
|
+ // type: 'showTip',
|
|
|
+ // seriesIndex: 0,
|
|
|
+ // dataIndex: startValue +1,
|
|
|
+ // });
|
|
|
+ myChart.setOption(option);
|
|
|
+ }, this.echarts1Time);
|
|
|
+ },
|
|
|
initChart3 () {
|
|
|
let myChart = echarts.init(this.$refs['echart3'])
|
|
|
let option = {
|
|
|
@@ -588,6 +511,9 @@ let app = new Vue({
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
},
|
|
|
+ position: (params) => {
|
|
|
+ return [params[0]+10,30]
|
|
|
+ },
|
|
|
},
|
|
|
dataZoom: [
|
|
|
{
|
|
|
@@ -684,13 +610,14 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '高风险',
|
|
|
type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
barWidth: 10,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#71D5FF',
|
|
|
+ color: '#CADD62',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -704,6 +631,7 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '中风险',
|
|
|
type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
barWidth: 10,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
@@ -724,13 +652,14 @@ let app = new Vue({
|
|
|
{
|
|
|
name: '低风险',
|
|
|
type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
barWidth: 10,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: '#877CFC',
|
|
|
+ color: '#52BF80',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
@@ -780,53 +709,62 @@ let app = new Vue({
|
|
|
title: {
|
|
|
text: ''
|
|
|
},
|
|
|
- legend: {
|
|
|
- data: ['类型1', '类型2', '类型3', '类型4', '类型5'],
|
|
|
- textStyle: {
|
|
|
- color: '#9DB9EB',
|
|
|
- },
|
|
|
- },
|
|
|
- splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
|
|
|
- show: true,
|
|
|
- areaStyle: { // 分隔区域的样式设置。
|
|
|
- color: ['yellow'],
|
|
|
- // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
|
|
|
- }
|
|
|
- },
|
|
|
+ // legend: {
|
|
|
+ // data: ['安全风险', '付款风险', '合同风险', '结算风险', '进度风险', '质量风险'],
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#9DB9EB',
|
|
|
+ // },
|
|
|
+ // top: 'center',
|
|
|
+ // right:'50',
|
|
|
+ // orient: 'vertical', // vertical 竖着
|
|
|
+ // },
|
|
|
radar: {
|
|
|
// shape: 'circle',
|
|
|
- center: ['50%', '60%'],
|
|
|
- radius: 40,
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ radius: 55,
|
|
|
indicator: [
|
|
|
- { name: '类型1', max: 100000 },
|
|
|
- { name: '类型2', max: 100000 },
|
|
|
- { name: '类型3', max: 100000 },
|
|
|
- { name: '类型4', max: 100000 },
|
|
|
- { name: '类型5', max: 100000 },
|
|
|
+ { name: '安全风险', max: 100000 },
|
|
|
+ { name: '付款风险', max: 100000 },
|
|
|
+ { name: '合同风险', max: 100000 },
|
|
|
+ { name: '结算风险', max: 100000 },
|
|
|
+ { name: '进度风险', max: 100000 },
|
|
|
+ { name: '质量风险', max: 100000 },
|
|
|
],
|
|
|
axisLine: { // 设置雷达图中间射线的颜色
|
|
|
lineStyle: {
|
|
|
- color: '#c0c0c0',
|
|
|
+ color: '#887d33',
|
|
|
},
|
|
|
},
|
|
|
splitLine: { //网格颜色设置
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: '#1e83e4',
|
|
|
+ color: ['#871b1a', '#638f41', '#d29e35','#b6802b']
|
|
|
+ // color: '#000',
|
|
|
+ // color:(color)=>{
|
|
|
+ // console.log(color,'??????')
|
|
|
+ // }
|
|
|
},
|
|
|
},
|
|
|
+ name: { //修改indicator文字的颜色
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitNumber: 4, //有几个圈
|
|
|
splitArea: { //设置图表颜色，show的值为true
|
|
|
- show: false,
|
|
|
+ show: true,
|
|
|
areaStyle: {
|
|
|
// color:"#c1ddf8", //一般设置方式
|
|
|
//设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
|
|
|
//a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
|
|
|
//b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
- { offset: 0, color: '#c1ddf8' }, // 0% 处的颜色
|
|
|
- { offset: 1, color: '#1e83e4' }// 100% 处的颜色
|
|
|
- ], false)
|
|
|
+ // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ // { offset: 0, color: '#887D33' }, // 0% 处的颜色
|
|
|
+ // { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色
|
|
|
+ // { offset: 1, color: '#430705' }// 100% 处的颜色
|
|
|
+ // ], false)
|
|
|
+ color: ['#638f41', '#887d33', '#7d4216','#430705'],
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -839,38 +777,12 @@ let app = new Vue({
|
|
|
data: [
|
|
|
{
|
|
|
value: echart4[0],
|
|
|
- name: '类型1',
|
|
|
- itemStyle: { //该数值区域样式设置
|
|
|
- normal: {
|
|
|
- color: '#2CC6FF', //背景颜色，还需设置areaStyle
|
|
|
- lineStyle: {
|
|
|
- color: '#2CC6FF', //边框颜色
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- label: { //显示value中具体的数值
|
|
|
- normal: {
|
|
|
- show: false,
|
|
|
- textStyle: { //更改数值样式
|
|
|
- color: '#43EDE3'
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- areaStyle: { //设置区域背景颜色透明度
|
|
|
- normal: {
|
|
|
- width: 1,
|
|
|
- opacity: 0.8,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- value: echart4[1],
|
|
|
- name: '类型2',
|
|
|
+ name: '安全风险',
|
|
|
itemStyle: { //该数值区域样式设置
|
|
|
normal: {
|
|
|
- color: '#D87AFF', //背景颜色，还需设置areaStyle
|
|
|
+ color: 'rgb(44,198,255,0.8)', //背景颜色，还需设置areaStyle
|
|
|
lineStyle: {
|
|
|
- color: '#2CC6FF', //边框颜色
|
|
|
+ color: 'rgb(44,198,255,0.8)', //边框颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
@@ -899,170 +811,6 @@ let app = new Vue({
|
|
|
});
|
|
|
myChart.setOption(option)
|
|
|
},
|
|
|
- // initChart5 () {
|
|
|
- // let myChart = echarts.init(this.$refs['echart5'])
|
|
|
- // let option = {
|
|
|
- // tooltip: {
|
|
|
- // formatter: data => {
|
|
|
- // return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿`
|
|
|
- // },
|
|
|
- // trigger: 'axis',
|
|
|
- // // axisPointer: {
|
|
|
- // // type: 'cross',
|
|
|
- // // },
|
|
|
- // },
|
|
|
- // grid: {
|
|
|
- // top: '16%',
|
|
|
- // right: '3%',
|
|
|
- // left: '3%',
|
|
|
- // bottom: '25%',
|
|
|
- // },
|
|
|
- // legend: {
|
|
|
- // data: ["预算额", "合同额", "结算额", "支付额"],
|
|
|
- // x: 'center',
|
|
|
- // y: '10px',
|
|
|
- // textStyle: {
|
|
|
- // color: 'rgba(250,250,250,0.6)',
|
|
|
- // },
|
|
|
- // },
|
|
|
- // xAxis: {
|
|
|
- // data: title.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: title.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: title.map(item => item.value2),
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 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: title.map(item => item.value3),
|
|
|
- // },
|
|
|
- // {
|
|
|
- // 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: title.map(item => item.value4),
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // }
|
|
|
- // myChart.setOption(option)
|
|
|
- // tools.loopShowTooltip(myChart, option, {
|
|
|
- // nterval: 2000,
|
|
|
- // loopSeries: true,
|
|
|
- // })
|
|
|
-
|
|
|
- // },
|
|
|
initChart5 () {
|
|
|
let myChart = echarts.init(this.$refs['echart5'])
|
|
|
let option = {
|
|
|
@@ -1073,7 +821,7 @@ let app = new Vue({
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
dataZoom: [
|
|
|
{
|
zhbyyy