echarts实现立体柱状图,echarts 柱形图
这篇文章主要为大家详细介绍了某视频剪辑软件使用展示实现立体柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件使用展示实现立体柱形图的具体代码，供大家参考，具体内容如下
立体柱形图是由前面、右面、上面三部分组成，绘制时需要先绘制前面为一个图形，右面和上面绘制为一个图形，然后在埃查茨中注册，在选择权的系列中渲染项目中渲染
代码如下：
（1）注册绘制图形
注册表(){
设MyCubeRect=this .$echarts.graphic.extendShape({
形状：{
x: 0，
y: 0，
宽度：20,
zWidth: 8，
zHeight: 4
},
buildPath: function (ctx，shape) {
const api=shape.api
const xAxisPoint=API。坐标([形状。xvalue，0])
常数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()
}
})
让我的立方体阴影=这个echarts.graphic.extendShape({
形状：{
x: 0，
y: 0，
宽度：20,
zWidth: 8，
zHeight: 4
},
buildPath: function (ctx，shape) {
const api=shape.api
const xAxisPoint=API。坐标([形状。xvalue，0])
const p1=[shape.x - shape.width/2，shape.y]
const p4=[shape.x shape.width/2，shape.y]
常量P6=[形状。x形。宽度/2形状。z宽度，形状。y形。哲身高]
const p7=[shape。x形。宽度/2形状。z宽度，形状。y形。哲身高]
const p3=[shape.x shape.width/2，xAxisPoint[1]]
const P5=[shape。x形。宽度/2形状。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()
}
})
这个图表。图形。注册形状( mycuberec ，mycuberec)
这个图表。图形。注册形状( mycubeshawk ，mycubeshawk)
}
（2）渲染图形
条形图选项：{
工具提示：{
触发器："轴",
axisPointer: {
类型：十字，
标签:{
背景颜色： #6a7985
}
}
},
网格：{
containLabel: true，
顶部：“30px”，
底部：“0px”，
左：" 0px "
},
xAxis: {
类型："类别",
axisLabel: {
间隔：0,
fontSize: fontSize(12)
},
轴线：{
秀：假的，
线型：{
颜色： #98b9c5
}
},
数据：[] //通过后端传入数据射流研究…传入
},
亚西斯：{
类型："值",
axisLabel: {
fontSize: fontSize(12)
},
轴线：{
秀：假的，
线型：{
颜色： #98b9c5
}
},
分割线：{
线型：{
颜色： #3a586a ，
类型："虚线"
}
}
},
系列：[{
名称： 单位面积能耗，
类型："自定义",
renderItem: (params，api)={
设位置=API。coord([API。值(0)，api.value(1)])
返回{
类型："组",
孩子：[{
类型： MyCubeRect ，
形状：{
api，
xValue: api.value(0) - 0.5，
yValue: api.value(1)，
x:位置[0],
y:位置[1]
},
style: api.style()
},
{
类型：我的立方体阴影，
形状：{
api，
xValue: api.value(0) - 0.5，
yValue: api.value(1)，
x:位置[0],
y:位置[1]
},
风格：{
fill: api.style()，
文本：""
}
}]
}
},
堆栈： 单位面积能耗，
标签:{
秀：真的，
位置："顶部",
格式化程序：" {c} "，
textStyle: {
fontSize: fontSize(12)，
颜色： #fff ，
对齐："居中"
}
},
项目样式：{
颜色：新款这个图表。图形。线性梯度(
0, 0, 0, 1,
[
{ offset: 0，color:"# b 1950d"}，
{ offset: 0.5，color: #aea20d }，
{ offset: 1，color: #a5aa12 }
]
)
},
数据：[] //后端传入数据
}]
}
注意事项：
1)、在注册图形时风格：只能使用风格：API。style()；
文本：""后面才能使用标签在图形顶部放置价值
2)、这个echarts是经过统一封装之后的，具体情况还需具体考虑
（3）生成图形
generateBarChart () {
让vm=这个
如果（这个refs[ uiinternergyconsume ]){//this .$参考文献是生成图形区域的裁判员值
这个图表。图形。注册形状( MyCubeRect ，this .MyCubeRect)
这个图表。图形。注册形状( mycubeshawk ，this .我的立方体阴影)
这个.柱状图=这个.$echarts.init(this .$refs[uintEnergyConsume])
这个。条形图。setoption(这个。条形图选项，假，真)
$(窗口)。resize(function () { //屏幕自适应
vm.handleResize()
})
}
}
（4）template中代码
div ref= uiinternergyconsume id= uiinternergyconsume class= chart-container
style= width:100%；element-loading-text=加载中./div
/div
（5）效果如下：
参考图形网址：Vue使用展示实现立体柱状图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。