混合图
折线+柱状
vue
<template>
<view>
<jp-chart-mixin
chart-id="linecolumnbase"
:categories="attribute.categories"
:series="attribute.series"
x-title="年份"
:y-data="attribute.yData"
></jp-chart-mixin>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
series: [
{
name: '折线',
type: 'line',
color: '#2fc25b',
data: [120, 140, 105, 170, 95, 160]
},
{
name: '柱图',
index: 1,
type: 'column',
data: [50, 20, 75, 60, 34, 38]
}
],
yData: [
{
position: 'left',
title: '销量'
},
{
position: 'right',
title: '完成'
}
]
})
</script>
设置默认 toolTip
vue
<template>
<view>
<jp-chart-mixin
chart-id="linecolumnbasetooltip"
:categories="attribute.categories"
:series="attribute.series"
x-title="年份"
:y-data="attribute.yData"
:default-tooltip-index="1"
></jp-chart-mixin>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
series: [
{
name: '折线',
type: 'line',
color: '#2fc25b',
data: [120, 140, 105, 170, 95, 160]
},
{
name: '柱图',
index: 1,
type: 'column',
data: [50, 20, 75, 60, 34, 38]
}
],
yData: [
{
position: 'left',
title: '销量'
},
{
position: 'right',
title: '完成'
}
]
})
</script>
设置多个指标
vue
<template>
<view>
<jp-chart-mixin
chart-id="linecolumnbasemul"
:categories="attribute.categories"
:series="attribute.series"
x-title="年份"
:y-data="attribute.yData"
></jp-chart-mixin>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
series: [
{
name: '折线',
type: 'line',
color: '#2fc25b',
data: [120, 140, 105, 170, 95, 160]
},
{
name: '折线2',
type: 'line',
color: '#F05ABE',
data: [140, 10, 85, 110, 195, 110]
},
{
name: '柱图',
index: 1,
type: 'column',
data: [50, 20, 75, 60, 34, 38]
}
],
yData: [
{
position: 'left',
title: '销量'
},
{
position: 'left',
title: '销量2'
},
{
position: 'right',
title: '完成'
}
]
})
</script>
props 属性
| 属性名 | 类型 | 默认值 |
|---|---|---|
| chartId | String | aTysPmyBxUhBlBGGYqOYOmJqjrdEjcbv |
| categories | Array | [] |
| series | Array | [] |
| yData | Array | [] |
| defaultTooltipIndex | Number | -1, 第一次渲染显示 tooltip 的 index |
| height | Number | 一般不用设置，除非特殊需求, 图表的宽度是父控件的宽度，高度默认 250，可以自己传高度 |
| extra | Object | 参考 uchart 文档 |
| color | Array | 折线图颜色 ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'] |
| xTitle | String | x 轴标题 |