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	示例