dataV在Vue中的使用 (持续更新)

*目的

此文为了节约一点生产周期，特把一些项目中常用到的配置摘选出来。
未涉及到的请转 dataV详细文档

1、安装

1.1 通过npm安装

npm install @jiaminghi/data-view

1.2 通过yarn安装

yarn add @jiaminghi/data-view

2.全局注册

//全部引入
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
//按需引入
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

3.使用

3.1 使用方式

3.1.1 标签

<template>
	<dv-charts :option="options"/>
</template>

3.1.2 通过new

const chartView= new Chart({
  container:containerId,
   autoFit: true,
   height:50,
   padding:[5,10,5,10]
 });
 chartView.tooltip({
     position: 'bottom',
     showCrosshairs:true,
     crosshairs: {
         type: 'x',
     },
 })
 chartView.axis('date', false); //是否显示坐标轴
 chartView.axis('value',false);
 chartView.interaction('active-region');
 chartView.line().position('date*value').color("#b8f084").tooltip('date*value', (x,a) => {
     return {
         name:"数据",
         value:a
     };
 });
 this.chartView= chartView
 //填充数据
 this.chartView.changeData(dataSource)

3.2 options

const options = {
  title: {
    text: '饼图'
  },
   xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      type: 'line', //pie-饼图 bar-柱状 radar-雷达 gauge-仪表盘
      data: [9,4,3,15,25],
      insideLabel: {
        show: true
      }
    }
  ]
}

在使用dataV的过程中如果遇到数据更新，状态未更新。请使用下方dataV官方给出的处理方法。

组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { …this.someProps }）。