alament-charts

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

#用法

npm install alamein-echarts -S
import alameinEcharts from 'alamein-echarts';
improt 'alamein-echarts/lib/alamein-echarts.css'

#基本图 base-chart

<base-chart :option="{}"/>

配置

| 名称 | 类型 | 必填 | 默认值 | 示例 | | --------------------- | --------------- | :---: | ------ | ------------------ | | option | Object | true | | 和echartoption一样 | | clickFunc | Funciotn | false | | function(params){} | | mouseoverFunc | Funciotn | false | | function(params){} | | hightLightFunc | Funciotn | false | | function(params){} | | legendselectchangedFn | Funciotn | false | | function(params){} | | chartWidthChange | Funciotn | false | | function(params){} | | chartType | 'china',unefind | false | | 已有中国地图会用到 |

饼图 pie-chart

示例

<pie-chart :data-source="[]"/>

配置

| 名称 | 类型 | 必填 | 默认值 | 示例 | | -------------------- | -------------- | ----- | --------- | --------------------------- | | dataSource | 类型 | true | 默认值 | [ { name: "海尔冰箱BCD-460WGHFD14NZU1星云紫", value: 57990 },] | | customChartStyle | String | false | | 'height:300px;' | | colors | Array[] | false | 默认值 | 示例 | | decimals | Number, String | false | 2 | 示例 | | pieChartName | String | false | 默认值 | function(params){return ''} | | titleText | String | false | 默认值 | 示例 | | title | Function | false | 默认值 | 示例 | | showLegend | Function | false | 默认值 | 示例 | | legend | Function | false | 默认值 | 示例 | | radius | Array | false | [60, 100] | 示例 | | showSeriesLabel | Boolean | false | 默认值 | 示例 | | grid | Object | false | 默认值 | 示例 | | tooltipFormatter | function | false | | 示例 | | colors | Object | false | | 示例 | | seriesLabelFormatter | function | false | | 示例 | | showSeriesLabelPer | Boolean | false | 默认值 | 示例 |

折线、柱状图 line-bar-chart

示例

<line-bar-chart :data-Source="[]"/>
  dataSource: [
        {
          yAxisIndex: 0,
          type: "line",
          name: "商品数1量",
          data: [
            { orderNum: 0, x: "0", y: 1230 },
          ],
        },
        {
          yAxisIndex: 1,
          type: "bar",
          name: "商品数量",
          data: [
            { orderNum: 0, x: "0", y: 1230 },
          ],
        },
      ]

配置

| 名称 | 类型 | 必填 | 默认值 | 示例 | | ------------------------ | -------------- | ----- | ------ | --------------------------- | | dataSource | Array | true | 默认值 | 1122 | | customChartStyle | String | false | | 'height:300px;' | | colors | Array[] | false | 默认值 | 示例 | | decimals | Number, String | false | 2 | 示例 | | tooltipFormatter | Function | false | 默认值 | function(params){return ''} | | tooltipValueUnit | String | false | 默认值 | 示例 | | tooltipTitleFn | Function | false | 默认值 | 示例 | | tooltip | Object | false | 默认值 | 示例 | | xAxisAxisLabelFormattter | Function | false | 默认值 | 示例 | | yAxis | Function | false | 默认值 | 示例 | | yAxisAxisLabelFormattter | Function | false | 默认值 | 示例 | | yAxisName | Function | false | 默认值 | 示例 | | legend | Object | false | 默认值 | 示例 | | showDataZoom | Boolean | false | 默认值 | 示例 | | dataZoom | Object | false | 默认值 | 示例 | | grid | Object | false | 默认值 | 示例 | | showChart | Boolean | false | true | 示例 | | otherConfig | Object | false | true | 示例 |

漏斗图 funnel-chart

<funnel-chart :data-source="[]"/>

配置

| 名称 | 类型 | 必填 | 默认值 | 示例 | | ---------- | -------------- | ----- | ------ | -------------------------------------------------------------- | | dataSource | 类型 | true | 默认值 | [ { name: "海尔冰箱BCD-460WGHFD14NZU1星云紫", value: 57990 },] | | utilt | String | false | | '个' | | decimals | Number, String | false | 2 | 示例 |

地图 china-map-chart

示例

<china-map-chart :data-source="[ {name:'北京',value:1}]" />

配置

| 名称 | 类型 | 必填 | 默认值 | 示例 | | ------------- | ---------------- | :---: | ------ | ---------------------------------------------- | | dataSource | Array | true | [] | {name:string,value:number} | | showList | Array | false | | [{ label: '正常商品数', value:'normalTotal',}] | | customTooltip | Funciotn | false | | function(params){} | | visualMap | Object | false | | | | geo | Object | false | | | | decimals | String or Number | false | 2 | default |

top10 top-chart

<top-chart :data-source="[]"/>

配置

| 名称 | 类型 | 必填 | 默认值 | 示例 | | --------------------- | -------------- | ----- | ------ | --------------------------- | | dataSource | 类型 | true | 默认值 | [ { name: "海尔冰箱BCD-460WGHFD14NZU1星云紫", value: 57990 },]| | customChartStyle | String | false | | 'height:300px;' | | decimals | Number, String | false | 2 | 示例 | | tooltipFormatter | function | false | 默认值 | function(params){return ''} | | tooltipFormatterLabel | String | false | 默认值 | 示例 | | grid | Object | false | 默认值 | 示例 | | showChart | Boolean | false | true | 示例 | | seriesLabelFormatter | function | false | true | 示例 |