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轴双轴，数值回调处理多方面需要，做了一部分修改，可适用大多场景;