Echarts在线免费图表

 
            // 假数据
let left1 = {
   code: 200,
   msg: "人数趋势图获取成功",
   data: {
      count: [
         153456,
         143456,
         163456,
         183456,
         163456,
         153456,
         163456,
         133456,
         163456,
         143456,
         103456,
         113456,
         153456,
         133456,
         143456
      ],
      time: [
         "09.22",
         "09.23",
         "09.24",
         "09.25",
         "09.26",
         "09.27",
         "09.28",
         "09.29",
         "09.30",
         "10.01",
         "10.02",
         "10.03",
         "10.04",
         "10.05",
         "10.06"
      ]
   }
};
//计算最大值
function maxNumCount(num) {
   let maxNum = "";
   //将数字转化为数组
   let max = num.toString().split("");
   for (var i = 0; i < max.length; i++) {
      if (i > 1) {
         maxNum += "0";
      }
   }
   //组装补0
   if (maxNum.length > 1) {
      if (max[1] == "9") {
         maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
      } else {
         maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
      }
   } else {
      maxNum = "100";
   }
   return maxNum;
}
//计算最小值
function minNumCount(num) {
   if (num < 10000) {
      return "0";
   }
   let minNum = "";
   //将数字转化为数组
   let min = num.toString().split("");
   for (var i = 0; i < min.length; i++) {
      //组装补0
      if (i > 1) {
         minNum += "0";
      }
   }
   if (min[1] == "0") {
      minNum = parseInt(min[0]) - 1 + "9" + minNum;
   } else {
      minNum = min[0] + parseInt(min[1]) + minNum;
   }

   return minNum;
}

let maxNum = Math.max(...left1.data.count);
let minNum = Math.min(...left1.data.count);
maxNum = maxNumCount(maxNum);
minNum = minNumCount(minNum);
let yName = "人数（万）";
if (maxNum > 9999999) {
   yName = "人数（千万）";
}
var option;

option = {
   grid: {
      width: "84%",
      height: "75%",
      top: "20%", //生成的图片和顶部的间距
      left: "5%",
      bottom: "0%",
      right: "16%",
      containLabel: true //为ture才会生效
   },
   tooltip: {
      trigger: "axis"
      //   axisPointer: {
      //     type: "shadow",
      //   },
   },
   xAxis: {
      // name: "日期",
      nameTextStyle: {
         color: "#03CECF",
         fontSize: 14
      },
      type: "category",
      boundaryGap: false,
      data: left1.data.time,
      axisLabel: {
         color: "#03CECF",
         fontSize: 14,
         margin: 10
         // interval: 0, //使x轴上的文字显示完全,
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: "rgb(37,52,82)"
         }
      },
      axisTick: {
         show: false
      }
   },
   yAxis: {
      type: "value",
      name: yName,
      nameTextStyle: {
         color: "#03CECF",
         fontSize: 14
      },
      min: minNum,
      max: maxNum,
      axisLine: {
         lineStyle: {
            color: "rgb(37,52,82)"
         },
         show: true
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: "rgba(37,52,82)"
         }
      },
      axisLabel: {
         color: "#03CECF",
         fontSize: 14,
         interval: 20,
         formatter: function (value, index) {
            if (yName.indexOf("千万") && maxNum > 10000000) {
               value = (value / 10000000).toFixed(2);
            } else if (maxNum > 10000 && maxNum < 10000000) {
               value = value / 10000;
            }
            return value;
         }
      }
   },
   splitLine: {
      show: false
   },
   series: [
      {
         data: left1.data.count,
         type: "line",
         showSymbol: true,
         itemStyle: {
            emphasis: {
               color: "rgb(7,162,148)",
               borderColor: "rgba(7,162,148,0.6)",
               borderWidth: 20
            },
            normal: {
               color: "rgb(62,195,221)",
               borderColor: "rgb(6,65,95)",
               lineStyle: {
                  color: "rgb(101,184,196)"
               }
            }
         },
         areaStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                     {
                        offset: 0,
                        color: "#68e3e5"
                     },
                     {
                        offset: 1,
                        color: "rgba(24, 68, 121,0)"
                     }
                  ],
                  false
               )
            }
         }
      }
   ]
};