推荐一个很不错的移动端可视化解决方案（图表）AntV

image.png

使用方便，样式动画漂亮且功能强大，做到了按需引入。
以下是antV的F2在各个运行环境下可使用的功能对比

image.png

js框架使用vue的话就直接npm install @antv/f2 --save
然后写个vue组件，直接开始

template标签中放入一个canvas
<canvas id="dangerPatrol"></canvas>
开始写script
const F2 = require('@antv/f2/lib/index-all'); // 我这样可以避免拿不到一些方法
// 官方是这样const F2 = require('@antv/f2');

// method中写两个方法
initChart() {
  this.chart = new F2.Chart({
    id: 'dangerPatrol',
    pixelRatio: window.devicePixelRatio, // 屏幕画布的像素比
    padding: [20, 'auto']
  })
},
drawChart() {
  // list数据为[{ time: '01', 隐患: '15' }]
  this.chart.clear()
  this.chart.source(this.list, {
    time: {
      tickCount: 12,
      range: [0, 1]
    },
    隐患: {
      tickCount: 6,
      min: 0
    }
  })
  this.chart.axis('time', {
    label: function label(text, index, total) {
      var textCfg = {};
      if (index === 0) {
        textCfg.textAlign = 'left';
      } else if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
  })
  this.chart.point().position('time*隐患').style({
    lineWidth: 1,
    stroke: '#00A0E9'
  })
  this.chart.tooltip({
    showCrosshairs: true
  })
  this.chart.area().position('time*隐患').color('l(90) 0:#00A0E9 1:#f7f7f7')
  this.chart.line().position('time*隐患').color('l(90) 0:#00A0E9 1:#f7f7f7')
  this.chart.render()
},
// 在组件mounted的时候调用这两个方法
mounted(){
  this.initChart()
  this.drawChart()
}
// 由于需要通过多个条件改变图表数据，所以通过watch监听了数据，发送请求拿到数据并处理完逻辑后再去调用drawChart方法进行图表重绘

还可以用到的方法

this.chart.source(newData); // 加载新数据
this.chart.clear(); // 清理所有图表内容
this.chart
  .interval()
  .position('x*y')
  .color('z');  // 重新定义图形语法
  
this.chart.render(); // 图表渲染

image.png