vue柱形图,vue实现柱状图
这篇文章主要介绍了如何在某视频剪辑软件中使用柱状图并自修改配置，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下
1.在html文件导入echart
！-引入电子海图-
脚本src= https://cdn。bootcdn。net/Ajax/libs/echarts/4。8 .0/电子海图。量滴js /脚本
2.在main.js上挂载echarts对象
vue。原型。$ e图表=窗口。电子图表
//使用时直接使用这个echarts
3.页面结构
模板
div class= com-容器
div class= com-chart ref= seller ref /div
/div
/模板
4.data中的数据
导出默认值{
data () {
返回{
//初始化的图表
chartInstance: null，
allDate: null，//服务器返回的数据
}
},
}
` ` js
5 .方法中的逻辑
` ` js
方法：{
//初始化展示对象
initEchart(){
//获取数字正射影像图对象
this.chartInstance=this .$echarts.init(this .$refs.sellerRef)
},
//获取服务器的数据
异步getData(){
const {data:res}=等待此消息. http.get(卖方)
this.allDate=res
//返会的数据结构是名字商家价值数值
//对返回的数据进行从小打到排序分类方法
this.allDate.sort((a，b)={
返回a值-乙值
})
//调用更新视方法
this.updateChart()
},
//更新图表
updateChart(){
//y轴类目轴的数据
const sellerNames=this。所有日期。地图(项目={
//根据你的需求调整
返回项目。名称
})
//x轴数值轴的数据
const seller值=this。所有日期。地图(项目={
返回项目。值
})
常量选项={
xAxis: {
类型："值"
},
亚西斯：{
类型："类别",
//y轴坐标轴使用遍历出来的名字
数据：sellerNames
},
系列：[
{
//类型为柱状图
类型："条形",
//x轴数据需要设置在系列的数据类型为遍历的价值
数据：销售值
}
]
}
//渲染选择数据给数字正射影像图对象
this.chartInstance.setOption(选项)
},
mounted钩子函数调用
//dom加载完成调用
已安装(){
this.initChart()
this.getData()
},
更改柱形图配置
1.在index.html 引入主题配置文件
！-引入主题-
脚本src= ./静态/库/主题/粉笔。js /脚本
2.在需要使用主题的地方使用 初始化获取dom传入chalk
this.chartInstance=this .$echarts.init(this .$refs.sellerRef，粉笔)
3.option的配置 LinearGradient(x1,x2,y1,y2)线性渐变
常量选项={
标题：{
文本： 商家销售统计，
textStyle: {
字体大小：66
},
左：20,
顶部：20
},
//坐标轴配置
网格：{
顶部："20%",
左："3%",
对："6%",
底部："3%",
//距离包含坐标轴文字
containLabel: true
},
xAxis: {
类型："值"
},
亚西斯：{
类型："类别",
//y轴坐标轴使用遍历出来的名字
数据：sellerNames
},
系列：[
{
//类型为柱状图
类型："条形",
//x轴数据需要设置在系列的数据类型为遍历的价值
数据：销售值，
//柱的宽度
条宽：66,
//柱文字默认不展示
标签:{
秀：真的，
//文字靠右显示
位置："右侧",
textStyle: {
//颜色为白色
颜色："白色"
}
},
//控制柱的每一项
项目样式：{
//控制柱的圆角半径
barBorderRadius: [0，33，33，0]，
//线性渐变
//指定不同百分比的颜色数值
颜色：新款这个图表。图形。线性梯度(0，0，1，0，[
{
//百分之0的样式
偏移量：0,
颜色： #5052EE
},
{
//百分之百
偏移量：1,
颜色： #AB6EE5
}
])
}
}
],
工具提示：{
触发器："轴",
axisPointer: {
类型：行,//默认为直线，可选为：线条 阴影
z: 0，//背景层级
线型：{
宽度：66,//背景宽度
颜色： #2D3443 //背景颜色
}
}
}
}
```
以上就是如何在vue中使用直方图并自行修改配置的细节。更多关于在vue中使用直方图的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。