Echarts在线免费图表

 
            var arr = [200,600,400,700,1000];
var max = Math.max.apply(Math, arr); //数据的最大值
var maxNum = 1200
var minNum = 200
var interval = ((maxNum-minNum)/5).toFixed(2);//设置y轴最大值最小值进行6份平均分割
option = {
          title: {
            left: "center",
            text: "区间",
            textStyle: {
              fontWeight: "normal",
              // color: "#ffffff", //标题颜色
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "axis",
            confine: true,
            show: true,
            transitionDuration: 0, // 让toolltip紧跟鼠标
            // axisPointer: {
            // type: 'cross'
            // }
            // formatter(params) {
            //   var relVal = params[0].name;
            //   for (var i = 0, l = params.length; i < l; i++) {
            //     //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
            //     relVal = Number(params[i].value).toFixed(2);
            //   }
            //   return relVal;
            // },
          },
          xAxis: {
            axisLabel: {
              // interval: 0, //x轴全部显示 
              textStyle: {
                //改变刻度字体样式
                // color: "#fff",
                fontSize: 12,
              },
            },
            type: "category",
            boundaryGap: false,
            data: ['01:22','01:24','01:26','01:28','01:30'],
          },
         
          yAxis: {
            type: "value",
            min: minNum, // 坐标轴刻度最小值。
            max: maxNum, // 坐标轴刻度最大值。
            splitNumber: 6, //坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
            interval: interval*1, // 强制设置坐标轴分割间隔。
            splitLine: {
              // show:false,     //y网格线
              lineStyle: {
                // color: "rgba(255,255,255,0.05)",
              },
            },
            
            axisLabel: {
              // formatter: "{value}",
              // formatter: function (value) {
              //   return 2;
              // },
              textStyle: {
                //改变刻度字体样式
                // color: "rgba(255,255,255,0.4)",
                fontSize: 12,
              },
            },
          },
          visualMap: {
            type: "piecewise",
            show: false,
            dimension: 1,
            seriesIndex: 0,
            pieces: [
              {
                gte: 620,
                lte: max,
                color: "rgba(141, 193, 73, 0.4)",
              },
              {
                gte: 400,
                lte: 620,
                color: "rgba(21, 82, 255, 0.4)",
              },
              {
                gte: 0,
                lte: 400,
                color: "rgba(141, 193, 73, 0.4)",
              },
            ],
          },
          grid: {
            left: "6%",
            top: "15%",
            width: "85%",
            height: "80%",
            containLabel: true,
          },
          series: [
            {
              data: arr,
              type: "line",
              smooth: true,
              showSymbol: true, //是否默认展示圆点
              symbol: "circle", //设定为实心点
              symbolSize: 10, //设定实心点的大小
              markLine: {
                symbol: "none", //去掉箭头
                data: [
                  {
                    type: "average",
                    yAxis: 400,
                    name: "平均值",
                    lineStyle: { color: "#FFD800", width: 2 },
                  },
                  {
                    type: "average",
                    yAxis: 620,
                    name: "平均值",
                    lineStyle: { color: "#FFD800", width: 2 },
                  },
                ],
                label: {
                  normal: {
                    formatter: "", // 这儿设置安全基线
                  },
                },
              },
              areaStyle: {},
            },
          ],
        };