自己在项目中写的一些柱状折线混合图 外带dataZoom的一些属性
// 折线与柱状混淆图
getoption (echartsList) {
// 指定图表的配置项和数据
return {
legend: { // 图标标记 右上角
x: 'center',
top: 30,
right: 0,
data: ['逾期额', '逾期率']
},
tooltip: { // 点击数据的坐标轴指示器
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
axis: 'auto',
lineStyle: {
color: '#929bb6',
width: 2,
type: 'solid'
}
// snap: true
}
},
grid: {// 图位置调整
top: '15%',
left: '0%',
right: '0%',
bottom: '10%',
containLabel: true
},
xAxis: [ // X轴 数据配置
{
type: 'category',
// data: ['2019/05', '2019/05', '2019/05', '2019/05', '2019/05', '2019/05', '2019/05', '2019/05', '2019/05', '2019/05', '2019/05', '2019/05'],
data: echartsList[0],
axisLine: {
lineStyle: {
color: '#000', // 横坐标轴和字体颜色
width: 1 // 这里是为了突出显示加上的
}
},
// x轴刻度标签旋转的角度
axisLabel: {
rotate: -50
},
axisTick: { // X轴刻度
show: false,
interval: 0
}
}
],
// 设置两个y轴，左边显示数量，右边显示概率
yAxis: [
{
type: 'value',
show: true,
min: 100,
max: 1100,
interval: 200,
axisLine: {
lineStyle: {
color: '#000',
width: 0
}
},
axisTick: { // 坐标轴上的小刻度标线
show: false,
interval: 0
}
},
{
type: 'value',
min: 0,
max: 50,
interval: 10,
axisLabel: {
formatter: '{value} %'
},
axisTick: { // 坐标轴上的小刻度标线
show: false,
interval: 0
},
axisLine: {
lineStyle: {
color: '#000', // 纵坐标轴和字体颜色
width: 0
}
}
}
],
dataZoom: [ // 数据拖拽
{
type: 'slider',
show: true,
realtime: true,
start: 0,
end: 45,
height: '4', // 修改拖拽条的高度
showDetail: false, // 详细信息显示关闭
showDataShadow: false, // 不显示阴影
backgroundColor: '#fff', // 滑动条的背景色
filterMode: 'empty', // 过滤模式
handleSize: 0, // 两侧滑块框宽度
fillerColor: '#6190FF'// 滑块颜色
},
{
type: 'inside',
realtime: true,
start: 0,
zoomLock: true, // 锁定选择区域无法缩放,
end: 45
}
],
series: [
{
name: '逾期额',
type: 'bar',
// color: '#f17e0e',
itemStyle: { // 渐变色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#62BBF7'
}, {
offset: 1,
color: '#6290E7'
}])
}
},
// data: [900, 1000, 500, 500, 600, 700, 900, 1000, 500, 500, 600, 700],
data: echartsList[1],
barWidth: '22',
showBackground: false,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
},
{
name: '逾期率',
type: 'line',
color: '#F83563',
yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
// data: [45, 46, 30, 45, 46, 30, 45, 46, 30, 45, 46, 30],
data: echartsList[2],
symbolSize: 5,
smooth: true
}
]
}
},
draw () { // 绘制折线柱状混合图
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('echarts'))
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(this.getoption(this.echartsList))
},