本文主要是介绍echarts使用心得, 双X轴, 警戒线，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
echarts相关使用经验
前段做微信公众号有一个关于图表的需求, 整理下用到的相关代码,为自己做个总结, 希望也能帮到其他的朋友, ,直接上代码吧;
var myChart = echarts.init(document.getElementById('main'),null,{renderer: 'svg'});var lnList = ['一年级','二年级','三年级','四年级','五年级','六年级'];//类目轴X轴数据 var scoreList= [88,90,77,80,82,60,70];//为类目轴所对应y轴数值 var optionList= []; //第二轴数据与上类似var option = {xAxis: [{type: 'category',data: lnList,axisLabel: {interval: 0,formatter: function (value) {return value.split("").join("\n");//此处为类目轴X轴文字反转竖排,由于lz是做的手机端h5}},axisTick:{ "show":false //x轴刻度线,true为显示, fase为不显示},},{type:'value',//第二个X轴为数值轴不需要提供数据, 根据数值自适应scale:true,}],yAxis:[ {type: 'value',name:'M值',max:3.5,nameLocation:'end',interval:0.5,/* axisLabel: {show: true,textStyle: {color: 'black'},formatter: function (value) { //;利用回调 y轴上数值显示对应的文字var texts = []if (value === 1.5 || value === '1.5') {texts.push('无')} else if (value === 2.5 || value === '2.5') {texts.push('轻')} else if (value === 3.5 || value === '3.5') {texts.push('中')} else if (value === 4.5 || value === '4.5') {texts.push('重')} else if (value === 5.5) {texts.push('严重')}return texts}}*/}],series: [{name:'分类',data: scoreList,type: 'bar',barWidth : 10,markLine : {symbol:'none',label:{position:'end', //将警示值放在哪个位置，三个值“start”,“middle”,“end” 开始 中点 结束formatter: function (data) { //警戒线回调, 对应X轴数值console.log(data);if (data.value === 1.5){return "警戒";}else{return '';}},color:'red',fontSize:10},data : [{ name:"目标值",yAxis: 1.5,//res.targetTwo,lineStyle:{color:"#F70000",},},]},itemStyle:{normal:{color:function(params){ //根据值的不同柱状图可以显示不同的颜色,lz需求只显示一种颜色,忘了删掉这段了, 正好安利一下if(params.value <1.50){return "#999";}else if(params.value >=1.50 && params.value<=2.50 ){return "#999";}else if(params.value >=2.50 && params.value<=3.50 ){return "#999";}else if(params.value >=3.50 && params.value<=4.50 ){return "#999";}else if(params.value >=4.50 ){return "#999";}}}},},{name:'题号', //此为第二轴数据type: 'scatter',data:optionList,symbolSize:4,itemStyle:{color:'#999',},}],};myChart.setOption(option);
以上为全部代码；
1， 警戒线相关设置, markLine内代码为警戒线相关设置
2，此处代码在series的里面， 作为根据值的回调柱状图显示不同颜色， 其他图形可以举一反三做相关处理
相关重点部分都做有特殊标记; 包含警戒线，X轴双轴，数值回调处理多方面需要，做了一部分修改，可适用大多场景;
这篇关于echarts使用心得, 双X轴, 警戒线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
