vue使用echarts实现水平柱形图实例
程序员文章站
2022-05-09 09:45:10
文件结构：testdata.js文件const dtuedition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线v1....
文件结构：
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+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实现水平柱形图实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。