怎么在vue中實(shí)現(xiàn)一個(gè)柱狀圖效果-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)怎么在vue中實(shí)現(xiàn)一個(gè)柱狀圖效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的梅江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1.在html文件導(dǎo)入echart

 <!-- 引入echarts -->
 <script src="/tupian/20230522/h3pre>Vue.prototype.$echarts = window.echarts
// 使用時(shí)直接使用this.$echarts

3.頁(yè)面結(jié)構(gòu)

<template>
 <div class="com-container">
  <div class="com-chart" ref="sellerRef"></div>
 </div>
</template>

4.data中的數(shù)據(jù)

export default {
 data () {
  return {
   // 初始化的圖表
   chartInstance: null,
   allDate: null, // 服務(wù)器返回的數(shù)據(jù)
  }
 },
}
```js
##### 5.methods中的邏輯
```js
methods: {
  // 初始化echarts對(duì)象
  initEchart(){
    // 獲取dom對(duì)象
    this.chartInstance = this.$echarts.init(this.$refs.sellerRef)
  },
  // 獲取服務(wù)器的數(shù)據(jù)
  async getData(){
    const {data:res} = await this.$http.get('seller')
    this.allDate = res
    // 返會(huì)的數(shù)據(jù)結(jié)構(gòu)是 name商家 value數(shù)值
   // 對(duì)返回的數(shù)據(jù)進(jìn)行從小打到排序 sort方法
   this.allDate.sort((a, b) => {
    return a.value - b.value
   })
    // 調(diào)用更新視方法
    this.updateChart()
  },
  // 更新圖表
  updateChart(){
  // y軸類(lèi)目軸的數(shù)據(jù)
  const sellerNames = this.allDate.map(item=>{
    // 根據(jù)你的需求調(diào)整
    return item.name
  })
  // x軸數(shù)值軸的數(shù)據(jù)
  const sellerValues = this.allDate.map(item=>{
    return item.value
  })
     const option = {
    xAxis: {
     type: 'value'
    },
    yAxis: {
     type: 'category',
     // y軸坐標(biāo)軸使用遍歷出來(lái)的name
     data: sellerNames
    },
    series: [
     {
      // 類(lèi)型為柱狀圖
      type: 'bar',
      // x軸數(shù)據(jù)需要設(shè)置在series的data類(lèi)型為遍歷的value
      data: sellerValues
     }
    ]
  }
  // 渲染optio數(shù)據(jù)給dom對(duì)象
  this.chartInstance.setOption(option)
},

mounted鉤子函數(shù)調(diào)用

 // dom加載完成調(diào)用
 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: '| 商家銷(xiāo)售統(tǒng)計(jì)',
     textStyle: {
      fontSize: 66
     },
     left: 20,
     top: 20
    },
    // 坐標(biāo)軸配置
    grid: {
     top: '20%',
     left: '3%',
     right: '6%',
     bottom: '3%',
     // 距離包含坐標(biāo)軸文字
     containLabel: true
    },
    xAxis: {
     type: 'value'
    },
    yAxis: {
     type: 'category',
     // y軸坐標(biāo)軸使用遍歷出來(lái)的name
     data: sellerNames
    },
    series: [
     {
      // 類(lèi)型為柱狀圖
      type: 'bar',
      // x軸數(shù)據(jù)需要設(shè)置在series的data類(lèi)型為遍歷的value
      data: sellerValues,
      // 柱的寬度
      barWidth: 66,
      // 柱文字 默認(rèn)不展示
      label: {
       show: true,
       // 文字靠右顯示
       position: 'right',
       textStyle: {
        // 顏色為白色
        color: 'white'
       }
      },
      // 控制柱的每一項(xiàng)
      itemStyle: {
       // 控制柱的圓角半徑
       barBorderRadius: [0, 33, 33, 0],
       // 線性漸變
       // 指定不同百分比的顏色數(shù)值
       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', // 默認(rèn)為直線，可選為：'line' | 'shadow'
      z: 0, // 背景層級(jí)
      lineStyle: {
       width: 66, // 背景寬度
       color: '#2D3443' // 背景顏色
      }
     }
    }
   }
   ```

看完上述內(nèi)容，你們對(duì)怎么在vue中實(shí)現(xiàn)一個(gè)柱狀圖效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

新聞標(biāo)題：怎么在vue中實(shí)現(xiàn)一個(gè)柱狀圖效果-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article46/ddjghg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、做網(wǎng)站、小程序開(kāi)發(fā)、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容