dataV在Vue中的使用 (持续更新)
在使用dataV的过程中如果遇到数据更新,状态未更新。处理方法
·
*目的
此文为了节约一点生产周期,特把一些项目中常用到的配置摘选出来。
未涉及到的请转 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 })。
更多推荐
已为社区贡献1条内容
所有评论(0)