文件结构：
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图的optionlet 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+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// 引入echartsimport 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实现水平柱形图实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/believet93/article/details/100100021
