Power Chart
A chart component for deconstruction complexity.
Features
- Chart: 图表
- Table: 表格
- Axis: 轴
- Tooltips: 工具提示
- Label: 标签
- Legend: 图例
- DataPreview: 查看数据
- Reference: 参考线
Chart Type
- Line: 折线图
- Bar: 柱状图
- Stacked-Bar: 堆积柱状图
- Area: 面积图
- Stacked-Area: 堆积面积图
- Pie: 饼图 & 玫瑰图
- Ring: 环形图
- Scatter: 散点图
- Bubble: 气泡图
- Table: 交叉表
Getting Start
<BIChart
v-bind="BIChartProps"
v-if="chartsDatas"
ref="bi_chart"
style="height: 100%; width: 100%;"
/>Data Structure
Overview
完整的解析数据
{
"data":{
"chartData":[
{
"xName":"部门名称",
"yName":"部门名称",
"rowIndex":0,
"colIndex":0,
"data":[
{
"values":[
{
"x":"区域销售部",
"y":"区域销售部",
"layers":[
],
"record":[
{
"key":"timestamp",
"value":"1901-01-01T00:00:00.000Z"
},
{
"key":"部门名称",
"value":"区域销售部"
}],
"style":{
"tip":"<p>部门名称: 区域销售部</p><p>部门名称: 区域销售部</p><p>部门名称: 区域销售部</p>"
}
},
null,
null,
null,
null,
null,
{
"x":"委外部",
"y":"委外部",
"layers":[
],
"record":[
{
"key":"timestamp",
"value":"1901-01-01T00:00:00.000Z"
},
{
"key":"部门名称",
"value":"委外部"
}],
"style":{
"tip":"<p>部门名称: 委外部</p><p>部门名称: 委外部</p><p>部门名称: 委外部</p>"
}
},
null,
null,
null,
null,
null,
{
"x":"市场部",
"y":"市场部",
"layers":[
],
"record":[
{
"key":"timestamp",
"value":"1901-01-01T00:00:00.000Z"
},
{
"key":"部门名称",
"value":"市场部"
}],
"style":{
"tip":"<p>部门名称: 市场部</p><p>部门名称: 市场部</p><p>部门名称: 市场部</p>"
}
},
null,
null,
null,
null,
null,
{
"x":"电子商务",
"y":"电子商务",
"layers":[
],
"record":[
{
"key":"timestamp",
"value":"1901-01-01T00:00:00.000Z"
},
{
"key":"部门名称",
"value":"电子商务"
}],
"style":{
"tip":"<p>部门名称: 电子商务</p><p>部门名称: 电子商务</p><p>部门名称: 电子商务</p>"
}
},
null,
null,
null,
null,
null,
{
"x":"销售部",
"y":"销售部",
"layers":[
],
"record":[
{
"key":"timestamp",
"value":"1901-01-01T00:00:00.000Z"
},
{
"key":"部门名称",
"value":"销售部"
}],
"style":{
"tip":"<p>部门名称: 销售部</p><p>部门名称: 销售部</p><p>部门名称: 销售部</p>"
}
}],
"style":{
}
}]
}],
"xAxis":[
{
"type":"category",
"data":[
{
"name":[
"区域销售部",
"委外部",
"市场部",
"电子商务",
"销售部"],
"size":1,
"yellow":{
},
"axisSize":5,
"x":0,
"style":{
"height":"18px",
"max-height":"none",
"width":"300px",
"left":"0px"
},
"distance":300
}],
"axis_name":"部门名称"
}],
"yAxis":[
{
"type":"category",
"data":[
{
"name":[
"区域销售部",
"委外部",
"市场部",
"电子商务",
"销售部"],
"size":1,
"yellow":{
},
"axisSize":5,
"x":0,
"style":{
"width":"51px",
"max-width":"none",
"height":"450px",
"top":"0px"
},
"distance":450
}],
"axis_name":"部门名称"
}]
}
}基础数据结构
- chartData: 图表数据
- xAxis: x轴数据
- yAxis: y轴数据
xAxis/yAxis 轴数据结构说明
- type: 轴类型 category / value
- axis_name: 轴标题
- data: 轴数据
- name: 数值轴具体数据列表,
- size: 当前轴所跨越的上级轴数量,
- yellow: 标黄排序信息
- axisSize: 轴所跨越的数量，用于计算轴懒加载
- x: 当前轴在所有轴中的位置，用于计算轴懒加载
- style: 轴展示样式
- "width":"51px",
- "max-width":"none",
- "height":"450px",
- "top":"0px"
- distance: 当前轴到x:0 的距离，用于计算轴懒加载
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
Compiles and minifies for production
yarn build
Run your unit tests
yarn test:unit
Run your end-to-end tests
yarn test:e2e
Lints and fixes files
yarn lint