vue使用echarts实现水平柱形图实例
文件结构：
testData.js文件
constdtuEdition={
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
}
}
exportdefault{
namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名
dtuEdition
}
dtuDistributionCurve.js文件
//DTU连接率bar图的option
letbarOption={
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)
returnbarOption.xAxis.max-params.value
},
color:'#666666',
position:'right',
distance:10,
show:true
}
},
itemStyle:{
normal:{
color:'#f3f3f6'
}
},
barWidth:10,//柱图宽度
data:[]
}]
}
//设置y轴标签
exportfunctionsetYAxisData(edition){
letdata=[]
for(letkeyinedition){
data.push(key)
}
barOption.yAxis.data=data.reverse()
console.log(barOption.yAxis.data)
}
//设置x轴最大值
exportfunctionsetXAxisMax(number){
barOption.xAxis.max=number
}
//设置series的data数据
exportfunctionsetSeriesData(edition,number){
letdata0=[]
letdata1=[]
for(letkeyinedition){
data0.push(edition[key])
data1.push(number-edition[key])
}
barOption.series[0].data=data0.reverse()
barOption.series[1].data=data1.reverse()
}
exportdefault{
barOption,
setYAxisData,
setXAxisMax,
setSeriesData
}
vue文件
图表
补充知识：vue+echart实现X轴双柱状图渐变色
一:安装
1.首先需要安装echarts依赖包
npminstallecharts-S
2.或者使用国内的淘宝镜像：
npminstall-gcnpm--registry=https://registry.npm.taobao.org
二:创建图表
全局引入
main.js
>```javascript //引入echarts importechartsfrom'echarts' Vue.prototype.$echarts=echarts
Hello.vue
exportdefault{
data(){
return{}
},
mounted(){
this.myChart()//函数调用
},
methods:{
myChart(){
letmyChart=this.$echarts.init(document.getElementById('myChart'));
//varcolors=['rgba(15,115,255,0.6)','rgba(15,235,255,0.6)'];
vardata1=[350,250,170,360,240];
vardata2=[187,146,129,174,245];
varxData=['3.12','3.13','3.14','3.15','3.16']
rightBtns.setOption({
//backgroundColor:'#fff',
tooltip:{
trigger:"axis",
//formatter:'{b}
{a1}-违规率:{c1}
{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)=>{
varindex=params.dataIndex;
varcolorList=[
//渐变颜色的色值和透明度
//双柱状图渐变的第一个柱子的渐变色['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%处的颜色
//}]
//}
//方法二:使用箭头函数的写法改变双柱状图的渐变颜色
returnnewthis.$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)=>{
varindex=params.dataIndex;
varcolorList=[
//渐变颜色的色值和透明度
//双柱状图渐变的渐变第二个柱子的渐变色['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%处的颜色
//}]
//}
//方法二:使用箭头函数的写法改变双柱状图的渐变颜色
returnnewthis.$echarts.graphic.LinearGradient(0,0,0,1,[
{offset:0.2,color:colorList[1][index]},
{offset:1,color:colorList[0][index]}
])
}
}
}
}]
})
}
}
}
最终结果
以上这篇vue使用echarts实现水平柱形图实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。