v-charts柱状图使用
v-charts柱状图使用效果图按需引入柱状图使用柱状图效果图按需引入柱状图import Vue from 'vue'// 柱状图import VeHistogram from 'v-charts/lib/histogram.common'Vue.component(VeHistogram.name, VeHistogram)使用柱状图<template><div class="
·
效果图
按需引入柱状图
import Vue from 'vue'
// 柱状图
import VeHistogram from 'v-charts/lib/histogram.common'
Vue.component(VeHistogram.name, VeHistogram)
使用柱状图
<template>
<div class="contents">
<div class="chartBox">
<ve-histogram
style="hieght:300px"
:extend="chartExtend"
:data="chartData"
:settings="chartSettings"
:tooltip="tooltip"
/>
</div>
</div>
</template>
<script>
export default {
data() {
this.chartSettings = {
labelMap: {
BankReceiveAmount: '计划对比',
ActualAmout: '实际完成进度',
InvoiceAmount: '已超期'
},
yAxisName: ['百分比']
}
this.chartExtend = {
title: { text: '进度详情', left: 'center', style: 'fontSize:0.4rem' },
// 图例设置 显示哪个颜色分别表示什么
legend: {
formatter: function(name) { // 用来格式化图例文本,支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
console.log(name, '图例名称')
if (name === '计划时间' || name === '实际时间') {
return
}
return name
},
show: true,
bottom: 'bottom'
},
// 设置 计划时间和实际时间为 白色 #FFFFFF
color: ['#FFFFFF', '#FFFFFF', '#E4E4E4', '#00CC33', '#FF7350', '#FF3300'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow', // type:"cross"
crossStyle: {
color: '#999'
}
}
},
// 每个柱子
series(v) {
console.log('每个柱子', v)
// 颜色
const colors = ['#E4E4E4', '#00CC33', '#FF7350', '#FF3300', '#FFFFFF', '#FFFFFF']
// 设置柱子的样式
v.forEach(i => {
console.log('每个柱子里面的数据', i)
// i.barWidth = 20
// i.itemStyle = {
// color: colors[v.indexOf(i)],
// borderWidth: 0
// }
if (i.name === '计划时间' || i.name === '实际时间') {
i.barWidth = 0
} else {
i.barWidth = 15
i.itemStyle = {
color: colors[v.indexOf(i)],
borderWidth: 0
}
}
// i.label = {
// color: colors[i],
// show: false, // 每个柱子上的数据显示
// position: 'top'
// }
})
return v
}
}
// 提示框内容
this.tooltip = {
trigger: 'axis',
position: function(point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0 // x坐标位置
var y = 0 // y坐标位置
// 当前鼠标位置
var pointX = point[0]
var pointY = point[1]
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0]
var boxHeight = size.contentSize[1]
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5
} else { // 左边放的下
x = pointX - boxWidth
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5
} else { // 上边放得下
y = pointY - boxHeight
}
return [x, y]
},
formatter: function(params, ticket, callback) {
console.log(params, ticket, 'params数据')
let htmlStr = ''
for (let i = 0; i < params.length; i++) {
const param = params[i]
const xName = param.name// x轴的名称
const seriesName = param.seriesName// 图例名称
const value = param.value// y轴值
const color = param.color// 图例颜色
if (i === 0) {
htmlStr += xName + '<br/>'// x轴的名称
}
htmlStr += '<div>'
// 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
// htmlStr += '<span style="color:'+color+'">';
// 圆点后面显示的文本
if (seriesName === '计划时间' || seriesName === '实际时间') {
htmlStr += seriesName + ':' + value
} else {
// 为了保证和原来的效果一样,这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
htmlStr += seriesName + ':' + value + '%'
}
// 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
// htmlStr += '</span>';
htmlStr += '</div>'
}
return htmlStr
}
}
return {
chartData: {
columns: ['阶段', '计划对比', '实际完成进度', '已超期', '计划时间', '实际时间'],
// 自己定义的假数据
rows: [
{ '阶段': '设计', '计划对比': 53.9, '实际完成进度': 90.9, '已逾期': 10.0, '计划时间': '2020.9.16-2020.10.1', '实际时间': '2020.9.16-2020.10.1' },
{ '阶段': '实施', '计划对比': 35.3, '实际完成进度': 62.3, '已逾期': 80.0, '计划时间': '2020.9.16-2020.10.1', '实际时间': '2020.9.16-2020.10.1' },
{ '阶段': '装备', '计划对比': 29.2, '实际完成进度': 86.2, '已逾期': 10.2, '计划时间': '2020.9.16-2020.10.1', '实际时间': '2020.9.16-2020.10.1' },
{ '阶段': '调试', '计划对比': 87.2, '实际完成进度': 34.2, '已逾期': 20.4, '计划时间': '2020.9.16-2020.10.1', '实际时间': '2020.9.16-2020.10.1' }
]
}
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
// 获取后台返回的数据 对返回的天数进行计算
vm.chartData.rows = vm.$route.query.data.map(item => {
const index1 = item.actualStartDate.indexOf(' ')
const index2 = item.actualFinishDate.indexOf(' ')
item.actualStartDate = item.actualStartDate.substring(0, index1)
item.actualFinishDate = item.actualFinishDate.substring(0, index2)
const temp = {
'阶段': item.processName,
'计划对比': 100,
'实际完成进度': null,
'已逾期': null,
'计划时间': item.expectedStartDate + '至' + item.expectedFinishDate,
'实际时间': item.actualStartDate + '至' + item.actualFinishDate
}
// 计划天数
const s1 = new Date(item.expectedStartDate.replace(/-/g, '/')) // 计划开始时间
const f1 = new Date(item.expectedFinishDate.replace(/-/g, '/'))// 计划结束时间
const time1 = f1.getTime() - s1.getTime() // 计划天数
const day1 = parseInt(time1 / (1000 * 60 * 60 * 24))// 实际天数
// 已完成
if (item.status === 'FINISH') {
// 实际天数
const s2 = new Date(item.actualStartDate.replace(/-/g, '/'))
const f2 = new Date(item.actualFinishDate.replace(/-/g, '/'))// 计划结束时间
const time2 = f2.getTime() - s2.getTime()
const day2 = parseInt(time2 / (1000 * 60 * 60 * 24))// 实际天数
temp['实际完成进度'] = (day2 / day1).toFixed(4) * 100
temp['已逾期'] = 0
}
// 未完成
if (item.status === 'NOT_FINISH') {
// 实际天数
const s2 = new Date(item.actualStartDate.replace(/-/g, '/'))
const f2 = new Date()// 当前日期:2017-04-24
const time2 = f2.getTime() - s2.getTime()
const day2 = parseInt(time2 / (1000 * 60 * 60 * 24))// 实际天数
temp['实际完成进度'] = (day2 / day1).toFixed(4) * 100
temp['已逾期'] = 0
}
return temp
})
})
}
}
</script>
<style lang="less" scoped>
@import '@/styles/publicSty.less';
.contents{
width: 100%;
padding: 0.2rem;
// 环形图样式
.chartBox{
width:100%;
border: 1px solid #F2F2F2;
border-radius: 0.2rem;
margin-bottom: 0.2rem;
}
}
</style>
更多推荐
已为社区贡献8条内容
所有评论(0)