实现最后一个柱状图与前面的颜色不同。 ...............................
作者: Carl Chen
-->
<template>
<v-chart :option="deptCalendarProjectYearNmubers" />
</template>
<script>
export default {
props: ['projectYearNmubersOrigin', 'projectNumberYears'],
data() {
return {
cpynCount: 0,
deptCalendarProjectYearNmubers: {},
years: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020， 2021],
projectYearNmubers:[259, 382, 321, 422, 427, 584, 631, 650, 485],
}
},
methods: {
deptCalendarProjectYearRender() {
this.deptCalendarProjectYearNmubers = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: '历年项目个数（单位：个）',
textStyle: {
fontSize: 16,
color: '#E6E6FF'
},
left: '1%',
top: '3%'
},
xAxis: {
offset: 14, // X轴字段偏移量
axisLabel: {
interval: 0, // X轴字段间隔
color: '#8BA0C4',
fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
fontSize: 13,
},
axisTick: {
alignWithLabel: true, // 坐标轴刻度的显示间隔
lineStyle: {
color: '#fffff',
width: 1,
},
show: true,
},
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: '#384267',
width: 1,
type: 'dashed',
},
show: true,
},
data: this.years,
type: 'category',
},
yAxis: {
type: 'value',
axisLabel: {
margin: 20,
color: '#8BA0C4',
fontWeight: 400,
fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
fontSize: 10,
},
splitLine: {
show: true, // X轴竖线展示
lineStyle: {
color: '#384267',
type: 'line',
opacity: 0.5
},
},
axisLine: {
lineStyle: {
color: '#fff',
width: 1,
type: 'line',
},
show: false, // Y轴竖线展示
},
},
visualMap: [{ // 分段型视觉映射组件
show: false,
dimension: 0,
pieces: [ // 分段颜色
{
gte: 0,
lte: this.years.length - 2,
color: { // 渐变色
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(157,124,251, 1)',
},
{
offset: 1,
color: 'rgba(65, 64, 142, 0.6)',
},
],
}
},
{
gt: this.years.length - 2,
color: { // 渐变色
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(230, 208, 83, 1)',
},
{
offset: 1,
color: 'rgba(65, 64, 142, 1)',
},
],
}
}
]
}],
series: [
{
data: this.projectYearNmubers,
type: 'bar',
name: '当年项目个数',
barWidth: '65%',
label: {
show: true,
position: 'top',
distance: 8,
textStyle: {
color: '#E6E6FF',
fontSize: 14
},
formatter: function(params) {
return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
},
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(61, 212, 214, 1)',
},
{
offset: 1,
color: 'rgba(16, 98, 255, 0.3)',
},
],
},
}
},
],
grid: {
height: '70%',
width: '86%',
left: '12%',
// top: '12%'
}
}
},
getDataFromBack(res) {
// 初始化图表
this.deptCalendarProjectYearRender();
}
},
mounted () {
}
}
</script>
<style lang="scss" scoped>
</style>
