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
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' |