效果图
- 标题table栏可以切换,这里就不上代码了,切换的时候需要重新销毁和重建一下dom节点,否则会出现bug,使用这个插件的时候需要注意一下dom节点的问题
- 首先需要装一下 这个插件
- 可以看一下插件的文档
:https://chenxuan0000.github.io/vue-seamless-scroll/guide/
npm install vue-seamless-scroll --save
- 主要代码:样式根据自己需求调整,请求接口请换成自己的,根据数据处理
<template>
<div>
<div class="item">
<div class="title">
<span>{{ title }}</span>
<span>{{ num }}<span style="fontSize:18px">{{ unit }}</span></span>
</div>
<vue-seamless-scroll :data="list" :class-option="classOption" id="warp" class="warp" v-if="isShow">
<div class="ech_situation"></div>
</vue-seamless-scroll>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import { subsidyDetail } from '@/api/cockpit'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
cockpitTitle,
vueSeamlessScroll
},
data() {
return {
num: 0,
isShow: true,
unit: '万人',
list: [],
type: 1,
classOption: {
singleHeight: 50,
waitTime: 0
},
data: [],
title: '',
total: []
}
},
computed: {},
watch: {},
methods: {
async change(type) {
this.isShow = false
await this.getData(type)
this.isShow = true
setTimeout(() => {
document.querySelectorAll('.ech_situation').forEach(dom => {
this._subsidyDetail(dom)
})
}, 0)
},
async getData(type) {
const res = await subsidyDetail()
this.data = []
this.list = res.data.details
if (type === 2) {
this.list.forEach(i => {
this.data.push({
name: i.projectName,
value: i.pay || 0,
type: '万元'
})
})
this.title = '支出总资金'
this.unit = '万元'
this.num = res.data.totalPay
this.total = [5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000]
} else {
this.title = '惠及总人数'
this.num = res.data.totalPersonTime
this.unit = '万人'
this.total = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
this.list.forEach(i => {
this.data.push({
name: i.projectName,
value: i.personTime || 0,
type: '万人'
})
})
}
},
_subsidyDetail(dom) {
const myChart = echarts.init(dom)
const nameList = this.data.map(i => i.name)
var data = this.data
this.num = this.data.map(i => i.value).reduce((total, item) => item + total)
this.num = this.num.toFixed(1)
var list = this.data.map(i => i.value)
myChart.setOption({
grid: {
top: '2%',
bottom: 0,
right: 10,
left: 0
},
xAxis: {
show: false
},
yAxis: [
{
show: true,
data: nameList,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
color: '#fff',
align: 'left',
margin: 80,
fontSize: 28,
formatter: function(value, index) {
return '{title|' + value + '}'
},
rich: {
title: {
width: 165
}
}
}
},
{
show: true,
data: nameList,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
color: ['#fff'],
align: 'right',
verticalAlign: 'bottom',
lineHeight: 30,
padding: [0, 10, 0, 0],
fontSize: 20,
formatter: function(value, index) {
return data[index].value + data[index].type
}
}
}
],
series: [
{
name: '外框',
type: 'bar',
barGap: '-65%',
data: this.total,
barWidth: 12,
itemStyle: {
normal: {
barBorderRadius: 4,
color: 'transparent',
barBorderColor: '#1588D1',
barBorderWidth: 1
}
},
z: 0
},
{
name: '条',
type: 'bar',
data: list,
barWidth: 4,
itemStyle: {
normal: {
color: function(params) {
var colorList = [
['#F2B73D', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff'],
['#75CCFD', '#fff']
]
var colorItem = colorList[params.dataIndex]
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: colorItem[0]
},
{
offset: 0.9,
color: colorItem[0]
},
{
offset: 1,
color: colorItem[1]
}
],
false
)
}
}
},
label: {
normal: {
color: 'rgba(255,255,255,0.8)',
show: true,
position: [0, '-25px'],
padding: [0, 0, 0, 3],
textStyle: {
fontSize: 20
},
formatter: function(a, b) {
return a.name
}
}
}
}
]
})
}
},
created() {},
async mounted() {
await this.getData(1)
setTimeout(() => {
document.querySelectorAll('.ech_situation').forEach(dom => {
this._subsidyDetail(dom)
})
}, 0)
},
activated() {}
}
</script>
<style lang="less" scoped>
.item {
width: 100%;
.title {
height: 65px;
color: #fff;
font-weight: bold;
display: flex;
align-items: center;
:first-child {
opacity: 0.6;
font-size: 20px;
}
:nth-child(2){
font-size: 28px;
margin-left: 13px;
}
:nth-child(3){
font-size: 18px;
}
}
.ech_situation {
height: 700px;
}
}
.warp {
height: 250px;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
</style>