使用@jiaminghi/data-view中的飞线图的config怎么写
时间: 2023-08-29 17:07:35 浏览: 37
@jiaminghi/data-view库提供了非常丰富的可视化组件,其中包括了飞线图(Flyline Chart)。下面是一个简单的飞线图配置示例:
```js
import { FlylineChart } from '@jiaminghi/data-view'
const flylineChartConfig = {
title: {
text: '飞线图'
},
legend: {
data: ['飞线1', '飞线2'],
right: 30,
top: 20
},
series: [
{
type: 'flyline',
name: '飞线1',
data: [
['A', 'B', 30],
['A', 'C', 10],
['B', 'C', 20],
['B', 'D', 15],
// ...
]
},
{
type: 'flyline',
name: '飞线2',
data: [
['C', 'D', 25],
['E', 'F', 35],
// ...
]
}
]
}
// 渲染
const flylineChart = new FlylineChart(container)
flylineChart.setConfig(flylineChartConfig)
```
上面的示例中,title、legend、series等属性都可以根据实际需求进行自定义配置。其中,series中的type属性必须设置为'flyline',表示这是一个飞线图。
飞线图的数据格式为二维数组,每个元素表示一个节点之间的连接,格式为['起点', '终点', '权重']。例如,['A', 'B', 30]表示从A到B的一条连接,权重为30。
通过以上配置,就可以在页面上渲染一个基本的飞线图。