1.0.9 • Published 3 years ago
line-and-bar-common-chart v1.0.9
折线柱状图公共组件
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
使用
1) main.js中引入
import LineAndBarCommonChart from 'line-and-bar-common-chart'
import 'line-and-bar-common-chart/lib/LineAndBarCommonChart.css'
Vue.use(LineAndBarCommonChart)
2)组件中应用
<LineAndBarCommonChart
:optionsConfig="optionsConfig"
:isHasRightContent="true"
>
<template v-slot:rightContent>
右上角自定义内容
</template>
</LineAndBarCommonChart>
图表的配置信息(标*为必传项,其它项根据业务需求选择,不传时使用默认值)
optionsConfig: {
titleText 图表标题(String)
color 线条颜色设置,默认常用的几种(Array) ['#0780ED', '#FFB449', '#AC94FF'...]
legendIcon 图例图标类型 (String) (circle,rect.....)
isLinkHasShadow 折线图线条阴影(Boolean) (true/false,默认false)
*series: [ 数据信息(Array)
name 名称(String)
*type 图表类型(String) (line, bar)
barWidth type为bar时,设置柱宽(String/Number)
shadowColor type为line时,设置阴影线条颜色(Array) ['rgba(65,165,255, 0)', 'rgba(65,165,255, 0.4)']
*data: [ 数值列表(Array)
{ value: 1048, name: '搜索引擎' }
{ value: 735, name: '直接访问' }
{ value: 580, name: '邮件营销' }
{ value: 484, name: '联盟广告' }
{ value: 300, name: '视频广告' }
]
]
}