0.1.6 • Published 3 years ago
hdsx-echart v0.1.6
hdsx-echart
安装
通过 npm
安装
npm install hdsx-echart
使用说明
main.js 中引入样式和组件
import 'hdsx-echart/lib/hdsx-echart.css'
import HdsxEchart from 'hdsx-echart'
Vue.use(HdsxEchart)
页面中使用
<hdsx-echart :data="data"
:title="title"
:config="config"></hdsx-echart>
Props
- data: Array data 是数据集,格式例如:
data = [
{ riqi: "1988-02-21", jzx: 70, kc: 19},
{ riqi: "2000-04-24", jzx: 87, kc: 64},
{ riqi: "1988-07-06", jzx: 34, kc: 30},
{ riqi: "1992-05-03", jzx: 19, kc: 16},
{ riqi: "1976-11-03", jzx: 84, kc: 88},
{ riqi: "1994-03-08", jzx: 35, kc: 26},
{ riqi: "1982-03-24", jzx: 99, kc: 20},
{ riqi: "1986-10-11", jzx: 73, kc: 49},
{ riqi: "2013-10-07", jzx: 50, kc: 88},
{ riqi: "2000-12-23", jzx: 81, kc: 79},
]
- title: String title是echarts 图表显示标题,例如:
title = "流量统计趋势图"
- config: Object config 是图表显示配置信息,例如:
config = {
type: "line",
xKey: "riqi",
yColumns: [
{
prop: 'jzx',
label: '集装箱',
unit: '%',
},
{
prop: 'kc',
label: '客车',
unit: '%',
type: 'bar',
selected: false
},
],
}
- color: Array 颜色数组,自定义显示颜色
config 参数说明
参数 | 类型 | 说明 |
---|---|---|
type | String | 图表显示类型line:折线图,bar:柱状图,stack: 堆叠图,pie: 饼图,scatter:散点图, radar: 雷达图, funnel: 雷达图, heatmap: 热力图,3dBar: 3D状态图,treemap: 矩阵树图 |
xKey | String | x轴显示数据,对应data中的key |
yColumns | Array | y轴显示项配置 |
yColumns 配置说明 | 参数 | 类型 | 说明 |默认值 | | :------------ | :------------ | :------------ |:------------: | | prop | String | 对应字段名 |-| | label | String | 显示legend名 |-| | unit | String | 字段对应的单位 |-| | type | String | 图表显示类型,同config中的type |-| | selected | Boolean | 字段选中状态 |true|