# 9.6 组合图表（Midea Combine Chart 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

# Attributes

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

# data 数据结构

# data 顶层属性

Prop Type Required Default Description
data Object Y - 组合图表配置，包含以下字段

示例将 chartData 传给组件的 data 属性，具体配置位于 chartData.data 中。

# data.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 - 渐变结束颜色

← 9.7 横向图表按钮（Midea Horizon Charts Button） →