怎么在vue中实现一个柱状图效果-创新互联

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

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的梅江网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

1.在html文件导入echart

 <!-- 引入echarts -->
 <script src="/tupian/20230522/h3pre>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://www.cdcxhl.com/article46/ddjghg.html

成都网站建设公司_创新互联，为您提供品牌网站建设、外贸网站建设、网站维护、做网站、小程序开发、ChatGPT

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容