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]) }; }) }, ) })

结果

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