vue2-移动端

文档与演示

canvas

import jCanvas from '../components/canvas'

props

参数	类型	默认值	描述
height	Number	300	高度
width	Number	300	宽度
canvaId	String	canvaId	id
start	Number	-1/2	起始角度
config	Object		配置参数

config

参数	类型	默认值	描述
bgcolor	Color	#eee	背景颜色
lineWidth	Number	24	环形宽度
data	[Number]	[]	每段环形的数值-最终转换为比例
colorList	[Color]	['#406bff', '#0cc', '#9a90ff']	每段环形的颜色
lineCap	butt/round/square	butt	交界处处理

demo

    <circle-canvas
        :width="200"
        :height="200"
        :config="{
          data: [100, 150, 200],
          lineWidth: 36,
          colorList: ['#406bff', '#0cc', '#9a90ff'],
          name: [1, 2, 3],
        }"
      ></circle-canvas>

data() {
    return {
      barList: [
        {
          value: 100,
          title: "100",
          footer: "1",
        },
        {
          value: 200,
          title: "200",
          footer: "2",
        },
        {
          value: 150,
          title: "150",
          footer: "3",
        },
      ],
    };
  }