1.在html文件导入echart
<!-- 引入echarts -->
< script src = "https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js" ></ script >
2.在main.js上挂载echarts对象
Vue.prototype.$echarts = window.echarts
// 使用时直接使用this.$echarts
3.页面结构
< template >
< div class = "com-container" >
< div class = "com-chart" ref = "sellerRef" ></ div >
</ div >
</ template >
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 引入主题配置文件
<!-- 引入主题 -->
< script src = "./static/lib/theme/chalk.js" ></ script >
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 中使用柱状图 的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.cn/post/6919726191666528263
查看更多关于如何在vue 中使用柱状图 并自修改配置的详细内容...