横向图表按钮(midea-horizonCharts-button)

APP内置组件，可通过 weex.requireModule 引入使用。

实例

基础用法

<template>
  <div class="page">
    <midea-horizonCharts-button
      ref="horizonChartsButton"
      :style="chartStyle"
      :chartDate="chartsDataAttributes"
    ></midea-horizonCharts-button>
  </div>
</template>
<script>
const mideaHorizonChartsButton = weex.requireModule('midea-horizonCharts-button')
export default {
  components: { mideaHorizonChartsButton },
  data() {
    return {
      chartsDataAttributes: {
        data: {
          popBgColor: '#1D4ED8',
          verticalLineColor: '#1D4ED8',
          colorGroup: [
            {
              colorPercentage: '#1D4ED8',
              name: 'segment-1',
              timePercentage: 0.1,
              title: '时段一',
              value: 1,
              color: '#1D4ED8',
              mode: '时段一',
              modeColor: '#1D4ED8'
            },
            {
              colorPercentage: '#15803D',
              name: 'segment-2',
              timePercentage: 0.5,
              title: '时段二',
              value: 2,
              color: '#15803D',
              mode: '时段二',
              modeColor: '#15803D'
            }
          ],
          times: ['06:00', '12:00', '18:00'],
          timesGroup: [
            {
              colorPercentage: '#6D28D9',
              titleColor: '#FFFFFF',
              nameColor: '#E0E7FF',
              valueColor: '#FFFFFF',
              name: 'tg-1',
              timePercentage: 0.1,
              title: '组一',
              value: 10,
              color: '#6D28D9',
              mode: '组一'
            },
            {
              colorPercentage: '#BE123C',
              titleColor: '#FFFFFF',
              nameColor: '#FCE7F3',
              valueColor: '#FFFFFF',
              name: 'tg-2',
              timePercentage: 0.6,
              title: '组二',
              value: 20,
              color: '#BE123C',
              mode: '组二'
            }
          ]
        }
      },
      chartStyle: {
        width: '750px',
        height: '210px'
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.updateChartsAttributes(this.chartsDataAttributes)
    })
  },
  watch: {
    chartsDataAttributes: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          this.updateChartsAttributes(val)
        })
      }
    }
  },
  methods: {
    updateChartsAttributes(attributes) {
      const cmp = this.$refs.horizonChartsButton
      if (cmp && typeof cmp.updateAttributes === 'function') {
        cmp.updateAttributes(attributes)
      }
    }
  }
}
</script>

Attributes

Prop	Type	Required	Default	Description
chartDate	Object	Y	-	图表数据配置
style	Object	Y	-	组件宽高

chartDate 数据结构

顶层属性

Prop	Type	Required	Default	Description
popBgColor	String	N	-	pop背景色
verticalLineColor	String	N	-	背景框左右两边竖线颜色
colorGroup	Array	N	-	颜色分组配置
times	Array	N	-	时间轴标签（字符串数组）
timesGroup	Array	N	-	时间段分组配置

colorGroup 颜色分组

Prop	Type	Required	Default	Description
colorPercentage	String	N	-	颜色百分比（hex色值）
name	String	N	-	名称
timePercentage	Number	N	-	时间占比
title	String	N	-	标题
value	Number	N	-	数值
color	String	N	-	颜色
mode	String	N	-	模式
modeColor	String	N	-	solid模式下的填充颜色

timesGroup 时间段分组

Prop	Type	Required	Default	Description
colorPercentage	String	N	-	颜色百分比（hex色值）
titleColor	String	N	-	背景框标题颜色
nameColor	String	N	-	背景框名称颜色
valueColor	String	N	-	背景框值颜色
name	String	N	-	名称
timePercentage	Number	N	-	时间占比
title	String	N	-	标题
value	Number	N	-	数值
color	String	N	-	颜色
mode	String	N	-	模式

Methods

方法名	说明	参数
updateAttributes	更新图表属性	attributes: 与 chartDate 同结构对象