- 0 配置（简化繁琐的 options 配置）
- 可以针对项目提取共用的 default options
- 将 options 和 data 分离
npm i @pdeng/x-charts
new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data?: {rows:? Array, columns?: Array, legendData?: Array})
-
new Xcharts(el: HTMLDivElement, type?: String).setData()el, type 为必填字段，setData 不传默认使用预置 mock 数据 -
new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data)data 中 rows 表示图表的纬度 options 选传字段，默认使用预置的 default options。可以根据自己项目情况抽离出一份自己的 default options
注意 : 目前支持的 type 类型有 line | bar | pie | radar | scatter | map，项目续更新中
// 使用预置 options
<template>
<div>
<div id="chart0" style="width:100%;heigth:300px" />
</div>
</template>
<script>
import { Xcharts } from '@/utils/xcharts'
export default {
mounted() {
new Xcharts('chart0', 'line').setData()
}
}
</script>
// 自定义 options
<template>
<div>
<div id="chart0" style="width:100%;heigth:300px" />
</div>
</template>
<script>
import { Xcharts } from '@/utils/xcharts'
export default {
data() {
return {
legendData: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
columns: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 548, name: '搜索引擎' }
]
}
},
mounted() {
this.chart0 = new Xcharts('chart0', 'pie', {
series: [
{
radius: [0, '70%'],
roseType: 'radius'
}
]
}).setData({
legendData: this.legendData,
columns: this.columns
})
}
}