H5 —— SVG、Canvas、Webgl 从入门到实践开发

SVG

---

Canvas

常见的数据可视化库：

• D3.js：Web端评价最高的 JavaScript 可视化工具库（入手难）
• ECharts.js
• Highcharts.js
• AntV

ECharts

(function(){
  // 1、实例化对象
  var myChart = echarts.init(document.querySelector('.bar .chart'));
  // 2、指定配置项和数据
  var option = {
      
  }
  // 3、把配置项给实例对象
  myChart.setOption(option)
  // 适配屏幕自适应  
  window.addEventListener('resize',function (){
    myChart.resize()
  });
})();

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1920) {
  html {
    font-size: 80px !important;
  }
}

折线图数据加单位

//  显示单个数据
tooltip: {
  show:true,
  trigger:'item',
  formatter: function(params){
    var relVal = params.seriesName +'<br/>' + params.value + '%';  
    return relVal
  }
},

// 显示多个数据
tooltip: {
  trigger: 'axis',
  formatter:function(params) {  
    var relVal = params[0].name;  
    for (var i = 0, l = params.length; i < l; i++) {  
        relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value+"件";
    }
    return relVal;  
  }
},

tooltip: {
  trigger: 'axis',
  formatter: '{a}{b}{c}'
},

---

Webgl

---

以上是我对下列视频及文章的归纳和总结

[视频]ECharts数据可视化项目-大屏数据可视化展示

flexible:手淘库√

px to rem & rpx (cssrem) - Visual Studio Marketplace√

vue全家桶+Echarts+百度地图，搭建数据可视化系统√
vue全家桶+Echarts+百度地图，搭建数据可视化系统√

百度Echarts折线图tooltip里数据添加单位√

echarts 社区√

inmap 地理可视化

推荐四款可视化工具，解决99%的可视化大屏需求√：DataV、jimureport、Sugar、帆软、qucikBI、superset、redash

---

Three.js和其它webgl框架CreateJS 新司机开车指南√

CreateJS 新司机开车指南

Pixijs