echarts图表渐变⾊、及X轴滚动条样式处理
由于项⽬中运⽤echarts可能较多。因此对同⼀种类型的echarts进⾏⼀个封装，页⾯调⽤根据传⼊不同的状态⽣成不同样式，例如横向柱状图和纵向柱状图。
话不多说上代码
⽗页⾯
checkOptionData:function(){
let xDate=["测试1","测试2","测试3",'测试4','测试5','测试6','测试7'];
let y1=[100,600,200,100,100,100,100];
let y2=[200,100,300,100,100,100,100];
let series=[y1,y2];
let legendDate=["数量1",'数量2'];
this.optionData={
id:"opraStatistics", title:"测试", legendDate:legendDate, xDate:xDate,
xName:"", yName:"", series:series,
owner:{
colorList:[],
type:'',//控制横向或是纵向显⽰'transverse'为横向，默认不传为纵向
stack:'a',//控制是否叠加，默认不传是不叠加
//如果是横向柱状图可添加Y轴滑动
//  dataZoom:[{type:'slider',start:0,end:10,right:0,show:true,width:10,height:'100%',top:-2,yAxisIndex:0}]
//这⾥是纵向添加x轴滑动
dataZoom:[{type:'slider',start:0,end:60,bottom:20,show:true,width:'70%',height:10,left:'center',
backgroundColor:'rgb(60,114,209)',
height:'4',
fillerColor:'#fff',
borderColor:'rgb(60,114,209)',
textStyle:{
color:'transparent'
},
}
]
}
};
},
⼦页⾯
setOption({id, title, legendDate, xDate, xName, yName, series,owner}) {
var that=this
const pe=='transverse'
const colorList =lorList.length ? lorList:['rgb(45,185,186)', 'rgb(24,146,147)', '#009fc1'];
const optionData = {
dataZoom:owner.dataZoom?owner.dataZoom:[],//数据过⼤加⼊滑动
tooltip: {
trigger: 'axis'
},
title: {
text: title,
// left: 'left',
top:'20',
left:'20',
html横向滚动条样式textStyle: {
fontSize: 14,
'color':"rgb(56,116,220)"
}
},
color: colorList,//颜⾊
legend: {
data: legendDate,
left: '40%',
top:'15%',
top:'15%',
textStyle:{
//设置右上⾓标题⽂字⼤⼩
fontSize:12,
color:'#fff'
},
itemWidth:16,
itemHeight:12,
itemGap:6,//设置⽂字和图标间距
},
calculable: true,
textStyle: {
'fontSize': 8,
'fontFamily': 'Source Han Sans CN Bold',            'color':"#666666"
},
grid: {//设置图距离
left: 20,
right:15,
bottom:30,
top:'30%',
containLabel: true
},
xAxis: [
{
type: ownertype?'value':'category',
data:ownertype?'':xDate,
name: xName,
splitLine:{show:false }, //去除⽹格线
axisLine: { // 坐标轴线
show: true, // 是否显⽰坐标轴轴线
lineStyle: {//设置轴线
type:  'solid' ,
color:  'rgb(211,211,211)' ,
width: '1'
}
},
axisTick: { // 坐标轴线
show: false // 是否显⽰坐标轴轴线
},
axisLabel: {
interval:0,  //显⽰全
/
/设置横轴⽂字⼤⼩
fontSize:12,
'color':"#fff"
},
nameTextStyle:{
//设置横轴类型⽂字⼤⼩
fontSize:12
}
}
],
yAxis: [
{
type: ownertype?'category':'value',
data:ownertype?xDate:'',
name: yName,
splitLine:{show:true }, //去除⽹格线
axisLine: { // 坐标轴线
show: true, // 是否显⽰坐标轴轴线
lineStyle: {//设置轴线
type:  'solid' ,
type:  'solid' ,
color:  'rgb(211,211,211)' ,
width: '1'
}
},
axisTick: { // 坐标轴线
show: false // 是否显⽰坐标轴轴线
},
axisLabel: {
//设置纵轴⽂字⼤⼩
fontSize:12,
'color':"#fff",
},
nameTextStyle:{
//设置纵轴数量⽂字⼤⼩
fontSize:12,
// fontWeight:'bold'数量
}
}
]
}
optionData.series = [];
if(series){
for (let i = 0; i < series.length; i++) {
const scolor = colorList[i]
optionData.series[i] = {
name: legendDate[i],
type: 'bar',
data: series[i],
stack:owner.stack,//设置柱状图叠加
// barWidth:30,
barMaxWidth:35,//设置柱形图柱⼦宽度
smooth: true,
itemStyle: {
fontSize:12,
emphasis: {
barBorderRadius: 30,
textStyle: {
// fontWeight: 'bolder',
fontSize: '12',
fontFamily: '微软雅⿊'
}
},
normal: {
// 柱形图圆⾓，初始化效果
barBorderRadius: [2, 2, 0, 0],
/
/渐变⾊0,0,0,1表⽰从上向下渐变（右，下，左，上）
color:i==1?'rgb(253,192,42)':aphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgb(1,242,252)'},{offset:0.5,color:'rgb(55,144,241)'},{ offset:1,color:'rgb(76,105,235)'}]),
label: {
show: true, // 是否展⽰
//  color: ownertype?'#fff':scolor,
color:'#fff',
position:ownertype?'insideRight':'top',
barMaxWidth:30,
// backgroundColor:'rgb(246,189,21)',
itemStyle: {
padding:5,
},
textStyle: {
// fontWeight: 'bolder',
//设置柱状图上⽂字⼤⼩
fontSize: '11',
fontFamily: '微软雅⿊'
}
}
}
}
}
}
}
}
this.chart = echarts.ElementById(id))
this.chart.clear()
this.chart.setOption(optionData);
// dblclick双击
('click', function (params) {
//柱状图点击事件
console.log(that.chartData.id)
/
/触发⽗组件⽅法，传⼊点击参数判断掉不同接⼝
that.$emit('alert',params)
console.log(params,"单击了"+params.name+"柱状图");        });
}
看图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。