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

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

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中实现一个柱状图效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。