|
|
@@ -359,6 +359,7 @@ export default {
|
|
|
let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
let yData = [25, 100, 50, 45, 75, 25, 100, 50, 45, 75, 25, 100, 50, 45, 75]
|
|
|
let barData = [25, 60, 50, 45, 75, 25, 60, 50, 45, 75, 25, 60, 50, 45, 75]
|
|
|
+
|
|
|
function calMax(arr) {
|
|
|
let max = 0;
|
|
|
arr.forEach((el) => {
|
|
|
@@ -520,6 +521,33 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: barData.map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [index, 0],
|
|
|
+ [index, item - 4]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ period: 2.5,
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: [15, 2],
|
|
|
+ symbol: this.$store.state.common.echarts_baseStreamer,
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
+ },
|
|
|
+ z: 999
|
|
|
+ },
|
|
|
]
|
|
|
};
|
|
|
if (option) {
|
|
|
@@ -786,7 +814,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: barData.map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [index, 0],
|
|
|
+ [index, item - 4]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ period: 2.5,
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: [15, 2],
|
|
|
+ symbol: this.$store.state.common.echarts_baseStreamer,
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
+ },
|
|
|
+ z: 999
|
|
|
+ },]
|
|
|
};
|
|
|
if (option) {
|
|
|
myChart.setOption(option);
|
|
|
@@ -1053,7 +1108,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: barData.map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [index, 0],
|
|
|
+ [index, item - 4]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ period: 2.5,
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: [15, 2],
|
|
|
+ symbol: this.$store.state.common.echarts_baseStreamer,
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
+ },
|
|
|
+ z: 999
|
|
|
+ },]
|
|
|
};
|
|
|
if (option) {
|
|
|
myChart.setOption(option);
|
|
|
@@ -1321,7 +1403,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: barData.map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [index, 0],
|
|
|
+ [index, item - 4]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ period: 2.5,
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: [15, 2],
|
|
|
+ symbol: this.$store.state.common.echarts_baseStreamer,
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
+ },
|
|
|
+ z: 999
|
|
|
+ },]
|
|
|
};
|
|
|
if (option) {
|
|
|
myChart.setOption(option);
|
|
|
@@ -1588,7 +1697,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: barData.map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [index, 0],
|
|
|
+ [index, item - 4]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ period: 2.5,
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: [15, 2],
|
|
|
+ symbol: this.$store.state.common.echarts_baseStreamer,
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
+ },
|
|
|
+ z: 999
|
|
|
+ },]
|
|
|
};
|
|
|
if (option) {
|
|
|
myChart.setOption(option);
|
|
|
@@ -1855,7 +1991,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: barData.map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [index, 0],
|
|
|
+ [index, item - 4]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ period: 2.5,
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: [15, 2],
|
|
|
+ symbol: this.$store.state.common.echarts_baseStreamer,
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
+ },
|
|
|
+ z: 999
|
|
|
+ },]
|
|
|
};
|
|
|
if (option) {
|
|
|
myChart.setOption(option);
|
|
|
@@ -1863,131 +2026,194 @@ export default {
|
|
|
},
|
|
|
qkq_jdt() {
|
|
|
var myChart = echarts.init(document.getElementById('qkq_jdt'));
|
|
|
- var _datamax = [100, 100, 100, 100, 100, 100];
|
|
|
- var _data1 = [30, 15, 10, 13, 15, 11];
|
|
|
- var _data2 = [70, 5, 40, 33, 15, 51];
|
|
|
- var spNum = 5, _max = 100;
|
|
|
+ //亮色图片
|
|
|
+ var uploadedDataURL1 = "/asset/get/s/4CJ7_TCzJkXXblRL.png";
|
|
|
+ var uploadedDataURL2 = "/asset/get/s/QekC70YLG_BZZXae.png";
|
|
|
+
|
|
|
+
|
|
|
+ var baifenbi = [0.333, 0.444, 0.555, 0.777, 0.888, 0.922];
|
|
|
+ var grayBar = [1, 1, 1, 1, 1, 1];
|
|
|
+ var paiming = [6, 5, 4, 3, 2, 1];
|
|
|
+ var zongjine = [2000, 3000, 4000, 5000, 6000, 7000];
|
|
|
var xingm = ['实际经济指标的目标1', '实际经济指标的目标2', '实际经济指标的目标3', '实际经济指标的目标4', '实际经济指标的目标5', '实际经济指标的目标6'];
|
|
|
var option = {
|
|
|
color: ['#61A8FF'], //进度条颜色
|
|
|
- tooltip: {
|
|
|
- show: true,
|
|
|
- backgroundColor: '#fff',
|
|
|
- borderColor: '#ddd',
|
|
|
- borderWidth: 1,
|
|
|
- textStyle: {
|
|
|
- color: '#3c3c3c',
|
|
|
- fontSize: 16
|
|
|
- },
|
|
|
- formatter: function (p) {
|
|
|
- return '名称：' + p.name + '<br>' + '完成：' + p.value + '<br>' + '占比：' + (p.value / _max * 100).toFixed(0) + '%';
|
|
|
- },
|
|
|
- extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
|
|
|
- },
|
|
|
grid: {
|
|
|
- left: "1%", //距离dom间距
|
|
|
- right: "5%",
|
|
|
- top: "10%",
|
|
|
- bottom: "1%"
|
|
|
+ left: '2%', //如果离左边太远就用这个......
|
|
|
+ right: '0%',
|
|
|
+ bottom: '-15%',
|
|
|
+ top: '5%',
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- splitNumber: spNum,
|
|
|
- interval: _max / spNum,
|
|
|
- max: _max,
|
|
|
- axisLabel: {
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
show: false,
|
|
|
- formatter: function(v) {
|
|
|
- var _v = (v / _max * 100).toFixed(0);
|
|
|
- return _v == 0 ? _v : _v + '%';
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
+ //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
|
|
{
|
|
|
- data: xingm,
|
|
|
- axisLabel: {
|
|
|
- verticalAlign: "bottom",
|
|
|
- align: "left",
|
|
|
- padding: [0, 0, 7, 6],
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
- color: "#fff",
|
|
|
- fontFamily: "SourceHanSansCN-Regular"
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- }, {
|
|
|
show: false,
|
|
|
- data: xingm,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- }
|
|
|
}
|
|
|
],
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ show: false, //让Y轴数据不显示
|
|
|
+ },
|
|
|
+ itemStyle: {},
|
|
|
+ axisTick: {
|
|
|
+ show: false, //隐藏Y轴刻度
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false, //隐藏Y轴线段
|
|
|
+ },
|
|
|
+ data: xingm,
|
|
|
+ },
|
|
|
series: [
|
|
|
+ //背景色--------------------我是分割线君------------------------------//
|
|
|
{
|
|
|
+ show: true,
|
|
|
type: 'bar',
|
|
|
- silent: true,
|
|
|
- yAxisIndex: 1,
|
|
|
- barWidth: 16,
|
|
|
+ barGap: '-100%',
|
|
|
+ barWidth: '35%', //统计条宽度
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: 'rgba(255,255,255,0.3)'
|
|
|
+ color: 'rgba(231,89,89,0.11)'
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- color: 'rgba(255,255,255,0.3)'
|
|
|
- }
|
|
|
},
|
|
|
- data: _datamax
|
|
|
+ z: 1,
|
|
|
+ data: grayBar,
|
|
|
},
|
|
|
+ //蓝条--------------------我是分割线君------------------------------//
|
|
|
{
|
|
|
+ show: true,
|
|
|
type: 'bar',
|
|
|
- name: '',
|
|
|
- stack: '2',
|
|
|
- legendHoverLink: false,
|
|
|
- barWidth: 16,
|
|
|
+ barGap: '-100%',
|
|
|
+ barWidth: '35%', //统计条宽度
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#00FFF6'
|
|
|
+ color: {
|
|
|
+ type: 'bar',
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#39A7FC' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#00FBFF' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ globalCoord: false, // 缺省为 false
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- color: '#00FFF6'
|
|
|
+ },
|
|
|
+ max: 1,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff', //百分比颜色
|
|
|
+ },
|
|
|
+ position: 'inside',
|
|
|
+ //百分比格式
|
|
|
+ formatter: function (data) {
|
|
|
+ return (baifenbi[data.dataIndex] * 100).toFixed(1) + '%';
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
- data: _data1
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ z: 2,
|
|
|
+ data: baifenbi,
|
|
|
},
|
|
|
+ //数据条--------------------我是分割线君------------------------------//
|
|
|
{
|
|
|
+ show: true,
|
|
|
type: 'bar',
|
|
|
- name: '',
|
|
|
- stack: '2',
|
|
|
- legendHoverLink: false,
|
|
|
- barWidth: 16,
|
|
|
+ xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
|
|
+ barGap: '-100%',
|
|
|
+ barWidth: '35%', //统计条宽度
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#1D82FF'
|
|
|
+ barBorderRadius: 200,
|
|
|
+ color: 'rgba(22,203,115,0.05)'
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- color: '#1D82FF'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ //label 的position位置可以是top bottom left,right,也可以是固定值
|
|
|
+ //在这里需要上下统一对齐,所以用固定值
|
|
|
+ position: ['0', '-130%'],
|
|
|
+ rich: { //富文本
|
|
|
+ white: { //自定义颜色
|
|
|
+ color: '#ffffff',
|
|
|
+ },
|
|
|
+ start1: {
|
|
|
+ backgroundColor: {
|
|
|
+ image: uploadedDataURL1,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ start2: {
|
|
|
+ backgroundColor: { //这里可以添加你想自定义的图片
|
|
|
+ image: uploadedDataURL2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ green: {
|
|
|
+ color: '#70DDA7',
|
|
|
+ },
|
|
|
+ yellow: {
|
|
|
+ color: '#CCB877',
|
|
|
+ },
|
|
|
+ red: {
|
|
|
+ color: '#BC3C47',
|
|
|
+ },
|
|
|
+ gray: {
|
|
|
+ color: '#727CBA'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatter: function (data) {
|
|
|
+ //富文本固定格式{colorName|这里填你想要写的内容}
|
|
|
+ if (paiming[data.dataIndex] == 1) {
|
|
|
+ return '{start1|}{red|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}' + ' ' + '{white| 经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
|
|
|
+ } else if (paiming[data.dataIndex] == 2) {
|
|
|
+ return '{start1|}{yellow|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}' + ' ' + '{white| 经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
|
|
|
+ } else if (paiming[data.dataIndex] == 3) {
|
|
|
+ return '{start1|}{green|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}' + ' ' + '{white| 经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
|
|
|
+ } else {
|
|
|
+ return '{start2|}{white|' + paiming[data.dataIndex] + ' ' + xingm[data.dataIndex] + '}' + ' ' + '{white| 经济指标的目标:}{gray|' + zongjine[data.dataIndex] + '}{white|元}';
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
- data: _data2
|
|
|
+ data: zongjine
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: baifenbi.map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [0, index],
|
|
|
+ [item, index],
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ period: 2.5,
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: [15, 2],
|
|
|
+ symbol: this.$store.state.common.echarts_baseStreamer,
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
+ },
|
|
|
+ z: 99
|
|
|
},
|
|
|
]
|
|
|
};
|
bihuisong