Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 0bf13d2f by yangqingjie
Options

update

parent 258e9dc3
Showing with 75 additions and 96 deletions
src/components/echarts/LineBar.vue
......@@ -5,9 +5,7 @@
</template>
<script>
import * as echarts from 'echarts'
import mixinChart from '@/public/mixins/mixinChart'
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'lineBar',
......@@ -24,7 +22,10 @@ export default {
layout: {
type: Object,
default () {
return {}
return {
width: '100%',
height: '100%'
}
}
},
......@@ -46,34 +47,44 @@ export default {
methods: {
initComponents () {
const { width = '', height = '', id = '', className = 'line-bar-chart-class' } = this.mergeChartConf() || {}
// 基础配置, 不含series
const option = this.getChartOption(this.option.base) || {}
const seriesData = this.getSeriesData(this.option.seriesData || []) || []
// if (!seriesData.length) {
// throw Error('该组件图表数据只能接受length为2的数组')
// }
option.series = seriesData
const { width = '', height = '' } = this.layout
const option = this.getChartOption() || {}
this.barChartConf = {
className,
id,
width,
height,
option
option,
id: 'line-bar-chart-id' + this.utils.randomStr()
}
},
/**
* @method mergeChartConf 合并图表配置项
* @method getSeriesData 图表数据
*/
mergeChartConf () {
const defaultChartConf = {
width: '100%',
height: '100%',
// 不同的id（防止id重复，同一个页面，无法展示多个同组件图表）
id: 'line-bar-chart-id' + this.utils.randomStr()
getSeriesData (data) {
const defSeriesOpts = {
name: 'back',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: '#233549'
}
},
barGap: '-100%',
data: []
}
return this.deepMerge({}, defaultChartConf, this.layout)
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
console.log(this.option)
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
......@@ -86,7 +97,7 @@ export default {
},
grid: {
left: 0,
right: 10,
right: 5,
bottom: 0,
top: 0,
containLabel: true
......@@ -108,7 +119,7 @@ export default {
},
yAxis: [
{
type: 'category',
type: 'category', // y 轴左侧的数据
axisTick: {
show: false
},
......@@ -130,7 +141,7 @@ export default {
},
data: []
}, {
type: 'category',
type: 'category', // y 轴右侧的数据
axisLine: {
show: false
},
......@@ -161,57 +172,10 @@ export default {
}
]
}
return this.deepMerge({}, defaultOption, customOption)
},
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
if (this.option.seriesData.length !== 2) return []
const defSeriesData = [
{
name: 'back',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: '#233549'
}
},
barGap: '-100%',
data: [1, 2, 3]
},
{
name: 'show',
type: 'bar',
barWidth: '4px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(59, 150, 235, 0.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: [],
z: 3
}
]
const seriesData = [{}, {}]
seriesData[0] = this.deepMerge({}, defSeriesData[0], this.option.seriesData[0])
seriesData[1] = this.deepMerge({}, defSeriesData[1], this.option.seriesData[1])
return seriesData
return result
}
}
}
......
src/pages/index/Right.vue
......@@ -37,12 +37,11 @@
<div class="activity-one">
<div class="act">活动开展</div>
<div class="mor" @click="getMore">查看更多</div>
</div>
<div class="activity-two">
<div class="left">
<div class="act-left">
<count-roll :count="4166" class="act-style"/><span>次</span>
<count-roll :count="4166"/><span>次</span>
</div>
<p class="act-num">活动开展次数</p>
</div>
......@@ -55,6 +54,7 @@
</div>
</div>
</div>
<!-- 活动开展弹出层 -->
<popup-frame
:visible.sync="activeShow"
@beforeClose="beforeCloses"
......@@ -63,7 +63,7 @@
<img src="../../../static/images/index/03.png" alt="">
</div>
</popup-frame>
<!-- 交流会弹出层 -->
<popup-frame
:visible.sync="showVisible"
@beforeClose="beforeCloses"
......@@ -143,8 +143,6 @@
</div>
</div>
</div>
<!-- 活动开展 查看更多的弹出层 -->
</div>
</template>
......@@ -156,7 +154,7 @@ import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import LineBar from '@/components/echarts/LineBar'
import CountRoll from '@/components/CountRoll.vue'
// import PopupFrame from './PopupFrame'
export default {
name: 'Right',
components: {
......@@ -293,13 +291,7 @@ export default {
{name: '*****活动', value: 192},
{name: '组织活动', value: 1103},
{name: '*****活动', value: 381}
],
moreConfig: {
props: {
visible: false,
title: ''
}
}
]
}
},
mounted () {
......@@ -614,10 +606,10 @@ export default {
}
},
getActive (data) {
let yData = data.map(v => v.name).reverse()
let y2Data = data.map(v => v.value).reverse()
let max = 4166
let maxData = new Array(data.length).fill(max)
let yData = data.map(v => v.name).reverse() // y轴左侧的数据
let y2Data = data.map(v => v.value).reverse() // y轴右侧的数据
let max = 4166 // x轴的最大值
let maxData = new Array(data.length).fill(max)// x轴的最大值
let pointData = data.reverse().map((v, i) => {
return {
xAxis: v.value,
......@@ -643,12 +635,35 @@ export default {
},
data: yData
}, {
data: y2Data.map(v => v)
data: y2Data
}
]
},
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',
barWidth: '5px',
data: maxData
......@@ -662,9 +677,9 @@ export default {
},
markPoint: {
symbolOffset: [0, 0.5],
data: pointData
data: pointData // x轴的数值
},
data: y2Data
data: [10, 10, 10, 10]
}
]
}
......
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