0.0.4 • Published 2 years ago
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="[]"/>
配置
地图 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 | 示例 |