怎么在vue中实现一个柱状图效果

　　介绍

今天就跟大家聊聊有关怎么在vue中实现一个柱状图效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

1。在html文件导入echart

, & lt; !——,引入echarts ——比; 　　https://www.yisu.com/zixun/, & lt; script  src=" https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js ">

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

Vue.prototype echarts 美元;=window.echarts//,使用时直接使用。美元echarts

3。页面结构

& lt; template> 　　,& lt; div 类=癱om-container"比; 　　& lt;才能div 类=癱om-chart", ref=皊ellerRef"祝辞& lt;/div> 　　,& lt;/div> 　　& lt;/template>

4。中数据的数据

export  default  { 　　,data  (), { 　　return {才能//,,,初始化的图表 　　,,,chartInstance:空, 　　,,,allDate:空,,//,服务器返回的数据 　　,,} 　　}, 　　} 　　”“js 　　# # # # #,5.方法中的逻辑 　　”“js 　　方法:,{//才能,初始化echarts对象 　　initEchart才能(){ 　　,,,//,获取dom对象 　　,,this.chartInstance =,这。echarts.init美元(这一点。refs.sellerRef美元) 　　,,},//,才能获取服务器的数据 　　async 才能;getData () { 　　,,,const {数据:res},=await 这。美元http.get(& # 39;之# 39;) 　　,,,this.allDate =res 　　,,,//,返会的数据结构是,名字商家,值数的值//,,,对返回的数据进行从小打到排序,这种方法 　　,,this.allDate.sort ((a, b),=祝辞,{ 　　,,,return  a.value 作用;b.value 　　,,}) 　　,,,//,调用更新视方法 　　,,,this.updateChart () 　　,,},//,才能更新图表 　　updateChart才能(){//才能,y轴类目轴的数据 　　const 才能;sellerNames =, this.allDate.map(项=祝辞{ 　　,,,//,根据你的需求调整 　　,,,return  item.name 　　})才能//才能,x轴数值轴的数据 　　const 才能;sellerValues =, this.allDate.map(项=祝辞{ 　　,,,return  item.value 　　})才能 　　,,,,const  option =, { 　　,,,xAxis:, { 　　,,,,类型:,& # 39;价值# 39; 　　,,,}, 　　,,,桠溪:,{ 　　,,,,类型:,& # 39;类别# 39; 　　,,,,//,y轴坐标轴使用遍历出来的名字 　　,,,,数据:sellerNames 　　,,,}, 　　,,,系列:,( 　　,,,,{ 　　,,,,,//,类型为柱状图 　　,,,,,类型:,& # 39;酒吧# 39; 　　,,,,,//,x轴数据需要设置在系列的数据类型为遍历的价值 　　,,,,,数据:sellerValues 　　,,,,} 　　,,,) 　　,,}//才能,渲染该数据给dom对象 　　this.chartInstance.setOption才能(选项) 　　},

安装钩子函数调用

,//, dom加载完成调用 　　,mounted  (), { 　　this.initChart才能() 　　this.getData才能() 　　},

更改柱形图配置

1。在索引。html引入主题配置文件

, & lt; !——,引入主题,——比; 　　,& lt; script  src=https://www.yisu.com/zixun/薄?静态/lib/主题/chalk.js ">

2。在需要使用主题的地方使用初始化获取dom传入粉笔

,, this.chartInstance =,这。echarts.init美元(这一点。refs.sellerRef美元,& # 39;粉笔# 39;)

3。选择的配置LinearGradient (x1, x2, y1, y2)线性渐变

,,, const  option =, { 　　,,,标题:,{ 　　,,,,:,& # 39;|,商家销售统计& # 39;, 　　,,,,textStyle:, { 　　,,,,,字形大小:66 　　,,,,}, 　　,,,,左:,20日 　　,,,,:20 　　,,,}, 　　,,,//,坐标轴配置 　　网格:,,,,{ 　　,,,,:,& # 39;20% & # 39; 　　,,,,左:,& # 39;3% & # 39; 　　,,,,对的:,& # 39;6% & # 39; 　　,,,,底部:,& # 39;3% & # 39; 　　,,,,//,距离包含坐标轴文字 　　,,,,containLabel:真实 　　,,,}, 　　,,,xAxis:, { 　　,,,,类型:,& # 39;价值# 39; 　　,,,}, 　　,,,桠溪:,{ 　　,,,,类型:,& # 39;类别# 39; 　　,,,,//,y轴坐标轴使用遍历出来的名字 　　,,,,数据:sellerNames 　　,,,}, 　　,,,系列:,( 　　,,,,{ 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么在vue中实现一个柱状图效果