组合图表(midea-combinechart-view)

APP内置组件，可直接在template中使用，不需要import导入和注册。

实例

基础用法

<template>
  <scroller class="scroller">
    <midea-combinechart-view class="barchart" :data="chartData"></midea-combinechart-view>
  </scroller>
</template>
<script>
export default {
  data() {
    return {
      chartData: {
        data: {
          name: '总图表名称',
          ynumber: '100',
          legend: {
            position: 'TOP_RIGHT',
            orientation: 'HORIZONTAL'
          },
          legendHide: false,
          compositestacking: {
            dragType: 2,
            visibleXRangeMaximum: 6,
            yAxisLabelCount: 4,
            yValueDecimal: 2,
            drawGridLine: true,
            optimizeHighlightPerDrag: 1,
            xnumber: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15',
            xlaberTextColor: '#333333',
            xUnitColor: '#666666',
            backgroundColor: '#FFFFFF',
            yleftxis: {
              min: -100,
              max: 100,
              position: 'left',
              axisLabel: '℃',
              axisLineWidth: 0,
              axisLabelColor: '#333333'
            },
            yrightxis: {
              min: -100,
              max: 100,
              position: 'right',
              axisLabel: '',
              hidden: '1',
              axisLabelColor: '#333333'
            },
            brokenline: {
              total: '1',
              datalist: [
                {
                  eachname: '室外平均温度',
                  ydata: '-60, 30, 22, -12, 45, 32, 34, 11, 23, -30, 22, -60, 20',
                  colorvalue: '#d0011b',
                  display: true
                }
              ]
            },
            histogram: {
              total: '1',
              datalist: [
                {
                  eachname: '制冷',
                  ydata: '55,40,-50,0,0,0,0,0,0,28,-40,34',
                  colorvalue: '#F29D13'
                }
              ]
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.scroller {
  width: 750px;
}
.barchart {
  margin-top: 100px;
  margin-left: 10px;
  margin-right: 10px;
  height: 800px;
}
</style>

Attributes

Prop	Type	Required	Default	Description
data	Object	Y	-	图表数据配置，见下方详细说明

data 数据结构

顶层属性

Prop	Type	Required	Default	Description
name	String	N	-	总图表名称
ynumber	String	N	-	Y轴最大值
legend	Object	N	-	图例配置
legendHide	Boolean	N	false	是否隐藏图例
compositestacking	Object	N	-	复合堆叠图表配置

legend 图例配置

Prop	Type	Required	Default	Description
position	String	N	'TOP_RIGHT'	图例位置，可选 'TOP_LEFT' / 'TOP_RIGHT'
orientation	String	N	'HORIZONTAL'	图例方向，可选 'HORIZONTAL' / 'BOTTOM_RIGHT'

compositestacking 复合堆叠配置

Prop	Type	Required	Default	Description
dragType	Number	N	2	拖拽类型
visibleXRangeMaximum	Number	N	6	最大可见X轴范围
yAxisLabelCount	Number	N	4	显示的Y轴坐标数量
yValueDecimal	Number	N	2	Y轴数值小数位数
drawGridLine	Boolean	N	true	是否绘制网格线
optimizeHighlightPerDrag	Number	N	1	拖拽高亮优化
xnumber	String	N	-	X轴坐标标签（逗号分隔）
xlaberTextColor	String	N	-	x轴文字颜色
xUnitColor	String	N	-	x轴单位颜色
backgroundColor	String	N	-	图表背景颜色
yleftxis	Object	N	-	左Y轴配置
yrightxis	Object	N	-	右Y轴配置
marker	Object	N	-	标记配置
signPost	Object	N	-	底部指示器配置
brokenline	Object	N	-	折线图配置
histogram	Object	N	-	柱状图配置

yleftxis 左Y轴配置

Prop	Type	Required	Default	Description
min	Number	N	-	Y轴最小值
max	Number	N	-	Y轴最大值
position	String	N	'left'	坐标轴位置
axisLabel	String	N	-	轴标签文字
axisLineWidth	Number	N	0	轴线宽度
axisLabelColor	String	N	-	左侧单位文字颜色

yrightxis 右Y轴配置

Prop	Type	Required	Default	Description
min	Number	N	-	Y轴最小值
max	Number	N	-	Y轴最大值
position	String	N	'right'	坐标轴位置
axisLabel	String	N	-	轴标签文字
hidden	String	N	'0'	是否隐藏，'0'显示，'1'隐藏
axisLabelColor	String	N	-	右侧单位文字颜色

brokenline 折线图配置

Prop	Type	Required	Default	Description
total	String	N	-	折线数量
datalist	Array	N	-	折线数据列表

brokenline.datalist 数据项

Prop	Type	Required	Default	Description
eachname	String	N	-	折线名称
ydata	String	Y	-	Y轴数据（逗号分隔）
colorvalue	String	Y	-	线条颜色
display	Boolean	N	true	是否显示
startcolor	String	N	-	渐变起始颜色
endcolor	String	N	-	渐变结束颜色
fillAlpha	Number	N	0.2	填充透明度
isDrawCircles	Boolean	N	true	是否绘制数据点圆圈
circleRadius	Number	N	4	圆圈半径

histogram 柱状图配置

Prop	Type	Required	Default	Description
total	String	N	-	柱状图数量
datalist	Array	N	-	柱状图数据列表

histogram.datalist 数据项

Prop	Type	Required	Default	Description
eachname	String	N	-	柱状图名称
ydata	String	Y	-	Y轴数据（逗号分隔）
colorvalue	String	Y	-	柱子颜色
startcolor	String	N	-	渐变起始颜色
endcolor	String	N	-	渐变结束颜色