面积图
显示代码
html
<hu-area-chart
:series="series"
:x-axis="xAxis"
style="height:200px;background-color:rgba(27, 32, 54, 0.8);
"
:linear="true"
></hu-area-chart>
<script setup>
import { ref } from 'vue'
const xAxis = ref(['5.13', '5.14', '5.15', '5.16', '5.17', '5.18', '5.19'])
const series = ref([
{
name: '名称1',
data: [120, 132, 101, 134, 90, 230, 210],
},
// {
// name: '名称2',
// data: [120, 132, 101, 134, 90, 230, 210],
// },
])
</script>
Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 数据集合 | [Object, Array] | {} |
tooltip | 鼠标移动到图例的提升信息 | Object | { formatter: "{b}: {c}" } |
series | 数据集合 | Array | [] |
legendOption | 图例配置 | Object | {right: 'auto', top: 'auto',orient: 'horizontal'} |
xAxis | 横坐标数据 | Array | [] |
colors | 自定义颜色 | Array | [] |
xAxisOther | x 轴的其它配置 | Object | {} |
yAxisOther | y 轴的其它配置 | Object | {} |
linear | 是否渐变 | Boolean | false |