使用 charts.js、flot-charts、Echarts图表插件。

charts.js

基于 HTML5 的 JavaScript 图表库。
该组件特点就是简单，轻巧。
缺点：想要在图表上实现标识线比较麻烦。
目前支持 ，Line，Bar，Radar，Polar Area，Pie&Doughnut。
初始化：

<canvas id="barChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>

//定义数据
var radarChartData = {
	labels: ['设备状况', '电网质量', '工单完成', '工单响应','系统负载'],
	datasets : [
		{
          label:'',   
          backgroundColor:'rgba(205, 92, 92,0.1)', 
          borderColor:'red',
          borderWidth:'1px',
          // pointBorderColor:'#fff',
          data: [50, 60, 50, 45,20]  
	   },
	   {...},{...}
	]
}
//获取上下文，canvas的id
var radarChartCanvas = $('#barChart').get(0).getContext('2d');
//自定义配置
var radarChartOptions = {
	responsive : true,//自适应
	maintainAspectRatio : false, //响应时是否保持起始纵横比，如果设置为false，将占用整个容器
	scale: {                    
          ticks :{
          //定义坐标轴数据
             min: 0,
            max: 50
          },                   
        },
        legend: {
          display: false//是否开启图例
        },
}

结果：

charts.js文档

flot-charts

基于jquery的，使用Canvas画HTML图表的js库
这个库我用得不多，简单初始化案例：

<div id="pieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></div>

 var data = [
 	  { label: '一般',data : 20,color: '#c23531' },
      { label: '预警',data : 20,color: '#2e4454' },
      { label: '告警',data : 20,color: '#61a0a8' },
      { label: '事故',data : 20,color: '#d48265' },
      { label: '其他',data : 20,color: '#91c7ae' }
 ]
$.plot('#pieChart',data,{
	series: {
		pie: {
			show:true,
			offset:{top:0,left:0},
			stroke:{width:0},
			highlight:{opacity:0.5}
		}
	},
	grid:{
	  hoverable: true,
      clickable: true
	}
})

结果

可以参考这篇文章

Echarts

画图表有它就行了，没什么是满足不了的。
今天记录用它画中国地图，各个省份的航线图。
上代码：

<div class="box-map" style="width:100%;height:100%;">
	<div id="china-map" style="max-width:800px;min-height:600px;"></div>
</div>

//获取上下文
 var oneChart = echarts.init(document.getElementById('china-map'));
 //定义各个省的坐标--网上有，找我也行
 var geoCoordMap = {'新疆': [86.61 , 40.79],'西藏':[89.13 , 30.66],.....}
 //定义航线，案例有两条航线（北京到上海，北京到其他）
 var BJData = [[{name:'北京'}, {name:'新疆',value:100}],[{name:'北京'}, {name:'西藏',value:100}],.....];
 var SHData = [[{name:'北京'}, {name:'上海',value:100}],];
 //这是自定义的航线动态图标，可选，网上下载
 var planePath = '';
 //处理数据
 var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++)
      {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord)
        {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord],
            value: dataItem[1].value
          });
        }
      }
      return res;
    };
 //航线的颜色
 var color = ['#01e2f7','red'];
 //遍历生成航线，图标
 var series = [];
[ ['北京',BJData],['北京',SHData] ].forEach(function(item,i){
 	series.push(
 		//动态图标
 		{
 			name:item[0],
 			type:'lines',
 			zlevel:1,
 			effect:{
 				show:true,
 				period: 6, //间隔
 				perilLength:0.5,//长度
 				color:color[i],//颜色
 				symbolSize:3 //大小
 			},
 			lineStyle: {       
	          normal: {
	             color: color[i],
	             width: 0,//宽度
	             curveness: 0.2 //曲线弧度
	           }
        	},
        	data: convertData(item[1])
 		},
 		//航线
 		{
	        name: item[0],
	        type: 'lines',
	        zlevel: 2,
	        symbol: ['none', 'arrow'],//箭头样式
	        symbolSize: 10,
	        effect: {
	            //动态飞机箭头
	          show: false,
	          period: 6,
	          trailLength: 0,
	          symbol: planePath,
	          symbolSize: 15
	        },
	        lineStyle: {
	            normal: {
	              color: color[i],
	              width: 1,
	              opacity: 0.6,
	              curveness: 0.2
	            }
	        },
	        data: convertData(item[1])
      	},
      	//地点波浪坐标 散点图
	    {
	        name: item[0],
	        type: 'effectScatter',
	        coordinateSystem: 'geo',
	        zlevel: 2,
	        rippleEffect: {
	            brushType: 'stroke'
	        },
	        label: {
	          normal: {
	            show: true,
	            formatter: '{b}'
	          }
	        },
	        symbolSize: function (val) {
	            return val[2] / 9;
	        },
	        itemStyle: {
	          normal: {
	            color: color[i],
	          },
	          emphasis:
	          {
	            areaColor: 'red'
	          }
	        },
	        data: item[1].map(function (dataItem) {
	          return {
	            name: dataItem[1].name,
	            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
	          };
	        })
	      },
	 )
})

结果

我是一个爱跪键盘的前端小萌新~~