大致成品如图所示
关键的步骤：
var dom = document.getElementById("myChart"); var myChart = echarts.init(dom); var app = {}; var option = null; option = { backgroundColor:'rgba(128, 128, 128, 1)', title: { text: '线路故障发生概率预测', left: '50%', top: '5%', botom:"5%" }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'line' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { // orient: 'vertical', show: false, left: 'rigth', data: [{ name: 'line1', icon: 'bar' }, { name: 'line2', icon: 'bar' }, { name: 'line3', icon: 'bar' }, { name: 'line4', icon: 'bar' }, { name: 'line5', icon: 'bar' }, { name: 'line6', icon: 'bar' }], selected: { 'line1': true, 'line2': true, 'line3': true, 'line4': true, 'line5': true, 'line6': true, //不想显示的都设置成false } }, grid: { top: '14%', left: '3%', right: '1%', bottom: '3%', containLabel: true, // color: '#032c78' }, color: ['rgba(52,252,53,1)', '#FFF82F', '#F99A2D', '#FB343B', '#C936D7', '#6B3370'], xAxis: { // nameLocation: 'center', type: 'category', boundaryGap: false, data: this.mouthDate, // show: true, // axisTick: { // show: true // }, // nameTextStyle: { // fontSize: 20 // }, position: 'bottom', axisLabel: { //坐标轴刻度的属性 fontSize: 32, color: 'rgba(17,108,255,1)', // textalign: 'center', rotate: 90, // interval:0 }, }, yAxis: [{ // nameLocation:'center', nameGap: 35, name: '', boundaryGap: true, min: 0, max: 280, // splitNumber: 10, interval: 35, type: 'value', // yAxisIndex: 0, axisLabel: { formatter: '{value}', }, nameTextStyle: { //坐标轴名称的样式 color: "rgba(255,255,255,1)", fontSize: 24, textShadowColor: 'rgba(0,128,255,1)', fontFamily: "SourceHanSansCN", textShadowOffsetX: 0, textShadowOffsetY: 0, textShadowBlur: 15, padding: [0, 0, 0, 0] }, splitLine: { show: false }, axisTick: { //是否显示坐标轴刻度 show: false }, axisLabel: { //坐标轴刻度的属性 fontSize: 32, color: 'rgba(17,108,255,1)', textalign: 'center' }, yAxisIndex: 1 } ], series: [ //就是从这个地方开始的 主要用的是markArea 和legend { name: 'line1', type: 'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { 1 } }, markArea: { data: [ [{ yAxis: '0', itemStyle: { color: 'rgba(52,252,53,1)' } }, { yAxis: '35' }] ] }, }, { name: 'line2', type: 'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { 1 } }, markArea: { data: [ [{ yAxis: '35', itemStyle: { color: '#FFF82F' } }, { yAxis: '70' }] ] } }, { name: 'line3', type: 'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { 1 } }, markArea: { data: [ [{ yAxis: '70', itemStyle: { color: '#F99A2D' } }, { yAxis: '115' }] ] } }, { name: 'line4', type: 'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { 1 } }, markArea: { data: [ [{ yAxis: '115', itemStyle: { color: '#FB343B' } }, { yAxis: '150' }] ] } }, { name: 'line5', type: 'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { 1 } }, markArea: { data: [ [{ yAxis: '150', itemStyle: { color: '#C936D7' } }, { yAxis: '250' }] ] } }, { name: 'line6', type: 'line', animation: false, areaStyle: { normal: {} }, lineStyle: { normal: { 1 } }, markArea: { data: [ [{ yAxis: '250', itemStyle: { color: '#6B3370' } }, { yAxis: '280' }] ] } }, { name: '', type: 'line', smooth: "true", symbol: 'circle', //设置拐点 symbolSize: 16, //设置拐点的大小 itemStyle: { //拐点的属性 color: '#005664', // }, lineStyle: { color: "#007B8F", 5, }, data: this.mouthPm25List }, ], } myChart.setOption(option)