npm install
npm run serve
npm run build
npm run test
npm run lint
这是一个依赖antv@g2封装的图表插件 只需要简单的配置数据就可以进行图标的展示
###use import ChartG2 from 'vuechartg2' Vue.use(ChartG2)
在组件页面绑定数据即可 v-renderTarget='test'
###数据结构
test1:{
data: [{
year: '1951 年',
sales: 38
}, {
year: '1952 年',
sales: 52
}, {
year: '1956 年',
sales: 61
}, {
year: '1957 年',
sales: 145
}, {
year: '1958 年',
sales: 48
}, {
year: '1959 年',
sales: 38
}, {
year: '1960 年',
sales: 38
}, {
year: '1962 年',
sales: 38
}],
/*配置信息*/
options:{
padding:[80,100,150,80],
scale:{
'sales':{
tickInterval: 20
}
},
type:function(res){
res.interval().position('year*sales');
},
}
},
###options
/*配置项:*/
padding: [ 10, 20, 40, 40 ],
custom:null,/* 这个属性支持完全自定义,传入的是一个function */
animate:true,
forceFit: true,
type:null,/* 图表类型:[line,point,path,area,interval,polygon,schema,edge,heatmap] ,传入一个函数*/
coord:null,/* 坐标类型 [rect,polar,theta,helix] 可以输入坐标类型字符串 ,或者传入一个function 或者传入一个对象{type:'polar',config:{}}*/
background: {
fill: '#fff', // 图表背景色
fillOpacity: 1, // 图表背景透明度
stroke: '#000', // 图表边框颜色
strokeOpacity: 1, // 图表边框透明度
opacity: 1, // 图表整体透明度
lineWidth: 0, // 图表边框粗度
radius: 0 // 图表圆角大小
},
signboard:'G2',/* 渲染dom标识 */
scale:null,/* 指定度量(或称 列定义) chart.scale*/
defs:null,/* chart.source(data, defs);这种格式的列定义 */
tooltip:null,/* tooltip定义 */
axis:null,/* axis定义 ,*/
legend:null,/* legend 配置*/
###author [email protected]