折线图
默认只传横坐标 categories 和数据 series
vue
<template>
<view>
<jp-chart-line chart-id="linebase" :categories="attribute.categories" :series="attribute.series"></jp-chart-line>
</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-line chart-id="linedatalarge" :categories="attribute.categories" :series="attribute.series" :x-label-count="4"></jp-chart-line>
</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-line chart-id="linedatalargescroll" :categories="attribute.categories" :series="attribute.series" :x-scroll="true"></jp-chart-line>
</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-line chart-id="linebasemul" :categories="attribute.categories" :series="attribute.series"></jp-chart-line>
</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>
设置 isArea 属性
vue
<template>
<view>
<jp-chart-line chart-id="linebasearea" :categories="attribute.categories" :series="attribute.series" :is-area="true"></jp-chart-line>
</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>
props 属性
| 属性名 | 类型 | 默认值 |
|---|---|---|
| chartId | String | PufKwrDURSHteBqpQhSnxhyXsRubaMki |
| categories | Array | [] |
| series | Array | [] |
| defaultTooltipIndex | Number | -1, 第一次渲染显示 tooltip 的 index,默认 series 数组第一个类型的最大值 |
| height | Number | 一般不用设置，除非特殊需求, 图表的宽度是父控件的宽度，高度默认 250，可以自己传高度 |
| extra | Object | 参考 uchart 文档 |
| 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 |
| isArea | Boolean | false, 是不是 area 类型 |