服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue使用echarts实现水平柱形图实例

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

2021-09-24 15:28走_开 JavaScript

这篇文章主要介绍了vue使用echarts实现水平柱形图实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

文件结构：

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

testdata.js文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// 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文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<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

?
1
2
3
4
>```javascript
// 引入echarts
import echarts from 'echarts'
vue.prototype.$echarts = echarts

hello.vue

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
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实现水平柱形图实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/believet93/article/details/100100021

  • vue
  • echarts
  • 柱形图

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    格斗 　 原型 　 原型链 　 仿淘宝商城 　 jqeuryUI 　 网页对话框 　 样式规则 　 blockui 　 页面滚动 　 弹出窗 　 弹出提示 　 hidden 　 Hapi.js 　 无间断 　 对象构建 　 dialogArguments 　 随机显示 　 node应用 　 箭头函数 　 高级类型 　 Vuejs 　 JavaScript技术 　 并发语言 　 JavaScript优化 　 QRCanvas 　 JS库 　 Svelte 　 事件处理函数 　 名称冲突 　 当时时间 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图