Zjjk-charts NPM

zj-chart

npm install
npm serve
npm build
npm lint

所有组件共有配置

参数	说明	类型	可选值	默认值
loading	echart中的自带loading	Boolean	true,false	false
theme	主题 white dark	String	'white', 'dark'	dark
categoryName	类别名称	String		category
seriesConf	图形上的图表配置(具体查看组件内部规定)	Array	{ name: '增长情况',type: 'bar'}	必填
seriesData	深度监听,绘制图表, 图形上的图表配置,具体查看各个组件配置		{}		[]
seriesLabelShow	是否显示图形上的文本标签	Boolean	true,false	true
seriesLabelPosition	图形上标注数字位置	String		top
seriesLabelColor	图形上标注数字颜色	String		inherit
extraOptions	额外的配置项（没有封装的配置项）例如值为'color',将会去v-bing中查看_color的配置项	'color'		[]

标题设置 title

参数	说明	类型	可选值	默认值
titleShow	是否显示标题，默认不显示	Boolean	true,false	false
titleTop	title 组件离容器上侧的距离。	String, Number	'top', 'middle', 'bottom','20%',20	'auto'
titleLeft	title 组件离容器左侧的距离。	String, Number	'top', 'middle', 'bottom','20%',20	'center'
titleRight	title 组件离容器左侧的距离。	String, Number	'20%',20	'auto'
titleBottom	title 组件离容器下侧的距离。	String, Number	'20%',20	'auto'
titleText	主标题文本，支持使用 \n 换行。	String		''
titleTextColor	主标题文本颜色	String, Function	'dark': '#fff','white': '#333'
titleTextFontSize	主标题文字的字体大小。	Number		18
titleLineHeight	主标题行高。	Number		30
titleSubText	副标题文本，支持使用 \n 换行。	String
titleSubTextAlign	整体（包括 text 和 subtext）的水平对齐。	String		center
titleSubTextColor	副标题文字的颜色。	String, Function		'dark': '#fff','white': '#333'

tooltip

参数	说明	类型	可选值	默认值
toolTipShow	是否显示提示框。	Boolean	true,false	true
tooltipConfine	是否将 tooltip 框限制在图表的区域内。	Boolean	true,false	true
tooltipTrigger	触发类型。('item':数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis':坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。)	String	item,axis,none	axis
tooltipEnterable	鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。	Boolean	true,false	false
tooltipPadding	提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。	Number, Array
tooltipBorderWidth	提示框浮层的边框宽。	Number
tooltipBackground	提示框浮层的背景颜色。	String, Function		'dark': 'rgba(0,0,0,0.7)', 'white': '#fff'
tooltipFormatter	提示框浮层内容格式器。	String, Function
tooltipTextColor	文字的颜色。	String, Function		'dark': '#fff', 'white': '#888'
tooltipTextFontSize	文字的字体大小。	Number		14
tooltipTextLineHeight	行高。	Number		56

图例组件 legend

参数	说明	类型	可选值	默认值
legendShow	是否显示图例，默认显示	Boolean	true,false	true
legendTop	图例组件离容器上侧的距离。	String, Number	'top', 'middle', 'bottom', '10%', 10	10%
legendOrient	图例列表的布局朝向。	String		horizontal
legendPadding	图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。	Number, Array		5
legendItemGap	图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。	Number		10
legendItemWidth	图例标记的图形宽度。	Number		25
legendItemHeight	图例标记的图形高度。	Number		14
legendTextColor	图例文本颜色。	String, Function		'dark': '#fff', 'white': '#333'
legendTextFontSize	图例文本字号。	Number		12
legendIcon	图例项的 icon。	String

直角坐标系内绘图网格 grid

参数	说明	类型	可选值	默认值
gridOrientation	grid的方向。	String		'row'
gridNumber	grid的个数。	Number		1
gridContainLabel	grid 区域是否包含坐标轴的刻度标签。	Boolean	true,false	true
gridTop	grid 组件离容器上侧的距离。	String, Number, Array		'20%'
gridLeft	grid 组件离容器左侧的距离。	String, Number, Array		20
gridRight	grid 组件离容器右侧的距离。	String, Number, Array		'3%'
gridBottom	grid 组件离容器下侧的距离。	String, Number, Array		'3%'
gridWidth	grid 组件的宽度。默认自适应。	String, Number, Array		auto
gridHeight	grid 组件的高度。默认自适应。	String, Number, Array		auto

x 横轴的配置 xAxis

参数	说明	类型	默认值
xAxisShow	是否显示x轴	Boolean	true
xAxisOptions	x轴的配置(多个x轴的配置)	Array	[]
xAxisPosition	x 轴的位置。	String	bottom
xAxisType	x 轴的坐标轴类型。。	String	category
xAxisLineShow	x 是否显示坐标轴轴线。	Boolean	true
xAxisTickShow	是否显示坐标轴刻度。	Boolean	true
xAxisTickAlignWithLabel	类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。	Boolean	true
xAxisTickInside	坐标轴刻度是否朝内，默认朝外。	Boolean	true
xAxisLabelShow	是否显示刻度标签。	Boolean	true
xAxisLabelColor	x轴上文字颜色	String, Function	'dark': '#fff','white': '#999'
xAxisLineStyleColor	x轴上轴线颜色	String, Function	'dark': '#fff','white': '#999'
xAxisSplitLine	是否显示分隔线。默认数值轴显示，类目轴不显示	Boolean	false

y 纵轴的配置 yAxis

参数	说明	类型	可选值	默认值
yAxisShow	y 是否显示y轴。	Boolean		true
yAxisOptions	多个y轴的配置	Array		[]
yAxisType	y坐标轴类型。	String		value
yAxisPosition	y 轴的位置。默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧。	String	left,right	left
yAxisName	y 坐标轴名称。	String
yAxisNameLocation	y 坐标轴名称显示位置。	String	start,middle,center,end	end
yAxisLineShow	是否显示坐标轴轴线。	Boolean	true,false	true
yAxisTickShow	是否显示坐标轴刻度。	Boolean	true,false	false
yAxisLabelShow	是否显示刻度标签。	Boolean	true,false	true
yAxisLabelColor	刻度标签文字的颜色	String, Function		'dark': '#fff', 'white': '#999'
yAxisLabelFormatter	刻度标签的内容格式器，支持字符串模板和回调函数两种形式。	String, Function		'{value}'
yAxisSplitLineShow	是否显示分隔线。默认数值轴显示，类目轴不显示。	Boolean	true,false	true
yAxisSplitLineColor	分隔线颜色，可以设置成单个颜色。	String, Array, Function		'dark': '#133474','white': '#ccc'

视觉映射组件 visualMap

参数	说明	类型	可选值	默认值
visualType	类型continuous(连续型)		piecewise(分段型)	String	true
visualText	两端的文本。	Array		'高', '低'
visualTextColor	文字的颜色。	String		#000
visualTextFontSize	文字的字体大小。	Number		12
visualInRageSymbolSize	图元的大小。	Array		100, 100
visualInRageColor	图元的颜色。	Array		'lightskyblue', 'yellow', 'orangered'

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

参数	说明	类型	默认值
dataZoomShow	是否显示区域缩放	Boolean	false
dataZoomType	类型	String	inside
zoomNum	每次显示的个数	Array	'高', '低'
zoomStart	数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。	String, Number	0
zoomLock	是否锁定数据窗口的大小,如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。	Boolean	false

series-Line

引入配置项有xAxis, yAxis,title,grid,legend,tooltip,dataZoom

参数	说明	类型	默认值
barWidth	柱条的宽度。	String, Number	20
smooth	平滑折线图	Boolean	false
stack	堆叠折线图	Boolean	false
step	阶梯折线图	Boolean, String	false
symbol	标记的图形	String, Function	emptyCircle
symbolSize	标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 20, 10 表示标记宽为20，高为10。	Number, Array, Function	6
lineAreaStyle	区域填充样式。设置后显示成区域面积图。图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。	Number	0

  <ELLine
    categoryName="name"
    theme="white"
    :stack="true"
    :loading="loading"
    :seriesConf="seriesConf"
    :seriesData="seriesData">
  </ELLine>

  js:
  loading: true,
  seriesConf: [
    {
      name: '增长情况',
      resDataKey: 'add' // 设置值
    },
    {
      name: '联盟广告',
      resDataKey: 'add1'
    }
  ],
  seriesData: [
    { name: '2020-01-01', 'add': 48, 'add1': 220 },
    { name: '2020-01-02', 'add': 56, 'add1': 182 },
    { name: '2021-01-03', 'add': 46, 'add1': 191 },
    { name: '2020-01-04', 'add': 52, 'add1': 234 },
    { name: '2020-01-06', 'add': 48, 'add1': 290 },
    { name: '2020-01-06', 'add': 48, 'add1': 330 },
    { name: '2021-01-07', 'add': 48, 'add1': 310 }
  ]

series-bar

引入配置项有xAxis, yAxis,title,grid,legend,tooltip,dataZoom

参数	说明	类型	默认值
barWidth	柱条的宽度。	String, Number	20
stack	柱状图堆叠	Boolean	false
barBorderRadius	圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。如:borderRadius: 5, // 统一设置四个角的圆角大小 borderRadius: 5, 5, 0, 0 //（顺时针左上，右上，右下，左下）	Number, Array	0
showBg	是否显示柱条的背景色	Boolean	false
barColor	柱条的的颜色。	String, Array
barBgColor	柱条的背景色的颜色。	String	rgba(180, 180, 180, 0.2)

<ELBar
  v-bind="attrs"
  theme="dark"
  :barColor="['red','green']"
  :seriesConf="seriesConf"
  :seriesData="seriesData">
</ELBar>

js:
attrs: {
  _xAxis_axisPointer_type: 'shadow',
  _xAxis_axisPointer_status: 'false',
  _tooltip_textStyle_color: 'black',
  _grid_left: '5%',
  _title_show: false
},
seriesConf: [
  {
    name: '增长情况',
    resDataKey: 'add' // 设置值
  },
  {
    name: '联盟广告',
    resDataKey: 'add1' // 设置值
  }
],
seriesData: [
  { category: '2020-01-01', 'add': 48, 'add1': 220 },
  { category: '2020-01-02', '增长情况': 56, '联盟广告': 182 },
  { category: '2021-01-03', '增长情况': 46, '联盟广告': 191 },
  { category: '2020-01-04', '增长情况': 52, '联盟广告': 234 },
  { category: '2020-01-06', '增长情况': 48, '联盟广告': 290 },
  { category: '2020-01-06', '增长情况': 48, '联盟广告': 330 },
  { category: '2021-01-07', '增长情况': 48, '联盟广告': 310 }
],

series-barCross

引入配置项有xAxis, yAxis,title,grid,legend,tooltip

参数	说明	类型	默认值
seriesName	系列名称	String	系列名称
barColors	柱条的颜色	Array	#20C0A0,#A34EFF,#066BED,#00C6FF
barWidth	柱条的宽度。	String, Number	20
barBorderRadius	圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。如:borderRadius: 5, // 统一设置四个角的圆角大小 borderRadius: 5, 5, 0, 0 //（顺时针左上，右上，右下，左下）	Number, Array	0
showBg	是否显示柱条的背景色	Boolean	false
barColor	柱条的的颜色。	String, Array
barBgColor	柱条的背景色的颜色。	String	rgba(180, 180, 180, 0.2)

<ELBarCross
  v-bind="attrs"
  :seriesData="seriesData">
</ELBarCross>

js:
{
  "attrs":{
    "barColor":["#20C0A0","#A34EFF","#066BED","#00C6FF"]
  },
  "seriesConf":[],
  "seriesData":[
    {"category":"手术冻结与石蜡诊断符合率","增长情况":96.78},
    {"category":"住院手术前后诊断符合率","增长情况":88.02},
    {"category":"临床与病理诊断符合率","增长情况":92.22},
    {"category":"出入院斩断符合率","增长情况":96.78}
  ]
}

series-barGrid

引入配置项有xAxis, yAxis,title,grid,legend,tooltip,dataZoom

参数	说明	类型	默认值
seriesName	系列名称	String
resDataKey	取值的字段	String
barColors	柱条的颜色	Array	#20C0A0,#A34EFF,#066BED,#00C6FF
barWidth	柱条的宽度	String, Number	20
barBorderRadius	圆角半径，单位px	Array	0, 12, 12, 0
gridRight	grid 组件离容器右侧的距离	String, Number, Array	10%

<ELBarGrid
  v-bind="attrs"
  :seriesConf="seriesConf"
  :seriesData="seriesData">
</ELBarGrid>

js:
{
  "attrs":{},
  "seriesConf":[
    {"name":"男","resDataKey":"man"},
    {"name":"女"}
  ],
  "seriesData":[
    {"category":"研究生","man":2880,"女":2270},
    {"category":"大学本科","man":2027,"女":2882},
    {"category":"大专","man":2278,"女":1702},
    {"category":"中专","man":1382,"女":1888},
    {"category":"高中及以下","man":1720,"女":820}
  ]
}

series-barRate

引入配置项有xAxis, yAxis,title,grid,legend,tooltip,dataZoom

参数	说明	类型	默认值
color	柱状图颜色	Array	'#00C6FF', '#A34EFF'
legendShow	图例组件是否显示	Boolean	false
gridWidth	组件的宽度	Array	39%, 0%, 36%
gridLeft	组件离容器左侧的距离	Array	5%, 40%, 56%

<ELBarGrid
  v-bind="attrs"
  :seriesConf="seriesConf"
  :seriesData="seriesData">
</ELBarGrid>

js:
{
  "attrs":{},
  "seriesConf":[
    {"name":"男","resDataKey":"man"},
    {"name":"女"}
  ],
  "seriesData":[
    {"category":"研究生","man":2880,"女":2270},
    {"category":"大学本科","man":2027,"女":2882},
    {"category":"大专","man":2278,"女":1702},
    {"category":"中专","man":1382,"女":1888},
    {"category":"高中及以下","man":1720,"女":820}
  ]
}

series-pictorialBar

引入配置项有xAxis, yAxis,title,grid,legend,tooltip,dataZoom

参数	说明	类型	默认值
barGap	不同系列的柱间距离，为百分比。	String	-100%
symbolSize	标记的大小	Number, Array, Function	'80%', '60%'
itemColor	图标的颜色	Array	[]

  <PictorialBar
    v-bind="attrs"
    :seriesConf="seriesConf"
    :seriesData="seriesData">
  </PictorialBar>

  js:
 {
   "attrs":{"barGap":"10%"},
   "seriesConf":[
     {"name":"2015","resDataKey":"2015day","symbol":"rect","itemStyle":{"color":"red"}},
     {"name":"2016","resDataKey":"2016day","symbol":"circle"}
    ],
    "seriesData":[
      {"category":"reindeer","2015day":157,"2016day":184},
      {"category":"ship","2015day":21,"2016day":29},
      {"category":"plane","2015day":66,"2016day":73},
      {"category":"train","2015day":78,"2016day":91},
      {"category":"car","2015day":123,"2016day":95}
    ]
  }

series-PictorialBarRate

引入配置项有xAxis, yAxis,title,grid,legend,tooltip,dataZoom

参数	说明	类型	默认值
symbolSize	标记的大小	Number, Array, Function	14, 32
gridLeft	grid组件离容器左侧的距离	String, Number	5
seriesLabelColor	图形上标注数字颜色	Array	#00C6FF,#FF6633
seriesSymbol	图形	Array

<PictorialBarRate
  v-bind="attrs"
  :seriesConf="seriesConf"
  :seriesData="seriesData">
</PictorialBarRate>

js:
{
  "attrs":{},
  "seriesConf":[
    {"name":"男"},
    {"name":"女"}
  ],
  "seriesData":[
    {"category":"比例","男":60,"女":40}
  ]
}

series-pie

引入配置项有title,grid,legend,tooltip,dataZoom

参数	说明	类型	可选值	默认值
direction	饼状图分布方向	String	row,column	row
rowNumber	在direction:row有效，每行显示的数量，0代表默认	Number		0
seriesConf	图形上的图表配置	Object, Array
seriesData	深度监听,绘制图表, 图形上的图表配置,具体查看各个组件配置		Object, Array
radius	饼图的半径。Array.<number	string>：数组的第一项是内半径，第二项是外半径	Array		'50%', '70%'
color	饼图的颜色	Array
startAngle	起始角度，支持范围0, 360。	Number		90
minAngle	最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。	Number		20
minShowLabelAngle	小于这个角度（0 ~ 360）的扇区，不显示标签（label 和 labelLine）。	Number		0
roseType	是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：'radius' 'area'。	Boolean, String		''
seriesLabelPosition	标签的位置。	String		outside

  <ELPie
    v-bind="attrs"
    :seriesConf="seriesConf"
    :seriesData="seriesData">
  </ELPie>

  js:
  {
    "attrs":{},
    "seriesConf":{"name":"半径模式"},
    "seriesData":[
      {"value":40,"name":"rose 1"},
      {"value":33,"name":"rose 2"},
      {"value":28,"name":"rose 3"},
      {"value":22,"name":"rose 4"},
      {"value":20,"name":"rose 5"},
      {"value":15,"name":"rose 6"},
      {"value":12,"name":"rose 7"},
      {"value":10,"name":"rose 8"}
    ]
  }

  <ELPie
    theme="dark"
    :loading="loading"
    :radius="['0%','50%']"
    :seriesConf="seriesConf"
    :seriesData="seriesData">
  </ELPie>

  js:
    loading: true,
    seriesConf: [
      {
        name: '半径模式',
        type: 'pie',
        labelLine: {
          smooth: false,
          lineStyle: {
          }
        }
      },
      {
        name: '半径模式2',
        type: 'pie'
      },
      {
        name: '半径模式3',
        type: 'pie'
      },
      {
        name: '半径模式4',
        type: 'pie'
      }
    ],
    seriesData: {
      '半径模式': [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ],
      '半径模式2': [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ],
      '半径模式3': [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ],
      '半径模式4': [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ]
    }

series-gauge

引入配置项有xAxis, yAxis,title,grid,legend,tooltip,dataZoom

参数	说明	类型	可选值	默认值
direction	饼状图分布方向	String	row,column	row
rowNumber	在direction:row有效，每行显示的数量，0代表默认	Number		0
seriesData		Object, Array
radius	仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。	Number, String		65%
startAngle	仪表盘起始角度。圆心正右手侧为0度，正上方为90度，正左手侧为180度。	Number		225
endAngle	仪表盘结束角度。	Number		-45
clockwise	仪表盘刻度是否是顺时针增长。	Boolean		true
min	最小的数据值。	Number		0
max	最大的数据值。	Number		100
splitNumber	仪表盘刻度的分割段数。	Number		5
axisLineShow	是否显示仪表盘轴线。	Boolean		true
axisLineRoundCap	是否在两端显示成圆形。	Boolean		true
axisLineWidth	轴线宽度。	Number		10
progressShow	是否显示进度条。	Boolean		true
progressOverlap	多组数据时进度条是否重叠。	Boolean		true
progressWidth	进度条宽度。	Number		10
progressRoundCap	是否在两端显示成圆形。	Boolean		true
progressClip	是否裁掉超出部分。	Boolean		true
splitLineShow	是否显示分隔线。	Boolean		true
splitLineLength	分隔线线长。支持相对半径的百分比。	Number		10
splitLineDistance	分隔线与轴线的距离。	Number		10
splitLineColor	分割线的颜色。	String		#63677A
axisTickShow	是否显示刻度数。	Boolean		true
axisTickSplitNumber	分隔线之间分割的刻度数。	Number		5
axisLabelShow	是否显示标签。	Boolean		true
axisLabelDistance	标签与刻度线的距离。	Number		20
axisLabelFormatter	刻度标签的内容格式器，支持字符串模板和回调函数两种形式	String, Function		'{value}'
axisLabelFontStyle	刻度标签的文字字体的风格。	String		normal
axisLabelFontWeight	刻度标签的文字字体的粗细。	String		normal
axisLabelColor	刻度标签的文字的颜色。	String, Function		'dark': '#fff','white': '#333'
axisLabelFontSize	刻度标签的文字的字号。	Number		12
pointerShow	是否显示指针。	Boolean		true
pointerIcon	指针Icon。	String		roundRect
pointerWidth	指针宽度。	Number		8
pointerLength	指针长度，可以是绝对数值，也可以是相对于半径的半分比	String, Number		60%
pointerOffsetCenter	相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。	Array		0, '8%'
anchorShow	是否显示固定点。	Boolean		true
anchorShowAbove	固定点是否显示在指针上面。	Boolean		true
anchorSize	固定点大小。	Number		18
anchorIcon	固定点图标。	String		circle
anchorOffsetCenter	相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。	Array		0, 0
anchorItemColor	图形的颜色。	String, Function		'dark': '#fff','white': '#333'
detailShow	是否显示详情。	Boolean		true
detailWidth	详情宽度。	Number		40
detailHeight	详情高度。	Number		14
detailFontSize	详情文字的字体大小。	Number		14
detailColor	详情文本颜色	String		#fff
detailBgColor	详情背景色。	String		transparent
detailBorderRadius	详情文字块的圆角。	Number, Array		3
detailFormatter	自定义详情展示。	String, Function		'{value}'
detailOffsetCenter	相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。	Array		0, 0
titleShow	是否显示标题。	Boolean		#464646
titleFontSize	标题文字的字体大小。	Number		14

<div style="width:600px;height:250px;background:#020A32;">
  <ELGauge
    v-bind="bingData"
    axisLabelFormatter="{value} %"
    :seriesConf="seriesConf"
    :seriesData="gauseSeriesData">
  </ELGauge>
</div>

js:
 bingData: {
    _gause_axisLabel_padding: 10,
    splitNumber: 1,
    anchorShow: false,
    pointerShow: false,
    progressShow: false,
    axisTickShow: false,
    splitLineShow: false,
    axisLineRoundCap: false,
    axisLabelDistance: -25,
    detailOffsetCenter: [0, '-25%']
  },
  seriesConf: [
    {
      name: 'gauge1',
      charType: 'type1',
      detailText: '临床路径\n入径率'
    },
    {
      name: 'gauge2',
      charType: 'type1',
      detailText: '临床路径\n完成率'
    },
    {
      name: 'gauge3',
      detailText: '临床路径\n变异率',
      charType: 'type1'
    }
  ],
  gauseSeriesData: {
    gauge1: [
      {
        value: 8
      }
    ],
    gauge2: [
      {
        value: 72
      }
    ],
    gauge3: [
      {
        value: 27
      }
    ]
  },

series-geo-default

引入配置项有title,grid,legend,tooltip,dataZoom

参数	说明	类型	可选值	默认值
seriesData	深度监听,绘制图表, 图形上的图表配置,具体查看各个组件配置		[]
mapAreaCode	用于显示的地图的areaCode。	String		13
roam	地图是否支持缩放。	Boolean		true
areaColor	地图区域的颜色。	String		#2AB8FF
formatter	toolTip要显示的数据。	Array		{ label: '辖区总人口', numType: 'int', key: 'memberTotal', unit: '人' }, { label: '签约总人数', numType: 'int', key: 'signTotal', unit: '人' }, { label: '签约率', numType: 'float', key: 'rate', unit: '%' }
geoAspectScale	scale 地图的长宽比。	Number		1
geoZoom	当前视角的缩放比例。	Number		1
geoTop	组件离容器上侧的距离。	Number		0
geoLableShow	是否显示标签。	Boolean		true
geoLabelColor	geo标签的颜色。	String		#fff
geoShadowColor	阴影颜色。	String		#114FA3
geoBorderWidth	描边线宽。	Number		1
geoBorderColor	图形的描边颜色。	String		#083374
geoEmphasisBorderWidth	高亮状态下的描边线宽。	Number		0
geoEmphasisColor	高亮状态下的图形的颜色。	String		'green'

<ELGeoDefault
  geoType="default"
  mapAreaCode="1306"
  scatterKey="signTotal"
  :roam="false"
  :seriesConf="[]"
  :seriesData="mapSeriesMap">
</ELGeoDefault>

mapSeriesMap: [ // 地图  【memberTotal:辖区总人口】【signTotal:签约总人数】【rate:签约率】
  { memberTotal: 0, signTotal: 0, rate: 30, areaCode: '130601', areaName: '市辖区' },
  { memberTotal: 79529, signTotal: 287945, rate: 10, areaCode: '130602', areaName: '竞秀区' },
  { memberTotal: 208477, signTotal: 0, rate: 20, areaCode: '130606', areaName: '莲池区' },
  { memberTotal: 109736, signTotal: 240860, rate: 60, areaCode: '130607', areaName: '满城区' },
  { memberTotal: 596397, signTotal: 0, rate: 50, areaCode: '130608', areaName: '清苑区' },
  { memberTotal: 555416, signTotal: 368647, rate: 25, areaCode: '130609', areaName: '徐水区' },
  { memberTotal: 325256, signTotal: 152559, rate: 33, areaCode: '130623', areaName: '涞水县' },
  { memberTotal: 213071, signTotal: 152582, rate: 40, areaCode: '130624', areaName: '阜平县' },
  { memberTotal: 520282, signTotal: 0, rate: 56, areaCode: '130626', areaName: '定兴县' },
  { memberTotal: 570572, signTotal: 326629, rate: 46, areaCode: '130627', areaName: '唐县' },
  { memberTotal: 315028, signTotal: 0, rate: 80, areaCode: '130628', areaName: '高阳县' },
  { memberTotal: 0, signTotal: 0, rate: 90, areaCode: '130629', areaName: '容城县' },
  { memberTotal: 269229, signTotal: 64, rate: 0, areaCode: '130630', areaName: '涞源县' },
  { memberTotal: 229253, signTotal: 45, rate: 0, areaCode: '130631', areaName: '望都县' },
  { memberTotal: 0, signTotal: 0, rate: 56, areaCode: '130632', areaName: '安新县' },
  { memberTotal: 538831, signTotal: 410364, rate: 35, areaCode: '130633', areaName: '易县' },
  { memberTotal: 527933, signTotal: 344717, rate: 46, areaCode: '130634', areaName: '曲阳县' },
  { memberTotal: 460442, signTotal: 354701, rate: 24, areaCode: '130635', areaName: '蠡县' },
  { memberTotal: 278756, signTotal: 0, rate: 62, areaCode: '130636', areaName: '顺平县' },
  { memberTotal: 449334, signTotal: 128189, rate: 12, areaCode: '130637', areaName: '博野县' },
  { memberTotal: 0, signTotal: 0, rate: 34, areaCode: '130638', areaName: '雄县' },
  { memberTotal: 39253, signTotal: 0, rate: 47, areaCode: '130671', areaName: '保定高新技术产业开发区' },
  { memberTotal: 1517, signTotal: 0, rate: 95, areaCode: '130672', areaName: '保定白沟新城' },
  { memberTotal: 405831, signTotal: 193078, rate: 34, areaCode: '130681', areaName: '涿州市' },
  { memberTotal: 0, signTotal: 1258, rate: 45, areaCode: '130682', areaName: '定州市' },
  { memberTotal: 20631, signTotal: 0, rate: 32, areaCode: '130683', areaName: '安国市' },
  { memberTotal: 305188, signTotal: 244520, rate: 75, areaCode: '130684', areaName: '高碑店市' }
]

series-geo-visual

引入配置项有title,grid,legend,tooltip,dataZoom,visualMap

参数	说明	类型	可选值	默认值
seriesData	深度监听,绘制图表, 图形上的图表配置,具体查看各个组件配置		[]
mapAreaCode	用于显示的地图的areaCode。	String		13
roam	地图是否支持缩放。	String		13
areaColor	地图区域的颜色。	String		#2AB8FF
scatterKey	热力数据字段名。	String		value
formatter	toolTip要显示的数据。	Array		{ label: '辖区总人口', numType: 'int', key: 'memberTotal', unit: '人' }, { label: '签约总人数', numType: 'int', key: 'signTotal', unit: '人' }, { label: '签约率', numType: 'float', key: 'rate', unit: '%' }

 <ELGeoVisual
  geoType="default"
  mapAreaCode="1306"
  scatterKey="signTotal"
  :roam="false"
  :seriesConf="[]"
  :seriesData="mapSeriesMap">
</ELGeoVisual>

js:参考series-geo-default

series-geo-effectScatter

引入配置项有title,grid,legend,tooltip,dataZoom

参数	说明	类型	可选值	默认值
seriesData	深度监听,绘制图表, 图形上的图表配置,具体查看各个组件配置		[]
mapAreaCode	用于显示的地图的areaCode。	String		13
roam	地图是否支持缩放。	Boolean		true
areaColor	地图区域的颜色。	String		#2AB8FF
scatterKey	热力数据字段名。	String		value
formatter	toolTip要显示的数据。	Array		{ label: '辖区总人口', numType: 'int', key: 'memberTotal', unit: '人' }, { label: '签约总人数', numType: 'int', key: 'signTotal', unit: '人' }, { label: '签约率', numType: 'float', key: 'rate', unit: '%' }
geoAspectScale	scale 地图的长宽比。	Number		1
geoZoom	当前视角的缩放比例。	Number		1
geoTop	组件离容器上侧的距离。	Number		0
geoLableShow	是否显示标签。	Boolean		false
geoLabelColor	geo标签的颜色。	String		#fff
geoShadowColor	阴影颜色。	String		#114FA3
geoBorderWidth	描边线宽。	Number		1
geoBorderColor	图形的描边颜色。	String		#083374
geoEmphasisBorderWidth	高亮状态下的描边线宽。	Number		0
geoEmphasisColor	高亮状态下的图形的颜色。	String		'green'

core-js echarts element-resize-detector element-ui prismjs screenfull vue vue-draggable-resizable-gorkys vue-prism-editor vue-router vue-ruler-tool vuedraggable vuex

@infinitebrahmanuniverse/nolb-zj

0.1.1

4 years ago

zj-chart

所有组件共有配置

标题设置 title

tooltip

图例组件 legend

直角坐标系内绘图网格 grid

x 横轴的配置 xAxis

y 纵轴的配置 yAxis

视觉映射组件 visualMap

dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

series-Line

series-bar

series-barCross

series-barGrid

series-barRate

series-pictorialBar

series-PictorialBarRate

series-pie

series-gauge

series-geo-default

series-geo-visual

series-geo-effectScatter

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。