|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="lineBarCharts" ref="lineBarCharts" />
|
|
|
+ <div class="lineBarCharts" ref="lineBarCharts"/>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -14,7 +14,11 @@ export default {
|
|
|
seriesData: {
|
|
|
type: Array,
|
|
|
default: []
|
|
|
- }
|
|
|
+ },
|
|
|
+ selectedMode: {
|
|
|
+ type: String,
|
|
|
+ default: 'single' // 'multiple'
|
|
|
+ },
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
@@ -30,6 +34,17 @@ export default {
|
|
|
this.setSeriesData(newValue)
|
|
|
}
|
|
|
},
|
|
|
+ deep: true,
|
|
|
+ // immediate: true
|
|
|
+ },
|
|
|
+ selectedMode: {
|
|
|
+ handler(newValue, oldValue){
|
|
|
+ console.log(newValue, oldValue)
|
|
|
+ if(newValue){
|
|
|
+ this.uOption.legend.selectedMode = newValue
|
|
|
+ this.uEcharts.setOption(this.uOption, true)
|
|
|
+ }
|
|
|
+ },
|
|
|
// immediate: true
|
|
|
}
|
|
|
},
|
|
@@ -45,16 +60,25 @@ export default {
|
|
|
initChart(){
|
|
|
this.uEcharts = echarts.init(this.$refs.lineBarCharts)
|
|
|
|
|
|
+ // let color = ['#42CEAF', '#FF882A', '#16B4FE', '#747AFE','#f9c129', '#13c2c2', '#79ce42', '#f55837'];
|
|
|
+ // fc8452
|
|
|
this.uOption = {
|
|
|
// title: {
|
|
|
- // text: '测试展示'
|
|
|
+ // text: this.title + '图',
|
|
|
+ // left: 'center'
|
|
|
// },
|
|
|
+ // color: color,
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '10%'
|
|
|
+ },
|
|
|
legend: {
|
|
|
selectedMode: 'single', // 单个显示
|
|
|
- type: 'scroll', // 翻页显示
|
|
|
+ type: 'scroll',
|
|
|
width: '60%',
|
|
|
// orient: 'vertical',
|
|
|
// right: 90,
|
|
@@ -73,11 +97,25 @@ export default {
|
|
|
show: true,
|
|
|
feature: {
|
|
|
// dataView: { readOnly: false }, // 展示数据--不过没用
|
|
|
- magicType: { type: ['bar', 'line',] },
|
|
|
+ magicType: { type: ['bar', 'line'] },
|
|
|
// restore: {}, // 还原
|
|
|
saveAsImage: {}
|
|
|
}
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ bottom: '70px'
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
// boundaryGap: true, // 解决数据溢出X轴的问题
|
|
@@ -109,24 +147,39 @@ export default {
|
|
|
};
|
|
|
|
|
|
this.uOption && this.uEcharts.setOption(this.uOption);
|
|
|
+ window.addEventListener('resize', ()=>{
|
|
|
+ this.uEcharts.resize()
|
|
|
+ })
|
|
|
},
|
|
|
setSeriesData(data){
|
|
|
+ // console.log(this.uEcharts)
|
|
|
var seriesData = data ? data : this.seriesData
|
|
|
- var option = {}
|
|
|
- option.series = seriesData.map(res => {
|
|
|
+ // console.log(seriesData)
|
|
|
+ // var option = this.uOption
|
|
|
+ this.uOption.xAxis.data = this.xAxisData
|
|
|
+ this.uOption.series = seriesData.map(res => {
|
|
|
return {
|
|
|
name: res.name,
|
|
|
type: 'bar',
|
|
|
+ smooth: true,
|
|
|
data: res.data,
|
|
|
}
|
|
|
})
|
|
|
- this.uEcharts.setOption(option)
|
|
|
+ // console.log(this.uOption.series)
|
|
|
+ this.uEcharts.hideLoading()
|
|
|
+ this.uEcharts.setOption(this.uOption, true)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.a-spin{
|
|
|
+ height: 100%;
|
|
|
+ .ant-spin-container{
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
.lineBarCharts{
|
|
|
width: 100%;
|
|
|
height: 100%;
|