vue使用echarts实现立体柱形图
更新时间：2022年04月02日 14:38:25 作者：小游-523 于 2020-11-06 18:39:30 发布 1775
这篇文章主要为大家详细介绍了vue使用echarts实现立体柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue使用echarts实现立体柱形图的具体代码，供大家参考，具体内容如下
立体柱形图是由前面、右面、上面三部分组成，绘制时需要先绘制前面为一个图形，右面和上面绘制为一个图形，然后在echats中注册，在option的series中renderItem中渲染
代码如下：
（1）注册绘制图形
registry () {
let MyCubeRect = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 20,
zWidth: 8,
zHeight: 4
},
buildPath: function (ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p0 = [shape.x, shape.y]
const p1 = [shape.x - shape.width / 2, shape.y]
const p4 = [shape.x + shape.width / 2, shape.y]
const p2 = [shape.x - shape.width / 2, xAxisPoint[1]]
const p3 = [shape.x + shape.width / 2, xAxisPoint[1]]
ctx.moveTo(p0[0], p0[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p2[0], p2[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p4[0], p4[1])
ctx.lineTo(p0[0], p0[1])
ctx.closePath()
}
})
let MyCubeShadow = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 20,
zWidth: 8,
zHeight: 4
},
buildPath: function (ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p1 = [shape.x - shape.width / 2, shape.y]
const p4 = [shape.x + shape.width / 2, shape.y]
const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]
const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]
const p3 = [shape.x + shape.width / 2, xAxisPoint[1]]
const p5 = [shape.x + shape.width / 2 + shape.zWidth, xAxisPoint[1] - shape.zHeight]
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p5[0], p5[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p4[0], p4[1])
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p7[0], p7[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p4[0], p4[1])
ctx.closePath()
}
})
this.$echarts.graphic.registerShape('MyCubeRect', MyCubeRect)
this.$echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow)
}（2）渲染图形
barChartOption: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
containLabel: true,
top: '30px',
bottom: '0px',
left: '0px'
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
fontSize: fontSize(12)
},
axisLine: {
show: false,
lineStyle: {
color: '#98b9c5'
}
},
data: [] //通过后端传入数据js传入
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: fontSize(12)
},
axisLine: {
show: false,
lineStyle: {
color: '#98b9c5'
}
},
splitLine: {
lineStyle: {
color: '#3a586a',
type: 'dashed'
}
}
},
series: [{
name: '单位面积能耗',
type: 'custom',
renderItem: (params, api) => {
let location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'MyCubeRect',
shape: {
api,
xValue: api.value(0) - 0.5,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'MyCubeShadow',
shape: {
api,
xValue: api.value(0) - 0.5,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: api.style(),
text: ''
}
}]
}
},
stack: '单位面积能耗',
label: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: {
fontSize: fontSize(12),
color: '#fff',
align: 'center'
}
},
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#b1950d' },
{ offset: 0.5, color: '#aea20d' },
{ offset: 1, color: '#a5aa12' }
]
)
},
data: [] //后端传入数据
}]
}注意事项：
1)、在注册图形时style：只能使用 style: api.style();
text: ''后面才能使用label在图形顶部放置value
2)、this.$echarts是经过统一封装之后的，具体情况还需具体考虑
（3）生成图形
generateBarChart () {
let vm = this
if (this.$refs['uintEnergyConsume']) { //this.$refs是生成图形区域的ref值
this.$echarts.graphic.registerShape('MyCubeRect', this.MyCubeRect)
this.$echarts.graphic.registerShape('MyCubeShadow', this.MyCubeShadow)
this.barChart = this.$echarts.init(this.$refs['uintEnergyConsume'])
this.barChart.setOption(this.barChartOption, false, true)
$(window).resize(function () { //屏幕自适应
vm.handleResize()
})
}
}（4）template中代码
<div ref="uintEnergyConsume" id="uintEnergyConsume" class="chart-container" style="width: 100%;" element-loading-text="加载中..."></div> </div>
（5）效果如下：
参考图形网址：Vue使用Echarts实现立体柱状图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue-router：嵌套路由的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
VUE-Table上绑定Input通过render实现双向绑定数据的示例
今天小编就为大家分享一篇VUE-Table上绑定Input通过render实现双向绑定数据的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文主要介绍了Element实现动态增加多个输入框并校验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
本文以click为例给大家介绍vue.js中常用v-指令，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript代码，本文通过示例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2021-10-10
这篇文章主要介绍了vue.js浅度监听和深度监听及watch用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-08-08
这篇文章主要介绍了vue2-elementUI部分组件样式修改,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要介绍了vue商城中商品“筛选器”功能的实现，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要为大家详细介绍了vue实现上传图片添加水印的升级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）
本篇文章主要介绍了详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码），具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
详解element-ui 组件el-autocomplete使用踩坑记录
最近使用了el-autocomplete组件，本文主要介绍了element-ui 组件el-autocomplete使用踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论