自己在项目中写的一些柱状折线混合图 外带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))

},