先上效果图：
图中柱状图变成纯蓝色是鼠标滑动过的颜色（颜色可改，本人配色能力十分的强，建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)）
1、环境说明
Vue版本："vue": "^2.5.2"
d3版本："d3": "^5.9.1"
2、Histogram.vue源码
<!--
d3组件：柱状图
属性说明：
id：必填，如果同一页面引用多个柱状图，请设置不同的id
width：选填，默认600
height：选填，默认600
begincolor：选填，柱状图渐变色的起始颜色，默认绿色
endcolor：选填，柱状图渐变色的结束颜色，默认蓝色
selectcolor：选填，鼠标滑过柱状图时显示的颜色，默认蓝色
dataset：必填，数据
数据格式：
[
{'name': '北京', value: },
{'name': '厦门', value: },
{'name': '大兴安岭', value: },
{'name': '苏州', value: }
]
rotate：选填，当x轴文字过长，可设置此值为true让文字旋转，默认不旋转
onRectClick: 选填，点击柱状图的自定义事件
--> <template>
<div class="histogram" :id="id">
</div>
</template> <script>
import * as d3 from 'd3'
function noop(d, i) {
// console.log(d)
// console.log(i)
}
export default {
name: 'histogram',
props: {
id: String,
width: Number,
height: Number,
begincolor: String,
endcolor: String,
selectcolor: String,
dataset: Array,
rotate: Boolean,
onRectClick: {
type: Function,
default: noop
}
},
mounted () {
this.init();
},
methods: {
init() {
d3.select("#svg" + this.id).remove();
let width = this.width ? this.width : ;
let height = this.height ? this.height : ;
let svg = d3.select("#" + this.id).append("svg").attr("width", width).attr("height", height).attr("id", "svg" + this.id);
let begincolor = this.begincolor ? this.begincolor : 'steelblue';
let endcolor = this.endcolor ? this.endcolor : 'green';
let selectcolor = this.selectcolor ? this.selectcolor : 'steelblue';
let linecolorid = 'linecolor' + this.id;
let linearGradient = svg.append('defs').append('linearGradient').attr('id', linecolorid)
.attr('x1', '0%').attr('y1', '0%').attr('x2', '0%').attr('y2', '100%')
linearGradient.append('stop').attr('offset', '0%').attr('style', 'stop-color:' + begincolor + '; stop-opacity:1')
linearGradient.append('stop').attr('offset', '100%').attr('style', 'stop-color:' + endcolor + '; stop-opacity:1')
let gwidth = width - ;
let gheight = height - ;
let values = this.dataset.map(d => d.value)
let xScale1 = d3.scaleBand().range([, gwidth]).domain(this.dataset.map(d => d.name))
let yScale1 = d3.scaleLinear().domain([, d3.max(values)]).range([gheight, ]);
let xAxis = d3.axisBottom().scale(xScale1);
let yAxis = d3.axisLeft().scale(yScale1);
let xScale = d3.scaleBand()
.domain(d3.range(this.dataset.length))
.rangeRound([, gwidth])
.round(0.05);
let yScale = d3.scaleLinear()
.domain([, d3.max(values)])
.range([, gheight]);
svg.selectAll("rect")
.data(values)
.enter()
.append("rect")
.attr("x", (d, i) => + xScale(i))
.attr("width", xScale.bandwidth() - )
.attr("y", + gheight)
.attr("height", )
.attr("fill", "red")
.on("click", this.onRectClick)
// .on("click", function(d, i) {
// d3.select(this)
// .transition()
// .duration(1000)
// .ease(d3.easeBounce)
// .attr("fill", "green");
// })
.on("mouseover", function(d, i) {
d3.select(this)
// .transition(d)
// .duration(200)
// .ease(d3.easeBounce)
.attr("fill", selectcolor);
})
.on("mouseout", function(d, i) {
d3.select(this)
// .transition(d)
// .duration(200)
// .ease(d3.easeBounce)
.attr("fill", "url(#" + linecolorid + ")");
})
.transition()
.duration()
.ease(d3.easeBounce)
.delay((d, i) => i * )
.attr("y", (d) => + gheight - yScale(d))
.attr("height", yScale)
.attr("fill", "url(#" + linecolorid + ")"); svg.selectAll("text")
.data(values)
.enter()
.append("text")
.attr("x", (d, i) => + xScale(i))
.attr("y", d => + gheight - yScale(d))
.attr("dx", xScale.bandwidth() / )
.attr("dy", )
.attr("text-anchor", "begin")
.attr("font-size", () => {
if (width > ) return ;
else return ;
})
.attr("fill", "white")
.transition()
.delay()
.text(d => d); let xvalues = svg.append("g")
.attr("transform", "translate(60, " + (gheight + ) + ")")
.call(xAxis) if (this.rotate) {
xvalues.selectAll('text')
.attr("dx", -)
.attr("dy", )
.attr("transform", "rotate(-30)")
} svg.append("g")
.attr("transform", "translate(60, 50)")
.call(yAxis); // if (this.width && this.height) {
// svg.attr("width", this.width)
// .attr("height", this.height)
// .attr("viewBox", "0 0 600 600");
// }
}
},
watch: {
dataset() {
this.init();
}
}
}
</script> <style> </style>
3、api说明
d3组件：柱状图
属性说明：
id：必填，如果同一页面引用多个柱状图，请设置不同的id
width：选填，默认600
height：选填，默认600
begincolor：选填，柱状图渐变色的起始颜色，默认绿色
endcolor：选填，柱状图渐变色的结束颜色，默认蓝色
selectcolor：选填，鼠标滑过柱状图时显示的颜色，默认蓝色
dataset：必填，数据
数据格式：
[
{'name': '北京', value: },
{'name': '厦门', value: },
{'name': '大兴安岭', value: },
{'name': '苏州', value: }
]
rotate：选填，当x轴文字过长，可设置此值为true让文字旋转，默认不旋转
onRectClick: 选填，点击柱状图的自定义事件
4、使用示例
<template>
<div id="test">
<histogram id="histogram" :dataset="data" :onRectClick="test"></histogram>
</div>
</template> <script>
import histogram from '@/components/d3/Histogram'
export default {
name: 'test',
data() {
return {
data: [
{'name': '北京', value: },
{'name': '厦门', value: },
{'name': '大兴安岭', value: },
{'name': '苏州', value: }
]
}
},
components: {
histogram
},
methods: {
test(d, i) {
this.$alert(d, i, {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}
}
</script> <style scoped>
</style>