ECharts的使用--前端可视化技术设计

---

前言

echarts(Enterprise Charts,商业级数据图表)是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safa…

一、ECharts是什么？

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

二、使用步骤

1.读入数据

// 数据集：
var date=['-','1899/12/30 10:19:00','1899/12/30 10:20:00','1899/12/30 10:01:00','1899/12/30 10:01:00','1899/12/30 9:49:00','1899/12/30 9:45:00','1899/12/30 9:31:00','1899/12/30 9:22:00','1899/12/30 9:15:00','1899/12/30 8:16:00','1899/12/30 10:19:00','1899/12/30 10:11:00','1899/12/30 10:19:00','1899/12/30 10:17:00','1899/12/30 10:26:00','1899/12/30 10:25:00','1899/12/30 10:00:00','1899/12/30 10:00:00','1899/12/30 10:31:00','1899/12/30 10:24:00','1899/12/30 9:48:00','1899/12/30 10:33:00','1899/12/30 10:29:00','1899/12/30 10:31:00','1899/12/30 10:31:00','1899/12/30 10:30:00','1899/12/30 10:24:00','1899/12/30 10:24:00','1899/12/30 10:24:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:34:00','1899/12/30 10:33:00','1899/12/30 10:32:00','1899/12/30 10:25:00','1899/12/30 10:25:00','1899/12/30 10:31:00','1899/12/30 10:31:00','1899/12/30 10:30:00','1899/12/30 10:09:00','1899/12/30 10:06:00','1899/12/30 9:34:00','1899/12/30 9:31:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:31:00','1899/12/30 10:31:00','1899/12/30 10:31:00','1899/12/30 8:16:00','1899/12/30 10:29:00','1899/12/30 10:00:00','1899/12/30 10:26:00','1899/12/30 10:25:00','1899/12/30 10:27:00','1899/12/30 10:24:00','1899/12/30 10:24:00','1899/12/30 10:31:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:31:00','1899/12/30 10:31:00','1899/12/30 8:16:00','1899/12/30 10:29:00','1899/12/30 10:00:00','1899/12/30 10:26:00','1899/12/30 10:25:00','1899/12/30 10:27:00','1899/12/30 10:24:00','1899/12/30 10:24:00','1899/12/30 10:25:00','1899/12/30 10:31:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:30:00','1899/12/30 10:31:00','1899/12/30 8:16:00','1899/12/30 10:31:00','1899/12/30 10:25:00','1899/12/30 10:29:00','1899/12/30 10:00:00','1899/12/30 10:26:00','1899/12/30 10:25:00','1899/12/30 10:27:00','1899/12/30 10:24:00','1899/12/30 10:24:00','1899/12/30 10:23:00','1899/12/30 9:49:00','1899/12/30 10:22:00','1899/12/30 9:58:00','1899/12/30 10:25:00','1899/12/30 10:21:00','1899/12/30 10:24:00','1899/12/30 10:24:00','1899/12/30 10:22:00','1899/12/30 10:19:00','1899/12/30 10:21:00','1899/12/30 10:21:00','1899/12/30 10:20:00','1899/12/30 10:17:00','1899/12/30 10:14:00','1899/12/30 10:29:00','1899/12/30 10:00:00','1899/12/30 10:24:00','1899/12/30 10:25:00','1899/12/30 10:27:00','1899/12/30 10:22:00','1899/12/30 10:24:00','1899/12/30 10:23:00','1899/12/30 9:49:00','1899/12/30 10:21:00','1899/12/30 10:22:00','1899/12/30 10:25:00','1899/12/30 10:21:00','1899/12/30 10:24:00','1899/12/30 10:21:00','1899/12/30 10:27:00','1899/12/30 10:22:00','1899/12/30 10:23:00','1899/12/30 9:49:00','1899/12/30 10:21:00','1899/12/30 10:22:00','1899/12/30 9:58:00','1899/12/30 10:21:00','1899/12/30 10:24:00','1899/12/30 10:21:00','1899/12/30 10:19:00','1899/12/30 10:13:00','1899/12/30 10:16:00','1899/12/30 10:20:00','1899/12/30 10:17:00','1899/12/30 10:22:00','1899/12/30 10:23:00','1899/12/30 10:22:00','1899/12/30 9:49:00','1899/12/30 10:21:00','1899/12/30 10:21:00','1899/12/30 10:24:00','1899/12/30 10:19:00','1899/12/30 10:13:00','1899/12/30 10:16:00','1899/12/30 10:20:00','1899/12/30 10:17:00','1899/12/30 10:14:00','1899/12/30 10:16:00','1899/12/30 10:16:00','1899/12/30 10:21:00','1899/12/30 10:19:00','1899/12/30 10:21:00','1899/12/30 10:13:00','1899/12/30 10:16:00','1899/12/30 10:20:00','1899/12/30 10:14:00','1899/12/30 10:16:00','1899/12/30 10:16:00','1899/12/30 10:18:00','1899/12/30 10:09:00','1899/12/30 10:14:00','1899/12/30 10:09:00','1899/12/30 10:14:00','1899/12/30 10:13:00','1899/12/30 10:16:00','1899/12/30 10:18:00','1899/12/30 10:09:00','1899/12/30 10:14:00','1899/12/30 10:14:00','1899/12/30 10:13:00','1899/12/30 10:10:00','1899/12/30 10:11:00','1899/12/30 10:10:00','1899/12/30 10:09:00','1899/12/30 10:05:00','1899/12/30 10:07:00','1899/12/30 10:06:00','1899/12/30 10:01:00','1899/12/30 10:03:00','1899/12/30 10:11:00','1899/12/30 10:10:00','1899/12/30 10:07:00','1899/12/30 11:39:00','1899/12/30 11:39:00','1899/12/30 10:09:00','1899/12/30 10:05:00','1899/12/30 10:06:00','1899/12/30 10:01:00','1899/12/30 10:03:00','1899/12/30 10:03:00','1899/12/30 9:59:00','1899/12/30 10:02:00','1899/12/30 11:48:00','1899/12/30 10:00:00','1899/12/30 10:03:00','1899/12/30 10:03:00','1899/12/30 9:59:00','1899/12/30 10:02:00','1899/12/30 10:00:00','1899/12/30 9:59:00','1899/12/30 9:51:00','1899/12/30 9:51:00','1899/12/30 9:47:00','1899/12/30 9:51:00','1899/12/30 9:52:00','1899/12/30 10:02:00','1899/12/30 9:50:00','1899/12/30 9:34:00','1899/12/30 9:44:00','1899/12/30 9:35:00','1899/12/30 9:41:00','1899/12/30 9:39:00','1899/12/30 9:24:00','1899/12/30 9:36:00','1899/12/30 9:29:00','1899/12/30 9:31:00','1899/12/30 9:28:00','1899/12/30 9:26:00','1899/12/30 9:29:00','1899/12/30 9:26:00','1899/12/30 9:15:00','1899/12/30 9:24:00','1899/12/30 11:10:00','1899/12/30 9:17:00','1899/12/30 11:43:00','1899/12/30 10:09:00','1899/12/30 9:29:00','1899/12/30 9:26:00','1899/12/30 9:15:00','1899/12/30 9:24:00','1899/12/30 11:10:00','1899/12/30 9:17:00','1899/12/30 9:12:00','1899/12/30 9:14:00','1899/12/30 11:11:00','1899/12/30 9:09:00','1899/12/30 9:01:00','1899/12/30 11:39:00','1899/12/30 11:39:00','1899/12/30 9:01:00','1899/12/30 8:59:00','1899/12/30 8:43:00','1899/12/30 10:30:00','1899/12/30 10:31:00','1899/12/30 8:47:00','1899/12/30 10:19:00','1899/12/30 10:24:00','1899/12/30 10:38:00','1899/12/30 10:22:00','1899/12/30 10:21:00','1899/12/30 10:37:00','1899/12/30 10:21:00','1899/12/30 10:24:00','1899/12/30 8:41:00','1899/12/30 12:06:00','1899/12/30 12:05:00','1899/12/30 12:03:00','1899/12/30 12:02:00','1899/12/30 12:08:00','1899/12/30 11:58:00','1899/12/30 11:59:00','1899/12/30 11:59:00','1899/12/30 12:12:00','1899/12/30 11:57:00','1899/12/30 11:56:00','1899/12/30 12:03:00','1899/12/30 12:05:00','1899/12/30 12:02:00','1899/12/30 11:55:00','1899/12/30 12:06:00','1899/12/30 11:58:00','1899/12/30 12:02:00','1899/12/30 11:56:00','1899/12/30 12:03:00','1899/12/30 12:03:00','1899/12/30 12:05:00','1899/12/30 11:56:00','1899/12/30 12:08:00','1899/12/30 11:59:00','1899/12/30 11:51:00','1899/12/30 11:49:00','1899/12/30 11:50:00','1899/12/30 11:57:00','1899/12/30 11:57:00','1899/12/30 12:07:00','1899/12/30 11:51:00','1899/12/30 12:06:00','1899/12/30 11:58:00','1899/12/30 11:55:00','1899/12/30 12:03:00','1899/12/30 12:03:00','1899/12/30 12:17:00','1899/12/30 7:10:00','1899/12/30 12:01:00','1899/12/30 12:00:00','1899/12/30 12:05:00','1899/12/30 11:48:00','1899/12/30 11:48:00','1899/12/30 11:50:00','1899/12/30 11:54:00','1899/12/30 7:10:00','1899/12/30 12:01:00','1899/12/30 11:43:00','1899/12/30 12:05:00','1899/12/30 11:48:00','1899/12/30 11:49:00','1899/12/30 11:46:00','1899/12/30 11:42:00','1899/12/30 11:42:00','1899/12/30 11:46:00','1899/12/30 11:45:00','1899/12/30 11:59:00','1899/12/30 9:33:00','1899/12/30 11:54:00','1899/12/30 12:17:00','1899/12/30 11:56:00','1899/12/30 11:41:00','1899/12/30 11:56:00','1899/12/30 11:48:00','1899/12/30 11:42:00','1899/12/30 11:47:00','1899/12/30 10:19:00','1899/12/30 11:54:00','1899/12/30 11:38:00','1899/12/30 11:42:00','1899/12/30 11:42:00','1899/12/30 12:05:00','1899/12/30 11:57:00','1899/12/30 11:57:00','1899/12/30 11:50:00','1899/12/30 11:37:00','1899/12/30 11:56:00','1899/12/30 11:39:00','1899/12/30 11:43:00','1899/12/30 11:47:00','1899/12/30 11:54:00','1899/12/30 11:49:00','1899/12/30 11:42:00','1899/12/30 11:39:00','1899/12/30 11:46:00','1899/12/30 10:30:00','1899/12/30 11:47:00','1899/12/30 10:31:00','1899/12/30 11:46:00','1899/12/30 11:49:00','1899/12/30 11:35:00','1899/12/30 11:47:00','1899/12/30 11:47:00','1899/12/30 11:29:00','1899/12/30 11:41:00','1899/12/30 10:24:00','1899/12/30 10:22:00','1899/12/30 11:48:00','1899/12/30 11:48:00','1899/12/30 11:28:00','1899/12/30 10:21:00','1899/12/30 11:33:00','1899/12/30 11:40:00','1899/12/30 11:50:00','1899/12/30 11:29:00','1899/12/30 11:41:00','1899/12/30 11:34:00','1899/12/30 11:43:00','1899/12/30 11:48:00','1899/12/30 11:28:00','1899/12/30 12:17:00','1899/12/30 11:40:00','1899/12/30 11:38:00','1899/12/30 10:21:00','1899/12/30 10:24:00','1899/12/30 11:42:00','1899/12/30 11:47:00','1899/12/30 11:37:00','1899/12/30 11:45:00','1899/12/30 11:33:00','1899/12/30 13:14:00','1899/12/30 11:30:00','1899/12/30 11:28:00','1899/12/30 11:32:00','1899/12/30 11:34:00','1899/12/30 11:32:00','1899/12/30 11:34:00','1899/12/30 11:32:00','1899/12/30 11:41:00','1899/12/30 11:33:00','1899/12/30 11:37:00','1899/12/30 11:41:00','1899/12/30 11:40:00','1899/12/30 11:28:00','1899/12/30 11:37:00','1899/12/30 11:32:00','1899/12/30 11:41:00','1899/12/30 11:32:00','1899/12/30 11:40:00','1899/12/30 11:31:00','1899/12/30 11:27:00','1899/12/30 11:30:00','1899/12/30 11:28:00','1899/12/30 11:18:00','1899/12/30 11:11:00','1899/12/30 11:25:00','1899/12/30 11:29:00','1899/12/30 11:27:00','1899/12/30 11:28:00','1899/12/30 11:25:00','1899/12/30 11:27:00','1899/12/30 11:27:00','1899/12/30 11:20:00','1899/12/30 11:24:00','1899/12/30 11:25:00','1899/12/30 11:31:00','1899/12/30 11:31:00','1899/12/30 13:29:00','1899/12/30 11:18:00','1899/12/30 11:08:00','1899/12/30 13:30:00','1899/12/30 11:20:00','1899/12/30 11:16:00','1899/12/30 11:49:00','1899/12/30 11:50:00','1899/12/30 11:40:00','1899/12/30 11:43:00','1899/12/30 11:50:00','1899/12/30 11:48:00','1899/12/30 11:47:00','1899/12/30 11:40:00','1899/12/30 11:42:00','1899/12/30 12:18:00','1899/12/30 12:02:00','1899/12/30 11:57:00','1899/12/30 11:57:00','1899/12/30 11:46:00','1899/12/30 11:46:00','1899/12/30 11:40:00','1899/12/30 11:29:00','1899/12/30 11:33:00','1899/12/30 11:32:00','1899/12/30 11:34:00','1899/12/30 11:34:00','1899/12/30 11:29:00','1899/12/30 11:25:00','1899/12/30 11:32:00','1899/12/30 11:20:00','1899/12/30 11:33:00','1899/12/30 11:32:00','1899/12/30 11:31:00','1899/12/30 11:31:00','1899/12/30 11:28:00'];
var data_1=[10,25,25,25,15,30,15,20,10,15,25,20,8,20,15,25,40,20,30,15,16,10,13,15,12,22,12,20,7,20,15,12,14,12,13,40,20,12,10,15,15,15,18,10,18,15,10,15,12,10,22,12,25,15,6,25,14,15,20,16,22,10,15,12,10,12,25,15,6,25,14,15,20,16,40,22,10,15,12,10,25,12,14,15,6,25,12,15,20,16,20,20,25,25,20,14,7,20,15,20,15,20,12,15,5,15,6,20,12,15,25,20,20,20,20,15,20,14,7,15,15,25,20,20,20,15,25,14,7,15,20,14,15,12,15,25,20,15,20,15,14,7,20,14,15,12,15,5,11,18,15,20,14,14,15,12,5,11,18,12,13,8,10,15,18,18,12,13,8,15,18,12,20,15,10,14,10,15,10,20,20,15,10,18,25,10,14,15,10,20,15,15,12,18,18,20,15,15,12,18,15,13,20,20,20,10,12,30,20,15,20,20,15,20,15,20,25,20,12,20,15,18,15,20,15,30,10,20,15,18,15,20,15,11,20,150,15,15,25,18,15,15,9,12,12,30,20,20,10,15,15,25,14,7,24,15,18,15,15,15,10,18,18,25,7,8,10,12,15,10,15,15,15,8,15,10,12,12,15,18,15,8,10,8,8,15,15,15,8,25,20,18,8,15,8,18,20,25,15,10,11,15,8,10,12,15,8,15,12,25,15,15,18,6,11,8,8,15,12,25,20,7,20,10,15,12,25,12,7,8,15,20,22,2,10,7,10,8,12,15,15,12,8,12,15,20,10,8,20,15,20,20,15,25,15,15,15,5,10,15,15,12,15,10,25,15,8,10,15,14,7,25,25,10,9,15,20,10,15,8,15,10,15,15,12,5,10,15,15,8,20,10,20,15,15,20,20,10,15,20,15,25,15,10,8,25,10,18,14,10,8,20,8,15,8,12,14,15,8,20,10,6,10,15,25,7,10,25,10,15,8,7,15,15,15,2,15,8,15,15,15,25,10,15,5,15,20,8,15];
var data_2=[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468];

2.进行设计

从excel中导入数据

代码如下（示例）：

option = {
  title:{
  text:'薪资表',
  subtext:'单位：元',
  x:'center'},
  grid:{
    top:100,//将图表与图例隔开的距离大小
      bottom:100//显示线之间的间隔
     
  },//定义标题的格式类型
   
  tooltip:{
    trigger:"axis",
    axisPointer:{
      type:"shadow"
    }
  },//点击显示数据值大小
  
  toolbox:{
    feature:{
      restore:{},//还原的表示
      dataView:{},//数据文本的标识，可以查看数据
      dataZoom:{},//鼠标拖动，进行放缩大小
      saveAsImage:{},//保存
      magicType:{
        type:['line','bar']
      }//可以显示两种可视化图形
    }
  },
   
  dataZoom:{
      type:'slider',
      bottom:35,
      start:20,
      end:60
      
  },//横坐标数据进行放缩
  
  xAxis:{
    type:'category',
    boundaryGap:false,
    data:date,
    splitArea:{//切割区域
      show:true
    }
  },
   yAxis:{
     type:'value'
   },
  legend:{
  x:'center',
  top:'8%'
     
  },
   series:[//加载一维数据表
     {
       name:'数据一',
       data:data_1,
       type:"line",
       lineStyle:{
         width:2
       }
     },
      {
      name:'数据二',
      data:data_2,
      type:"line",
      lineStyle:{
        width:2
      }
    },
     
   ]
};

---

总结

可视化的介绍就到这里了，欢迎大家点赞哦！！！