柱状图
默认只传横坐标 categories 和数据 series
vue
<template>
<view>
<jp-chart-column chart-id="columnbase" :categories="attribute.categories" :series="attribute.series"></jp-chart-column>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
series: [
{
name: '成交量A',
data: [35, 8, 25, 37, 4, 20]
}
]
})
</script>
x 轴数据较多，设置 x-label-count
vue
<template>
<view>
<jp-chart-column chart-id="columndatalarge" :categories="attribute.categories" :series="attribute.series" :x-label-count="4"></jp-chart-column>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029'],
series: [
{
name: '成交量A',
data: [35, 8, 25, 37, 4, 20, 10, 30, 2, 34, 23, 23]
}
]
})
</script>
x 轴数据较多，滚动
vue
<template>
<view>
<jp-chart-column
chart-id="columndatalargescroll"
:categories="attribute.categories"
:series="attribute.series"
:x-scroll="true"
></jp-chart-column>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: [
'2018',
'2019',
'2020',
'2021',
'2022',
'2023',
'2024',
'2025',
'2026',
'2027',
'2028',
'2029',
'2030',
'2031',
'2032',
'2033',
'2034',
'2035',
'2036',
'2037',
'2038',
'2039',
'2040'
],
series: [
{
name: '成交量A',
data: [35, 8, 25, 37, 4, 20, 10, 30, 2, 34, 23, 23, 8, 25, 37, 4, 20, 10, 30, 2, 34, 23, 23]
}
]
})
</script>
默认只传横坐标 categories 和多个数据 series
vue
<template>
<view>
<jp-chart-column chart-id="columnbasemul" :categories="attribute.categories" :series="attribute.series"></jp-chart-column>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
series: [
{
name: '成交量A',
data: [35, 8, 25, 37, 4, 20]
},
{
name: '成交量B',
data: [5, 18, 5, 7, 14, 20]
}
]
})
</script>
堆叠柱状图
vue
<template>
<view>
<jp-chart-column chart-id="columnstack" :categories="attribute.categories" :series="attribute.series" :extra="attribute.extra"></jp-chart-column>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
series: [
{
name: '成交量A',
data: [35, 8, 25, 37, 4, 20]
},
{
name: '成交量B',
data: [5, 18, 5, 7, 14, 20]
}
],
extra: {
column: {
type: 'stack',
activeBgColor: '#000000',
activeBgOpacity: 0.08,
categoryGap: 10
}
}
})
</script>
温度计图表
vue
<template>
<view>
<jp-chart-column chart-id="columnmeter" :categories="attribute.categories" :series="attribute.series" :extra="attribute.extra"></jp-chart-column>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
series: [
{
name: '成交量A',
data: [35, 8, 25, 37, 4, 20]
},
{
name: '成交量B',
data: [5, 18, 5, 7, 14, 20]
}
],
extra: {
column: {
type: 'meter',
activeBgColor: '#000000',
activeBgOpacity: 0.08,
categoryGap: 10
}
}
})
</script>
标记线
vue
<template>
<view>
<jp-chart-column
chart-id="columnmarkline"
:categories="attribute.categories"
:series="attribute.series"
:extra="attribute.extra"
:enable-mark-line="true"
></jp-chart-column>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
series: [
{
name: '成交量A',
data: [35, 8, 25, 37, 4, 20]
},
{
name: '成交量B',
data: [5, 18, 5, 7, 14, 20]
}
],
extra: {
column: {
type: 'group',
activeBgColor: '#000000',
activeBgOpacity: 0.08,
categoryGap: 10
},
markLine: {
data: [
{
value: 21,
showLabel: true
}
]
}
}
})
</script>
props 属性
| 属性名 | 类型 | 默认值 |
|---|---|---|
| chartId | String | cuLTdNOTBRndzcQntpvWWidzhnEkVvXb |
| categories | Array | [] |
| series | Array | [] |
| height | Number | 一般不用设置，除非特殊需求, 图表的宽度是父控件的宽度，高度默认 250，可以自己传高度 |
| extra | Object | 参考 uchart 文档 柱状图类型，可选值：'group'分组柱状图,'stack'堆叠柱状图,'meter'温度计式图 |
| color | Array | 柱状图图颜色 ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'] |
| xLabelCount | Number | null, x 默认全部展示，如果 x 轴数据很多，可以只显示几个 label |
| xScroll | Boolean | false, x 默认全部展示，如果 x 轴数据很多，滚动 |
| xItemCount | Number | null, 启用滚动一定要设置, 如果不设置，默认就是 4 |
| enableMarkLine | Boolean | false, 标记线，参考示例 |