Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 9c42ba65 by yangyang19979
Options

Merge branch 'yangqingjie' into '20210819' 

Yangqingjie

See merge request vue-project/liangXing/frontEnd!28
parents 5d5fae90 2005e07d
Showing with 52 additions and 52 deletions
src/components/echarts/LineBar.vue
...@@ -60,30 +60,50 @@ export default { ...@@ -60,30 +60,50 @@ export default {
/** /**
* @method getSeriesData 图表数据 * @method getSeriesData 图表数据
*/ */
getSeriesData (data) { getSeriesData () {
const defSeriesOpts = { const defSeriesOpts = [
name: 'back', {
type: 'bar', name: 'back',
barWidth: '4px', type: 'bar',
itemStyle: { barWidth: '4px',
borderRadius: [0, 0, 0, 0], itemStyle: {
normal: { borderRadius: [0, 0, 0, 0],
color: '#233549' normal: {
} color: '#233549'
}
},
barGap: '-100%',
data: []
}, },
barGap: '-100%', {
data: [] name: 'show',
} type: 'bar',
let result = [defSeriesOpts] barWidth: '4px',
const { seriesData = [] } = this.option itemStyle: {
console.log(this.option) borderRadius: [0, 0, 0, 0],
if (seriesData.length) { normal: {
const temp = [] color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [{
seriesData.forEach(item => { offset: 0,
temp.push(this.deepMerge({}, defSeriesOpts, item)) color: 'rgba(59, 150, 235, 0.1)'
}) }, {
result = temp offset: 1,
} color: '#3b96eb'
}], false)
}
},
markPoint: {
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
symbolSize: [10, 10],
data: []
},
data: [],
z: 3
}
]
const result = [{}, {}]
result[0] = this.deepMerge({}, defSeriesOpts[0], this.option.seriesData[0])
result[1] = this.deepMerge({}, defSeriesOpts[1], this.option.seriesData[1])
console.log(result[0], result[1])
return result return result
}, },
......
src/pages/index/Right.vue
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<div class="activity-two"> <div class="activity-two">
<div class="left"> <div class="left">
<div class="act-left"> <div class="act-left">
<count-roll :count="4166"/><span>次</span> <count-roll :count=activeSum /><span>次</span>
</div> </div>
<p class="act-num">活动开展次数</p> <p class="act-num">活动开展次数</p>
</div> </div>
...@@ -172,7 +172,6 @@ export default { ...@@ -172,7 +172,6 @@ export default {
swiperSlide, swiperSlide,
LineBar, LineBar,
CountRoll CountRoll
// PopupFrame
}, },
props: { props: {
rightData: { rightData: {
...@@ -229,6 +228,7 @@ export default { ...@@ -229,6 +228,7 @@ export default {
topicShow: true, topicShow: true,
// 活动开展 // 活动开展
activeConfig: {}, activeConfig: {},
activeSum: '',
activeList: [ activeList: [
{name: '*****活动', value: 192}, {name: '*****活动', value: 192},
{name: '组织活动', value: 1103}, {name: '组织活动', value: 1103},
...@@ -586,7 +586,10 @@ export default { ...@@ -586,7 +586,10 @@ export default {
getActive (data) { getActive (data) {
let yData = data.map(v => v.name).reverse() // y轴左侧的数据 let yData = data.map(v => v.name).reverse() // y轴左侧的数据
let y2Data = data.map(v => v.value).reverse() // y轴右侧的数据 let y2Data = data.map(v => v.value).reverse() // y轴右侧的数据
let max = 4166 // x轴的最大值 console.log(y2Data)
let max = y2Data[0] + y2Data[1] + y2Data[2]
this.activeSum = max
// let max = 4166 // x轴的最大值
let maxData = new Array(data.length).fill(max)// x轴的最大值 let maxData = new Array(data.length).fill(max)// x轴的最大值
let pointData = data.reverse().map((v, i) => { let pointData = data.reverse().map((v, i) => {
return { return {
...@@ -619,29 +622,6 @@ export default { ...@@ -619,29 +622,6 @@ export default {
}, },
seriesData: [ seriesData: [
{ {
name: 'show',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(59, 150, 235, 1)'
}, {
offset: 1,
color: '#3b96eb'
}], false)
}
},
markPoint: {
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
symbolSize: [10, 10],
data: []
},
data: [50]
},
{
name: 'back', name: 'back',
barWidth: '5px', barWidth: '5px',
data: maxData data: maxData
...@@ -651,13 +631,13 @@ export default { ...@@ -651,13 +631,13 @@ export default {
barWidth: '5px', barWidth: '5px',
itemStyle: { itemStyle: {
borderRadius: [0, 0, 0, 0], borderRadius: [0, 0, 0, 0],
color: 'rgba(64, 169, 248, .05)' color: 'rgba(64, 169, 248, 0.3)'
}, },
markPoint: { markPoint: {
symbolOffset: [0, 0.5], symbolOffset: [0, 0.5],
data: pointData // x轴的数值 data: pointData
}, },
data: [10, 10, 10, 10] data: y2Data
} }
] ]
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment