type：bar和line的组合
option = {
{
tooltip: {
trigger: 'axis',
axisPointer: {
// type: 'shadow'
},
// label: {
// normal: {
// formatter: '{a} <br/>{b}: {c} ({d}%)',
// },
//
// },
formatter: tooltipFormatter(['22']), //封装的函数。是移入鼠标时显示的框子
position(pos: any, params: any, dom: any, rect: any, size: any) {
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
return {
top: 10,
[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]: 10,
};
},
},
grid: {
left: '3%',
right: 0,
bottom: '10%',
top: '20%',
containLabel: true,
},
color: ['#f5b644'], // 修改折线图的图例颜色要写在这里(其他写在lenged中)还要写在lengend中
legend: {
data: ['名称1', '名称2'],
textStyle: {
fontSize: 8, // 设置文字大小
color: ['#5abff', '#50aeff', '#f5b644'],
},
itemWidth: 7, // 设置标志的小图标
itemHeight: 7,
top: -5,
align: 'left', // 图例图标的方向，这里设置为左
itemGap: -12, // 每项图例的距离
right: -10, // 图例的位置
},
dataZoom: [
{
type: 'inside',
start: 80,
end: 100,
filterMode: 'empty',
},
],
calculable: true,
xAxis: [
{
type: 'category',
axisTick: { show: false },
splitNum: 3,
axisLabel: {
textStyle: {
color: '#e9ecee',
},
fontSize: 8,
margin: 2,
},
axisLine: {
show: true,
lineStyle: {
color: '#9999ae',
},
},
// nameLocation:'center',
data: this.timeAry1,
},
],
yAxis: [ //这里设置了2个Y轴（1个对象1个Y轴），分别给2个柱状图和2个折线图使用，这样的目的能够解决当数值太小和数值太大之间的差距显示效果。
{
type: 'value',
// min: 0,
// max: 300,
show: true,
splitNumber: 4, // 控制刻度标签的数量
axisTick: {
show: false, // y轴的小刻度线
},
axisLabel: {
show: false,
formatter: '{value} %', //y轴显示刻度值时显示%
textStyle: {
// color: '#e9ecee',
},
fontSize: 8,
margin: 5,
},
axisLine: {
show: false,
lineStyle: {
color: '#9999ae',
},
},
splitLine: {
show: false,
lineStyle: {
type: 'dotted',
// color: ['#aaa', 'red'], //设置网格线的颜色，可单独设置
color: '#4c4a74',
},
},
},
{
type: 'value',
show: true,
// min: 0,
max: 1,
splitNumber: 4, // 控制刻度标签的数量
axisTick: {
show: false, // y轴的小刻度线
},
axisLine: {
show: false,
lineStyle: {
color: '#9999ae',
},
},
axisLabel: {
show: false,
textStyle: {
// color: '#e9ecee',
},
fontSize: 8,
margin: 5,
},
splitLine: {
show: false,
lineStyle: {
type: 'dotted',
// color: ['#aaa', 'red'], //设置网格线的颜色，可单独设置
color: '#4c4a74',
},
},
},
],
series: [
{
name: '名称1',
type: 'bar',
barGap: 0, //柱状图之间的距离。只能在最后一个柱状图上写生效
barWidth: 10, //柱状图的宽度
itemStyle: { //柱状图样式设置。itemStyle即自身样式，我的理解
normal: {
color: new LinearGradient(
0, 0, 0, 1,
[
{ offset: 1, color: '#0252ff' },
{ offset: 0, color: '#00ccff' },
],
),
barBorderRadius: 3, //柱状图的radius
},
},
data: data,
},
{
name: '名称2',
type: 'line',
symbol: 'none',
lineStyle: {
// type: 'dotted',
color: '#a96319',
},
yAxisIndex: 1, //使用这个Y轴的索引来判断是关联哪个y轴了，x轴理同，将y换成x即可（xAxisIndex），适用于多轴
smooth: true, // 折线的顺滑度
data: data,
},
],
}
}