echarts上加横线标线_echarts 添加标线，设置颜色

< script src ="assets/js/jquery-1.8.3.min.js" > script > echarts怎么加警戒线

< script src ="assets/js/jquery-1.8.3.min.js" > script >< script type ="text/javascript" src ="js/echarts.common.min.js" > script >< div id ="main1" style ="width:45%;height:400px;margin-top: 40px;float: left;" > div >< div id ="main2" style ="width:53%;height:400px;margin-top: 40px;float: right;" > div >< script > // var myChart1 = echarts.init(document.getElementById( ' main1 ' )); var data1 = [ ' 10.2 ' , ' 8.6 ' , ' 9.3 ' , ' 7.5 ' ]; // 预警值 数组 var seriesData = [ 12 , 7.8 , 14.2 , 6.2 ]; // 总能耗数值数组 option1 = { title: { text: ' 分车型能耗预警 ' }, color: [ ' #e7505a ' ], tooltip: { trigger: ' axis ' , axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: ' shadow ' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { right: ' 4% ' , bottom: ' 3% ' , containLabel: true }, xAxis: [{ type: ' category ' , data: [ ' 伊兰特汽油 ' , ' 伊兰特CNG ' , ' B50汽油 ' , ' 凯美瑞混合动力 ' ], axisTick: { alignWithLabel: true } }], yAxis: [{ type: ' value ' , name: ' 百公里能耗L/100KM ' , min: 0 , max: 15 , interval: 3 , axisLabel: { formatter: ' {value} ' } }], series: [{ name: '' , type: ' bar ' , barWidth: ' 45% ' , data:seriesData, markLine: { itemStyle: { normal: { borderWidth: 1 , lineStyle: { type: ' dash ' , color: ' #333 ' , width: 2 , }, label: { formatter: '' , textStyle: { fontSize: 16 , fontWeight: " bolder " , }, } }, }, data: [ [{ coord: [ ' 伊兰特汽油 ' , 0 ] }, { coord: [ ' 伊兰特汽油 ' , 10.2 ] }], [{ coord: [ ' 伊兰特CNG ' , 0 ] }, { coord: [ ' 伊兰特CNG ' , 8.6 ] }], [{ coord: [ ' B50汽油 ' , 0 ] }, { coord: [ ' B50汽油 ' , 9.3 ] }], [{ coord: [ ' 凯美瑞混合动力 ' , 0 ] }, { coord: [ ' 凯美瑞混合动力 ' , 7.5 ] // 平行于Y轴的 虚线 }] ], }, }, { name: ' 预警值 ' , type: ' line ' , color: ' #333 ' ,

symbol：'triangle', //起点标记图形 (三角形)，详细请见 http://echarts.baidu.com/option.html#series-line.markLine.data.0.symbol itemStyle: { normal: { borderWidth: 1 , lineStyle: { type: ' dash ' , color: ' transparent ' , width: 2 , }, label: { formatter: '' , textStyle: { color: ' #333 ' , fontSize: 16 , fontWeight: " bolder " , }, } }, }, data: data1.map( function (val) { return val ; }), label: { normal: { show: true , formatter: function (params) { return params.value ; // 预警值 对应显示 data1 预警值 } } } } ], }; // 判断数值动态设置颜色 $(document).ready( function (params){ for ( var i = 0 ; i < seriesData.length ; i ++ ){ if (seriesData[i].value){ seriesData[i] = seriesData[i].value; } if (seriesData[ 0 ] > 10.2 ){ seriesData[ 0 ] = { value : seriesData[ 0 ], itemStyle:{ normal:{ color : ' #c23531 ' } } } } else if (seriesData[ 0 ] <= 10.2 ){ seriesData[ 0 ] = { value : seriesData[ 0 ], itemStyle:{ normal:{ color : ' #c5bf66 ' } } } } if (seriesData[ 1 ] > 8.6 ){ seriesData[ 1 ] = { value : seriesData[ 1 ], itemStyle:{ normal:{ color : ' #c23531 ' } } } } else if (seriesData[ 1 ] <= 8.6 ){ seriesData[ 1 ] = { value : seriesData[ 1 ], itemStyle:{ normal:{ color : ' #c5bf66 ' } } } } if (seriesData[ 2 ] > 9.3 ){ seriesData[ 2 ] = { value : seriesData[ 2 ], itemStyle:{ normal:{ color : ' #c23531 ' } } } } else if (seriesData[ 2 ] <= 9.3 ){ seriesData[ 2 ] = { value : seriesData[ 2 ], itemStyle:{ normal:{ color : ' #c5bf66 ' } } } } if (seriesData[ 3 ] > 7.5 ){ seriesData[ 3 ] = { value : seriesData[ 3 ], itemStyle:{ normal:{ color : ' #c23531 ' } } } } else if (seriesData[ 3 ] <= 7.5 ){ seriesData[ 3 ] = { value : seriesData[ 3 ], itemStyle:{ normal:{ color : ' #c5bf66 ' } } } } } // console.log(seriesData); // option1.series[0].data=seriesData myChart1.setOption(option1, true ); }) myChart1.setOption(option1); var myChart2 = echarts.init(document.getElementById( ' main2 ' )); option2 = { title: { text: ' 分车龄能耗预警 ' }, color: [ ' #F8CB00 ' ], tooltip: { trigger: ' axis ' , axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: ' shadow ' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { right: ' 4% ' , bottom: ' 3% ' , containLabel: true }, xAxis: [{ type: ' category ' , data: [ ' 1年 ' , ' 2年 ' , ' 3年 ' , ' 4年 ' , ' 5年 ' , ' 6年 ' , ' 7年 ' , ' 8年 ' ], axisTick: { alignWithLabel: true } }], yAxis: [{ type: ' value ' , name: ' 百公里能耗L/100KM ' , min: 0 , max: 15 , interval: 3 , axisLabel: { formatter: ' {value} ' } }], series: [{ name: '' , type: ' bar ' , barWidth: ' 65% ' , data: [ 8.1 , 13.3 , 1.5 , 14.6 , 10.8 , 9.0 , 9.2 , 9.3 ], markLine: { // 开始标预警线 itemStyle: { normal: { borderWidth: 1 , lineStyle: { type: ' dash ' , color: ' #333 ' , width: 2 , }, label: { formatter: ' 12.6 ' , textStyle: { fontSize: 16 , fontWeight: " bolder " , }, } }, }, data: [ [{ coord: [ ' 1年 ' , 12.6 ] }, { coord: [ ' 8年 ' , 12.6 ] }] ], }, itemStyle: { normal: { color: function (params) { // 根据预警线的值 显示对应的颜色 // build a color map as your need. var colorList = [ ' #c23531 ' , ' #c5bf66 ' ]; if (params.data > 12.6 ) { return colorList[ 0 ]; } else if (params.data < 12.6 ) { return colorList[ 1 ]; } } }, } }], }; myChart2.setOption(option2); script >