这篇文章主要讲解了“怎么用vue制作横向斜切柱状图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用vue制作横向斜切柱状图”吧！
本文实例为大家分享了vue实现横向斜切柱状图的具体代码，供大家参考，具体内容如下
实现效果：
实现代码：
计算
安全
数据库
网络和加速
企业服务
<template>
<div class="Consumption">
<div ref="ConsumptionChart" />
</div>
</template>
<script>
import echarts from 'echarts'
const myShape = {
x: 0,
y: 0,
width: 10 //间距
}
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
shape: myShape,
buildPath: function(ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x + 14, shape.y - 10]
const c2 = [xAxisPoint[0], xAxisPoint[1] - 10]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath()
}
})
const colors = ['rgba(50, 197, 255, 0.8)', 'rgba(0, 253, 255, 0.8)', 'rgba(255, 235, 0, 0.8)']
const colorss = ['rgba(0, 145, 255, 1)', 'rgba(68, 215, 182, 1)', 'rgba(215, 170, 68, 1)']
// 注册三个面图形
echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar)
const defaultOption = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 10,
bottom: 30,
left: 10,
right: 10,
containLabel: true
},
yAxis: {
type: 'category',
data: [],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color(value, index) {
return colorss[index]
},
fontSize: 14
}
},
xAxis: {
type: 'value',
axisLine: {
show: false
},
min: 0,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
boundaryGap: ['20%', '20%']
},
series: [
{
type: 'custom',
name: '',
itemStyle: {
color: 'rgba(44, 197, 253, 1)'
},
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
const xlocation = api.coord([0, api.value(1)])
return {
type: 'InclinedRoofBar',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1] + myShape.width,
xAxisPoint: [xlocation[0], xlocation[1] + myShape.width]
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: colors[params.dataIndex]
},
{
offset: 1,
color: colorss[params.dataIndex]
}
])
}
}
},
data: []
},
{
type: 'bar',
label: {
normal: {
show: true,
position: 'right',
fontSize: 14,
offset: [15, 0]
}
},
showBackground: false,
barWidth: 14,
backgroundStyle: {
color: 'rgba(50, 197, 255, 0.1)'
},
itemStyle: {
color: 'transparent'
},
tooltip: {
show: false
},
data: []
}
]
}
export default {
data() {
return {
myChart: null
}
},
mounted() {
this.myChart = echarts.init(this.$refs.ConsumptionChart)
},
methods: {
getOption(seriesData) {
const option = defaultOption
const { yAxis, series } = option
// 处理数据
yAxis.data = ['低', '中', '高']
series[0].data = seriesData
series[1].data = seriesData.map((item, index) => Object.assign(item, { label: { color: colorss[index] } }))
this.myChart.setOption(option)
}
}
}
</script>感谢各位的阅读，以上就是“怎么用vue制作横向斜切柱状图”的内容了，经过本文的学习后，相信大家对怎么用vue制作横向斜切柱状图这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
