欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue使用echarts实现水平柱形图实例

程序员文章站 2022-05-09 09:45:10
文件结构:testdata.js文件const dtuedition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线v1....

文件结构:

vue使用echarts实现水平柱形图实例

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, // 用于在全局引用此文件里的方法时标识这一个的文件名
 dtuedition
}

dtudistributioncurve.js文件

// dtu连接率bar图的option
let baroption = {
 grid: {
 // width: '85%', // 设置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: []
 }]
}
 
// 设置y轴标签
export function setyaxisdata(edition) {
 let data = []
 for (let key in edition) {
 data.push(key)
 }
 baroption.yaxis.data = data.reverse()
 console.log(baroption.yaxis.data)
}
 
// 设置x轴最大值
export function setxaxismax(number) {
 baroption.xaxis.max = number
}
 
// 设置series的data数据
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: {
 // 点击dtu模块数量分布展示图的扇区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()
 },
 // 点击tab的某页
 tabclick(tab, event) {
 console.log(this.activename)
 if(this.activename === 'first') { // 从后端获取连接率统计数据
 
 } else { // 从后端获取模块数量分布展示数据
  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实现水平柱形图实例

补充知识:vue+echart实现 x轴 双柱状图 渐变色

一: 安装

1. 首先需要安装echarts依赖包

npm install echarts -s

2. 或者使用国内的淘宝镜像:

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

二: 创建图表

全局引入

main.js

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

hello.vue

<div id="mychart" :style="{width: '300px', height: '300px'}"></div>

 export default {
 data(){
  return {}
 }, 
  mounted(){
  this.mychart() //函数调用
  },
  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: '{b}<br/>{a1}-违规率:{c1}<br/>{a0}-违规率:{c0}',
    axispointer: {
     type: "shadow",
     textstyle: {
     color: "#fff"
     }
    },
   },
   grid: {
    top: '8%',
    right: '8%',
    bottom: '60%'
   },
   legend: {
    data: ['省内', '省外'],
    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: '省内',
    type: 'bar',
    // color: colors[0],
    data: data1,
    itemstyle:{
     normal: {
     //每个柱子的颜色即为colorlist数组里的每一项,如果柱子数目多于colorlist的长度,则柱子颜色循环使用该数组
     //此处的箭头函数是为了不改变this的指向
     color: (params) => {
      var index = params.dataindex;
      var colorlist = [
      // 渐变颜色的色值和透明度
      //双柱状图渐变的 第一个柱子的渐变色['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;
      }
      //方法一:
      //不使用箭头函数的写法改变渐变色
      // return {
      // colorstops: [{
      //  offset: 0, //颜色开始的位置
      //  color: colorlist[0][index] // 0% 处的颜色
      // },{
      //  offset: 0.6, //颜色结束的位置
      //  color: colorlist[1][index] // 100% 处的颜色
      // }]
      // }
      //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色
      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: {
     //每个柱子的颜色即为colorlist数组里的每一项,如果柱子数目多于colorlist的长度,则柱子颜色循环使用该数组
     color: (params) => {
      var index = params.dataindex;
      var colorlist = [
      // 渐变颜色的色值和透明度
      //双柱状图渐变的 渐变第二个柱子的渐变色['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)'] 
      ];
      //方法一:
      //不使用箭头函数的写法改变渐变色
      // return {
      // colorstops: [{
      //  offset: 0,
      //  color: colorlist[0][index] // 0% 处的颜色
      // },{
      //  offset:0.6,
      //  color: colorlist[1][index] // 100% 处的颜色
      // }]
      // }
      //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色
      return new this.$echarts.graphic.lineargradient(0,0,0,1,[
      {offset: 0.2, color: colorlist[1][index]},
      {offset: 1, color: colorlist[0][index]}
      ])
     }
     }
    }
   }]
   })
  }
  }
	}

最终结果

vue使用echarts实现水平柱形图实例

以上这篇vue使用echarts实现水平柱形图实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。