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 ownertype=owner.type=='transverse'
const colorList =owner.colorList.length ? owner.colorList:['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',
textStyle: {
fontSize: 14,
'color':"rgb(56,116,220)"
}
},
color: colorList,//颜色
legend: {
data: legendDate,
left: '40%',
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' ,
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)':new echarts.graphic.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.init(document.getElementById(id))
this.chart.clear()
this.chart.setOption(optionData);
// dblclick双击
this.chart.on('click', function (params) {
//柱状图点击事件
console.log(that.chartData.id)
//触发父组件方法，传入点击参数判断掉不同接口
that.$emit('alert',params)
console.log(params,"单击了"+params.name+"柱状图");
});
}
看图
