怎么在vue中实现一个柱状图效果-创新互联
4.data中的数据
export default {
data () {
return {
// 初始化的图表
chartInstance: null,
allDate: null, // 服务器返回的数据
}
},
}
```js
##### 5.methods中的逻辑
```js
methods: {
// 初始化echarts对象
initEchart(){
// 获取dom对象
this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
},
// 获取服务器的数据
async getData(){
const {data:res} = await this.$http.get('seller')
this.allDate = res
// 返会的数据结构是 name商家 value数值
// 对返回的数据进行从小打到排序 sort方法
this.allDate.sort((a, b) => {
return a.value - b.value
})
// 调用更新视方法
this.updateChart()
},
// 更新图表
updateChart(){
// y轴类目轴的数据
const sellerNames = this.allDate.map(item=>{
// 根据你的需求调整
return item.name
})
// x轴数值轴的数据
const sellerValues = this.allDate.map(item=>{
return item.value
})
const option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
// y轴坐标轴使用遍历出来的name
data: sellerNames
},
series: [
{
// 类型为柱状图
type: 'bar',
// x轴数据需要设置在series的data类型为遍历的value
data: sellerValues
}
]
}
// 渲染optio数据给dom对象
this.chartInstance.setOption(option)
},mounted钩子函数调用
// dom加载完成调用
mounted () {
this.initChart()
this.getData()
},更改柱形图配置
1.在index.html 引入主题配置文件
2.在需要使用主题的地方使用 初始化获取dom传入chalk
this.chartInstance = this.$echarts.init(this.$refs.sellerRef, 'chalk')
3.option的配置 LinearGradient(x1,x2,y1,y2)线性渐变
const option = {
title: {
text: '| 商家销售统计',
textStyle: {
fontSize: 66
},
left: 20,
top: 20
},
// 坐标轴配置
grid: {
top: '20%',
left: '3%',
right: '6%',
bottom: '3%',
// 距离包含坐标轴文字
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
// y轴坐标轴使用遍历出来的name
data: sellerNames
},
series: [
{
// 类型为柱状图
type: 'bar',
// x轴数据需要设置在series的data类型为遍历的value
data: sellerValues,
// 柱的宽度
barWidth: 66,
// 柱文字 默认不展示
label: {
show: true,
// 文字靠右显示
position: 'right',
textStyle: {
// 颜色为白色
color: 'white'
}
},
// 控制柱的每一项
itemStyle: {
// 控制柱的圆角半径
barBorderRadius: [0, 33, 33, 0],
// 线性渐变
// 指定不同百分比的颜色数值
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
// 百分之0的样式
offset: 0,
color: '#5052EE'
},
{
// 百分之百
offset: 1,
color: '#AB6EE5'
}
])
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
z: 0, // 背景层级
lineStyle: {
width: 66, // 背景宽度
color: '#2D3443' // 背景颜色
}
}
}
}
```看完上述内容，你们对怎么在vue中实现一个柱状图效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
网页名称：怎么在vue中实现一个柱状图效果-创新互联
网站地址：http://6mz.cn/article/ddjghg.html