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|