echarts彩虹图在js中的应用

最新推荐文章于 2021-05-26 17:31:25 发布

z302833160

最新推荐文章于 2021-05-26 17:31:25 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/z302833160/article/details/77450435

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:550px;width: 100%;"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/echarts.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript">
    //初始化
    	toJson();
     // 路径配置
     // 基于准备好的dom，初始化echarts实例

     function  toJson(){
     $.getJSON("json/chtdata.json",function(data){     //接收json格式的文件
     	var count=data.dataset.values.length;   
     	
     	var timeData=[];
     	var pointdata=[];
     	for (var i=0;i<count;i++) {
     		timeData.push(data.dataset.values[i].time);
     		pointdata.push(data.dataset.values[i].val);
     	}
     
     
      var chart = echarts.init(document.getElementById('main'));
                
     

  option = {

    title: {
        text: '彩虹图',
    },
    tooltip: {
        trigger: 'axis'
    },

    toolbox: {
        show: true,
        feature: {
            dataZoom: {				       //区域缩放
                yAxisIndex: 'none'
            },
            dataView: {readOnly: true},		       //数据视图
            //magicType: {type: ['line', 'bar']},
            restore : {show: true},    		       //还原							
            saveAsImage : {show: true}                 //保存图片

        }
    },
    xAxis:  {
          type: 'category',
          boundaryGap: false,
          axisLine: {
              onZero: true
          },
          axisLabel: {
              interval: 5,
              rotate: 55
           },
          data: timeData.map(function (str) {    //时间换行
                return str.replace(' ', '\n')
            })
      },
  
    yAxis: {

          type: 'value',
          max: data.dataset.precontroloption.redzone[0].max,
          name: '单位:',
          min: data.dataset.precontroloption.redzone[1].min,
          interval: 0.04,


      },
    series: [{
          name: '数值',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 4,
          showSymbol: true,
          lineStyle: {
              normal: {
                  width: 2,
                  color: 'black'
                  
              }
          },

          markArea: {
              silent: true,
              label: {    //标准标签的位置
                  normal: {
                      position: ['10%', '50%']
                  }
              },
              data: [
                  [{
//                    name: '危险',
                      yAxis:  data.dataset.precontroloption.redzone[0].min,
                      itemStyle: {
                          normal: {
                              color: 'red'
                          }
                      },
                  }, {
                      yAxis:  data.dataset.precontroloption.redzone[0].max
                  }],
                  [{
//                    name: '警告',
                      yAxis: data.dataset.precontroloption.yellowzone[0].min,
                      itemStyle: {
                          normal: {
                              color: 'yellow'
                          }
                      },
                  }, {
                      yAxis: data.dataset.precontroloption.yellowzone[0].max
                  }],
                  [{
//                    name: '合格',
                      yAxis: data.dataset.precontroloption.greenzone[0].min,
                      itemStyle: {
                          normal: {
                              color: 'green'
                          }
                      }
                  }, {
                      yAxis: data.dataset.precontroloption.greenzone[0].max
                  }],
                  [{
//                    name: '警告',
                      yAxis: data.dataset.precontroloption.yellowzone[1].min,
                      itemStyle: {
                          normal: {
                              color: 'yellow'
                          }
                      },
                  }, {
                      yAxis: data.dataset.precontroloption.yellowzone[1].max
                  }],
                  [{
//                    name: '危险',
                      yAxis: data.dataset.precontroloption.redzone[1].min,
                      itemStyle: {
                          normal: {
                              color: 'red'
                          }
                      },
                  }, {
                      yAxis: data.dataset.precontroloption.redzone[1].max
                  }],
              ]
          },
          data: pointdata
          

      }]

  };
  		chart.setOption(option); 
  		 //window.onresize = chart.resize;
  });
  }
     
     setInterval(function () {     //6秒钟刷新一次
        toJson()
    }, 1000 * 6);
    </script>
	</body>
</html>