vue绘制环形图

我们有时候会有这样的需求绘制一个环形图百度的Echart太重，又不想在vue的package.json中引入依赖

经过对vue-schart的研究将其精简为一个组件放入项目中引用，分享一下经验希望对大家有帮助

我们新建一个vue组件

在template中

<canvas :id="canvasId" :width="width" :height="height"></canvas>

data，此处我将圆环ring 柱状图bar 折线图line 饼状图pie 的所有数据都填入了，下面只展示绘制圆环的代码

return {  canvas: '',  ctx: '',  totalValue: ''}

prop验证

props: {  canvasId: {    type: String,    default: ''  },  width: {    type: [String, Number],    default: ''  },  height: {    type: [String, Number],    default: ''  },  type: {    type: String,    default: 'ring' // 圆环ring 柱状图bar 折线图 line 饼状pie  },  data: { // 存放图表数据    type: Array,    default: []  },  options: {    type: Object,    required: false  }

在mounted函数中调用绘制函数

mounted () { 
  this.sChart(this.canvasId, this.type, this.data, this.options)
}

在methods中绘制

sChart (canvas, type, data, options) {  this.canvas = document.getElementById(canvas)  this.ctx = this.canvas.getContext('2d')  this.type = type  this.data = data // 存放图表数据  this.dataLength = this.data.length // 图表数据的长度  this.totalValue = this.getTotalValue() // 获取饼图数据总和  this.init(options)},init: function (options) {  if (this.dataLength === 0) {    return false  }  if (options) {    for (var key in options) {      if (key === 'colorList' && Array.isArray(options[key])) {        this[key] = options[key].concat(this[key])      } else {        this[key] = options[key]      }    }  }  this.drawPieUpdate()},

此处我去掉了原有的折线

      /**       * 绘制完整的饼状图或环形图       */      drawPieUpdate: function () {        this.ctx.fillStyle = this.bgColor        this.ctx.fillRect(0, 0, this.width, this.height)        this.drawPieChart()      },

核心代码

drawPieChart: function () {        let x = this.width / 2        let y = this.height / 2        for (var i = 0; i < this.dataLength; i++) {          this.ctx.beginPath()          this.ctx.fillStyle = this.colorList[i]          this.ctx.moveTo(x, y)          this.data[i].start = i === 0 ? -Math.PI / 2 : this.data[i - 1].end          this.data[i].end = this.data[i].start + this.data[i].value / this.totalValue * 2 * Math.PI          // 绘制扇形          this.ctx.arc(x, y, this.radius, this.data[i].start, this.data[i].end)          this.ctx.closePath()          this.ctx.fill()          this.data[i].middle = (this.data[i].start + this.data[i].end) / 2          this.ctx.strokeStyle = this.colorList[i]        }        // 如果类型是环形图，绘制一个内圆        if (this.type === 'ring') {          this.ctx.beginPath()          this.ctx.fillStyle = this.bgColor          this.ctx.arc(x, y, this.innerRadius, 0, Math.PI * 2)          this.ctx.fill()        }      },

/** * 获取饼状或环形图的数据总和 * @return {Number} total */getTotalValue () {  var total = 0  for (var i = 0; i < this.dataLength; i++) {    total += this.data[i].value  }  return total}

至此绘制一个环形图核心代码完成

调用方法

import引入

import schart from './drawRing.vue'

调用

<schart :canvasId="canvasData.canvasId"        :type="canvasData.type"        :width="canvasData.width"        :height="canvasData.height"        :data="canvasData.data"        :options="canvasData.options"></schart>

初始数据

canvasData: {  canvasId: 'myCanvas',  type: 'ring',  width: 84,  height: 84,  data: [    { name: 'availableLimit', value: 2000 },    { name: 'creditLimit', value: 2000 }  ],  options: {    bgColor: '#e3e3e3',             // 默认背景颜色 #e3e3e3    titlePosition: 'top',           // 图表标题位置: top / bottom    colorList: ['#666666', '#ad2500'],    // 环形图颜色列表    radius: 42,                    // 环形图外圆半径    innerRadius: 26                // 环形图内圆半径  }

如果你想绘制折线图饼图柱状图可参考http://open.omwteam.com/sChart/