如何在vue 中使用柱状图并自修改配置

2023-07-06 12:36:04 331

4.data中的数据

exportdefault{ data(){ return{ //初始化的图表 chartInstance:null, allDate:null,//服务器返回的数据 } }, } ```js #####5.methods中的逻辑 ```js methods:{ //初始化echarts对象 initEchart(){ //获取dom对象 this.chartInstance=this.$echarts.init(this.$refs.sellerRef) }, //获取服务器的数据 asyncgetData(){ const{data:res}=awaitthis.$http.get('seller') this.allDate=res //返会的数据结构是name商家value数值 //对返回的数据进行从小打到排序sort方法 this.allDate.sort((a,b)=>{ returna.value-b.value }) //调用更新视方法 this.updateChart() }, //更新图表 updateChart(){ //y轴类目轴的数据 constsellerNames=this.allDate.map(item=>{ //根据你的需求调整 returnitem.name }) //x轴数值轴的数据 constsellerValues=this.allDate.map(item=>{ returnitem.value }) constoption={ 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) },

更改柱形图配置

1.在index.html引入主题配置文件

2.在需要使用主题的地方使用初始化获取dom传入chalk

this.chartInstance=this.$echarts.init(this.$refs.sellerRef,'chalk')

3.option的配置LinearGradient(x1,x2,y1,y2)线性渐变

constoption={ 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:newthis.$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中使用柱状图的资料请关注毛票票其它相关文章！

如何在vue 中使用柱状图并自修改配置

1.在html文件导入echart

2.在main.js上挂载echarts对象

3.页面结构

4.data中的数据

mounted钩子函数调用

更改柱形图配置

1.在index.html引入主题配置文件

2.在需要使用主题的地方使用初始化获取dom传入chalk

3.option的配置LinearGradient(x1,x2,y1,y2)线性渐变

随机推荐

如何在vue 中使用柱状图 并自修改配置

1.在html文件导入echart

2.在main.js上挂载echarts对象

3.页面结构

4.data中的数据

mounted钩子函数调用

更改柱形图配置

1.在index.html引入主题配置文件

2.在需要使用主题的地方使用初始化获取dom传入chalk

3.option的配置LinearGradient(x1,x2,y1,y2)线性渐变

热门推荐

随机推荐

如何在vue 中使用柱状图并自修改配置