vue 柱状图,
这篇文章主要为大家详细介绍了某视频剪辑软件实现横向斜切柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现横向斜切柱状图的具体代码，供大家参考，具体内容如下
实现效果：
实现代码：
模板
div class=消费
div style= width:350 px；高度：180px ref=ConsumptionChart /
/div
/模板
脚本
从"电子海图"导入电子海图
const myShape={
x: 0，
y: 0，
宽度：10 //间距
}
//绘制左侧面
const linendroofbar=e图表。图形。扩展形状({
形状：myShape，
buildPath: function(ctx，shape) {
//会帆布的应该都能看得懂，形状是从习俗传入的
const xAxisPoint=shape。xAxisPoint
const c0=[shape.x，shape.y]
常数c1=[shape.x 14，shape.y - 10]
const c2=[xAxisPoint[0]，xAxisPoint[1] - 10]
const c3=[xAxisPoint[0]，xAxisPoint[1]]
中强。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(倾斜的工具栏，倾斜的工具栏)
const defaultOption={
工具提示：{
秀：真的，
触发器："轴",
axisPointer: {
类型："阴影"
}
},
网格：{
top: 10，
底部：30,
左：10,
右：10,
containLabel: true
},
亚西斯：{
类型："类别",
数据：[],
轴线：{
显示：假
},
轴棒：{
显示：假
},
axisLabel: {
颜色（值，索引){
返回颜色[索引]
},
字体大小：14
}
},
xAxis: {
类型："值",
轴线：{
显示：假
},
最小值：0,
分割线：{
显示：假
},
轴棒：{
显示：假
},
axisLabel: {
显示：假
},
边界差距：[20% , 20%]
},
系列：[
{
类型："自定义",
名称： ,
项目样式：{
颜色： rgba(44，197，253，1)
},
renderItem: (params，api)={
常量位置=API。coord([API。值(0)，api.value(1)])
const xlocation=api.coord([0，api.value(1)])
返回{
类型：倾斜杆，
形状：{
api，
xValue: api.value(0)，
yValue: api.value(1)，
x:位置[0],
y:位置[1] myShape.width
xAxisPoint: [xlocation[0]，xlocation[1] myShape.width]
},
风格：{
填充：新的电子海图。图形。线性梯度(0，0，1，0，[
{
偏移量：0,
颜色：颜色[params.dataIndex]
},
{
偏移量：1,
颜色：colorss[params.dataIndex]
}
])
}
}
},
数据：[]
},
{
类型："条形",
标签:{
正常：{
秀：真的，
位置："右侧",
fontSize: 14，
偏移量：[15,0]
}
},
showBackground: false，
条宽：14,
backgroundStyle: {
颜色： rgba(50，197，255，0.1)
},
项目样式：{
颜色："透明"
},
工具提示：{
显示：假
},
数据：[]
}
]
}
导出默认值{
data() {
返回{
我的图表：空
}
},
已安装(){
this.myChart=echarts.init(this .$参考文献。消耗图表)
},
方法：{
getOption(seriesData) {
常量选项=默认选项
const { yAxis，series }=option
//处理数据
yAxis.data=[低, 中, 高]
系列[0]。数据=系列数据
系列[1]。data=seriesData.map((item，index)=Object.assign(item，{ label: { color: colorss[index] }))
this.myChart.setOption(选项)
}
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。