溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

vue利用echarts如何生成一個(gè)水平柱形圖

發(fā)布時(shí)間：2020-11-04 15:52:00 來(lái)源：億速云 閱讀：332 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

vue利用echarts如何生成一個(gè)水平柱形圖？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

文件結(jié)構(gòu)：

vue利用echarts如何生成一個(gè)水平柱形圖

testData.js文件

const dtuEdition = {
 name: '有方有線',
 number: 60,
 proportion: 40,
 edition: {
 '有方有線V1.0.0': 20,
 '有方有線V1.2.0': 15,
 '有方有線V2.0.1': 10,
 '有方有線V3.0.0': 8,
 '有方有線V3.2.0': 5,
 '有方有線V3.4.0': 4,
 '有方有線V4.0.0': 3,
 '有方有線V4.0.2': 2,
 '有方有線V4.0.3': 1
 }
} 
export default {
 namespaced: true, // 用于在全局引用此文件里的方法時(shí)標(biāo)識(shí)這一個(gè)的文件名
 dtuEdition
}

dtuDistributionCurve.js文件

// DTU連接率bar圖的option
let barOption = {
 grid: {
 // width: '85%', // 設(shè)置gird寬度
 left: 40, // gird距離容器左邊距
 right: 65,
 top: 20,
 bottom: 0,
 containLabel: true
 },
 xAxis: {
 show : false, // 不顯示橫軸
 type: 'value',
 max: 1000, // 橫軸最大值
 },
 yAxis: {
 type: 'category',
 data: [],
 axisLine: {
  show: false
 },
 axisTick: {
  show: false
 },
 splitLine: {
  show: false
 }
 },
 series: [{
 type: 'bar',
 stack: 'chart',
 z: 3,
 itemStyle: {
  normal: {
  color: '#a7c7e9'
  }
 },
 data: []
 }, {
 type: 'bar',
 stack: 'chart',
 silent: true,
 label: {
  normal: {
  formatter: (params) => {
   // console.log(params)
   return barOption.xAxis.max-params.value
  },
  color: '#666666',
  position: 'right',
  distance: 10,
  show: true
  }
 },
 itemStyle: {
  normal: {
  color: '#f3f3f6'
  }
 },
 barWidth : 10,//柱圖寬度
 data: []
 }]
}
 
// 設(shè)置y軸標(biāo)簽
export function setYAxisData(edition) {
 let data = []
 for (let key in edition) {
 data.push(key)
 }
 barOption.yAxis.data = data.reverse()
 console.log(barOption.yAxis.data)
}
 
// 設(shè)置x軸最大值
export function setXAxisMax(number) {
 barOption.xAxis.max = number
}
 
// 設(shè)置series的data數(shù)據(jù)
export function setSeriesData(edition, number) {
 let data0 = []
 let data1 = []
 for(let key in edition) {
 data0.push(edition[key])
 data1.push(number - edition[key])
 }
 barOption.series[0].data = data0.reverse()
 barOption.series[1].data = data1.reverse()
}
 
export default {
 barOption,
 setYAxisData,
 setXAxisMax,
 setSeriesData
}

vue文件

<template>
 <div ref="dtuEdition" class="project-survey-dtu-edition"></div>
</template>
 
<script>
 import testData from '../constvalue/testData'
 import dtuDistributionOption from '../curveoption/dtuDistributionCurve'
 export default {
  name: 'ProjectSurvey',
  data() {
   return {
 dtuEditionChart: null
 }
  },
 
  methods: {
 // 點(diǎn)擊DTU模塊數(shù)量分布展示圖的扇區(qū)item
 distributionChartClick(param) {
 console.log(param)
 let dtuEdition = testData.dtuEdition
 this.dtuName = dtuEdition.name
 this.dtuNumber = dtuEdition.number
 this.dtuProportion = dtuEdition.proportion + '%'
 dtuDistributionOption.setYAxisData(dtuEdition.edition)
 dtuDistributionOption.setXAxisMax(dtuEdition.number)
 dtuDistributionOption.setSeriesData(dtuEdition.edition, dtuEdition.number)
 this.dtuEditionChart.setOption(dtuDistributionOption.barOption)
 this.dtuEditionChart.resize()
 },
 // 點(diǎn)擊tab的某頁(yè)
 tabClick(tab, event) {
 console.log(this.activeName)
 if(this.activeName === 'first') { // 從后端獲取連接率統(tǒng)計(jì)數(shù)據(jù)
 
 } else { // 從后端獲取模塊數(shù)量分布展示數(shù)據(jù)
  let distributionInfo = testData.dtuDistribution.distributionInfo
  this.deadline = testData.dtuDistribution.deadline
  dtuDistributionOption.setSectorValue(distributionInfo)
    dtuDistributionOption.setSectorName(testData.dtuDistribution.allDistribution)
  this.distributionChart.setOption(dtuDistributionOption.pieOption)
  this.distributionChart.resize()
  this.distributionChart.on('click', this.distributionChartClick)
 }
 }
 },
 mounted() {
 this.dtuEditionChart = this.$echarts.init(this.$refs.dtuEdition)
 this.distributionChart = this.$echarts.init(this.$refs.dtuDistribution)
 let maxV = this.getMaxV()
 let minV = this.getMinV()
 for(let item of this.connectionInfo) {
 this.charts[item.dtuName] = this.$echarts.init(document.getElementById(item.dtuName))
 let normalizationRatio = this.normalization(item.connectionRatio, maxV, minV)
 dtuConnectionOption.setSectorColor(normalizationRatio)
 dtuConnectionOption.setTitleText(item.dtuName)
 dtuConnectionOption.setSectorValue(item.connectionRatio)
 dtuConnectionOption.setSectorName(item.connectionRatio)
 // console.log(dtuConnectionOption.option)
 this.charts[item.dtuName].setOption(dtuConnectionOption.option)
 this.charts[item.dtuName].resize()
 }
 window.onresize = () => {
 this.distributionChart.resize()
 this.dtuEditionChart.resize()
  }
 },
 updated() {
 this.distributionChart.resize()
 for(let item of this.connectionInfo) {
 this.charts[item.dtuName].resize()
 }
 } 
 
 }
</script>
 
<style>
 .project-survey-dtu-edition {
 height: 580px;
 }
</style>

圖表

vue利用echarts如何生成一個(gè)水平柱形圖

補(bǔ)充知識(shí)：vue+echart實(shí)現(xiàn) X軸 雙柱狀圖 漸變色

一: 安裝

1. 首先需要安裝echarts依賴(lài)包

npm install echarts -S

2. 或者使用國(guó)內(nèi)的淘寶鏡像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

二: 創(chuàng)建圖表

全局引入

main.js

>```javascript
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :></div>

 export default {
 data(){
  return {}
 }, 
  mounted(){
  this.myChart() //函數(shù)調(diào)用
  },
  methods:{
  	myChart(){
	  let myChart= this.$echarts.init(document.getElementById('myChart'));
	  // var colors = ['rgba(15,115,255,0.6)', 'rgba(15,235,255,0.6)'];
	  var data1 = [350, 250, 170, 360, 240];
	  var data2 = [187, 146, 129, 174,245];
	  var xData = ['3.12','3.13','3.14','3.15','3.16']
	  rightBtns.setOption({
   // backgroundColor:'#fff',
   tooltip: {
    trigger: "axis",
    // formatter: '<br/>{a1}-違規(guī)率:{c1}<br/>{a0}-違規(guī)率:{c0}',
    axisPointer: {
     type: "shadow",
     textStyle: {
     color: "#fff"
     }
    },
   },
   grid: {
    top: '8%',
    right: '8%',
    bottom: '60%'
   },
   legend: {
    data: ['省內(nèi)', '省外'],
    align: 'left',
    left: '30%',
    top: '4%',
    textStyle:{
     color:'#fff'
    }
   },
   calculable: true,
   xAxis: [{
    type: "category",
    data: xData,
    axisLine: {
    lineStyle: {
     color: 'rgba(255,255,255,0.1)'
    },
    },
    axisLabel: {
    show: true,
    textStyle: {
     color: '#fff'
    }
    },
   }],
   yAxis: {
    type: 'value',
    // name:'單位:(人次 )',
    min: 0,
    max: 500,
    interval: 100,
    axisLine: {
    lineStyle: {
     color: 'rgba(255,255,255,0.1)'
    }
    },
    splitLine: {
    lineStyle: {
     type: 'dashed',
    },
    show:false
    },
    axisLabel: {
    show: true,
    textStyle: {
     color: '#fff'
    }
    },
   },
   series: [{
    name: '省內(nèi)',
    type: 'bar',
    // color: colors[0],
    data: data1,
    itemStyle:{
     normal: {
     //每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng),如果柱子數(shù)目多于colorList的長(zhǎng)度，則柱子顏色循環(huán)使用該數(shù)組
     //此處的箭頭函數(shù)是為了不改變this的指向
     color: (params) => {
      var index = params.dataIndex;
      var colorList = [
      // 漸變顏色的色值和透明度
      //雙柱狀圖漸變的 第一個(gè)柱子的漸變色['rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)'],
      ['rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)'] 
      
      ];
      if(params.dataIndex >= colorList.length){
      index=params.dataIndex-colorList.length;
      }
      //方法一:
      //不使用箭頭函數(shù)的寫(xiě)法改變漸變色
      // return {
      // colorStops: [{
      //  offset: 0, //顏色開(kāi)始的位置
      //  color: colorList[0][index] // 0% 處的顏色
      // },{
      //  offset: 0.6, //顏色結(jié)束的位置
      //  color: colorList[1][index] // 100% 處的顏色
      // }]
      // }
      //方法二:使用箭頭函數(shù)的寫(xiě)法 改變雙柱狀圖的漸變顏色
      return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
      {offset: 0.2, color: colorList[1][index]},
      {offset: 1, color: colorList[0][index]}
      ])
     }
     }
    }
   },
   {
    name: '省外',
    type: 'bar',
    // color: colors[1],
    data: data2,
    itemStyle:{
     normal: {
     //每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng),如果柱子數(shù)目多于colorList的長(zhǎng)度，則柱子顏色循環(huán)使用該數(shù)組
     color: (params) => {
      var index = params.dataIndex;
      var colorList = [
      // 漸變顏色的色值和透明度
      //雙柱狀圖漸變的 漸變第二個(gè)柱子的漸變色['rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)'],
      ['rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)'] 
      ];
      //方法一:
      //不使用箭頭函數(shù)的寫(xiě)法改變漸變色
      // return {
      // colorStops: [{
      //  offset: 0,
      //  color: colorList[0][index] // 0% 處的顏色
      // },{
      //  offset:0.6,
      //  color: colorList[1][index] // 100% 處的顏色
      // }]
      // }
      //方法二:使用箭頭函數(shù)的寫(xiě)法 改變雙柱狀圖的漸變顏色
      return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
      {offset: 0.2, color: colorList[1][index]},
      {offset: 1, color: colorList[0][index]}
      ])
     }
     }
    }
   }]
   })
  }
  }
	}

最終結(jié)果

vue利用echarts如何生成一個(gè)水平柱形圖

看完上述內(nèi)容，你們掌握vue利用echarts如何生成一個(gè)水平柱形圖的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手