# 9.2 折线图

<template>
  <div class="wrapper">
    <dof-minibar title="9.2 折线图" @click.native="reloadPage"></dof-minibar>
    <SwitchTheme />

    <scroller class="scroller">
      <div class="title-box">
        <text class="title-text">基础样式</text>
      </div>
      <div class="barchart-wrapper">
        <div class="chart-header">
          <text class="title-sub">曲线温度</text>
          <dof-button
            type="primary"
            pattern="plain"
            text="获取推荐曲线"
            size="small"
            :btnStyle="{ width: '222px', height: '56px', borderColor: 'rgba(255,255,255,0.40)' }"
            :textStyle="{ color: 'rgba(255,255,255,0.40)' }"
          ></dof-button>
        </div>
        <midea-linechart-view class="line-chart" :data="chartData0"></midea-linechart-view>
      </div>
      <div class="barchart-wrapper">
        <midea-linechart-view class="line-chart" :data="chartData1"></midea-linechart-view>
      </div>
      <div class="barchart-wrapper">
        <midea-linechart-view class="line-chart" :data="chartData2"></midea-linechart-view>
      </div>
      <div class="barchart-wrapper last-wrapper">
        <midea-linechart-view class="line-chart" :data="chartData3"></midea-linechart-view>
      </div>
    </scroller>
  </div>
</template>

<script>
// [1，30]区间的数字value
const nums = function() {
  let arr = []
  for (let i = 1; i <= 30; i++) {
    arr.push(i)
  }
  return arr
}

// 生成值为1-30字符串的labels
const labels = function() {
  let arr = []
  for (let i = 1; i <= 30; i++) {
    if (i === 2 || i === 10) {
      arr.push(i + '')
    } else {
      arr.push('')
    }
  }
  return arr
}

//随机生成[30,40]随机数
const randomNum = function() {
  let arr = []
  for (let i = 0; i < 30; i++) {
    var random = Math.floor(Math.random() * 10 + 30)
    arr.push(random)
  }
  return arr
}
const lowRandomNum = randomNum().map(x => x - 10)
console.log('num', randomNum())
console.log('lowRandomNum', lowRandomNum)
const isIos = weex.config.env.platform == 'iOS' ? true : false

import { DofMinibar, DofButton } from 'dolphin-weex-ui'
import SwitchTheme from 'src/components/SwitchTheme.vue'

export default {
  components: { DofMinibar, SwitchTheme, DofButton },
  data() {
    return {
      chartData0: {
        x: {
          value: [1, 2, 3, 4, 5, 6, 7, 8],
          label: ['1', '2', '3', '4', '5', '6', '7', '8']
        },
        y: [
          {
            value: [24, 26, 22, 28, 24, 26, 24, 26],
            lineWidth: 1, //折线宽度
            color: '#D7D7D7', //折线颜色
            starcolor: '#00ffffff', //区域背景渐变开始颜色（从下自上）
            endcolor: '#ccffffff', //区域背景渐变结束颜色（从下自上）
            smooth: 0, //0直线，1平滑
            lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
            isDrawCircles: true, //是否绘制圆圈  （5.12）
            isDrawCircleHole: true, //是否绘制圆内  （5.12）
            circleRadius: 11, //圆圈半径  （5.12）
            circleHoleRadius: 5, //圆内半径  （5.12）
            circleHoleColor: '#ccffffff', //圆圈颜色  （5.12）
            circleColor: '#4dffffff' //圆内颜色  （5.12）
          }
        ],
        unit: {
          x: '',
          y: ''
        },
        xAxisColor: '#1affffff', //x轴线的颜色，如果不设置，则默认是黑色线
        yAxisColor: '#00ffffff', //y轴线的颜色，如果不设置，则默认是黑色线
        yAxisGridAlpha: 0.1, //y轴上分割线透明度,安卓分割线的颜色不支持透明度，需要设置该属性
        xAxisLabelColor: '#66ffffff', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
        yAxisLabelColor: '#66ffffff', // label的字体颜色，如果不设置，则默认是黑色字体颜色
        xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
        yAxisGridLine: true, //iOS上默认关闭 设置是否开启y轴分割线绘制   add by lau
        yAxisGridColor: '#1affffff', //y轴上分割线颜色
        // yExtraInfoText: '(时)', //y轴开始位置显示的文本（8.8）
        // isShowYExtraInfo: true, //是否在y轴显示额外信息（8.8）
        yAxisMinimum: 15, //左y轴刻度最小值
        xAxisLabelTextSize: 12, //x轴文字大小
        yAxisLabelTextSize: 10, //y轴文字大小
        xAxisGridAlpha: 0, //x轴上分割线透明度
        yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
        isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
        granularity: 1, //间距本身是自适应的，可以使用该值进行调整间距的比例，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
        description: '',
        xAxisYOffset: 11, //x轴文字和x轴的距离
        legend: {
          position: 'TOP_LEFT', //"TOP_LEFT"/"TOP_RIGHT"
          orientation: 'HORIZONTAL' //"HORIZONTAL"/"BOTTOM_RIGHT"
        },
        legendHide: true, //是否需要隐藏legend，默认不隐藏
        yGraduationLabel: '°C',
        extraTopOffset: 16, //顶部padding(8.7)
        extraLeftOffset: 16, //左边padding(8.7)
        extraRightOffset: 24, //右边padding(8.7)
        extraBottomOffset: 16 //底部padding(8.7)
      },
      chartData1: {
        x: {
          value: [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],
          // label: [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]
          label: [
            '1',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '26'
          ]
        },
        y: [
          {
            value: [
              2,
              1.8,
              1.5,
              1.9,
              2.4,
              2.6,
              1.7,
              2,
              2.4,
              2.2,
              3,
              1.6,
              2,
              3,
              4,
              2,
              5,
              4,
              6,
              5,
              5.5,
              5.3,
              5.9,
              5.7,
              6,
              5.6
            ],
            lineWidth: 1, //折线宽度
            color: '#D7D7D7', //折线颜色
            starcolor: '#00ffffff', //区域背景渐变开始颜色（从下自上）
            endcolor: '#ccffffff', //区域背景渐变结束颜色（从下自上）
            smooth: 0, //0直线，1平滑
            lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false

            isVerticalHighlightIndicatorEnabled: true, //垂直高亮线是否显示，默认不显示（8.7）
            highLightColor: '#33ffffff', //高亮线的颜色（8.7）
            highLightLineWidth: 1, //高亮线的线宽（8.7）
            highLineDashAble: true //true-虚线，false-实线，默认是为false（8.7）
          }
        ],
        xAxisLabelHighLightColor: '#ccffffff', //x轴刻度选择后颜色
        xAxisLabelHighLightTextSize: 14, //x轴高亮label字体大小（8.23新增)
        xAxisColor: '#1affffff', //x轴线的颜色，如果不设置，则默认是黑色线
        yAxisColor: '#00ffffff', //y轴线的颜色，如果不设置，则默认是黑色线
        yAxisGridAlpha: 0.1, //y轴上分割线透明度,安卓分割线的颜色不支持透明度，需要设置该属性
        xAxisLabelColor: '#66ffffff', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
        yAxisLabelColor: '#66ffffff', // label的字体颜色，如果不设置，则默认是黑色字体颜色
        xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
        yAxisGridLine: true, //iOS上默认关闭 设置是否开启y轴分割线绘制   add by lau
        yAxisGridColor: '#1affffff', //y轴上分割线颜色   add by lau
        xAxisLabelTextSize: 12, //x轴文字大小
        yAxisLabelTextSize: 10, //y轴文字大小
        yAxisLabelCount: 5, //左y轴刻度数量
        yAxisMaximum: 8, //左y轴刻度最大值
        yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
        isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
        granularity: 1, //间距本身是自适应的，可以使用该值进行调整间距的比例，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
        description: '',
        xAxisYOffset: 11, //x轴文字和x轴的距离
        barSelectIndex: 11,
        legend: {
          position: 'TOP_LEFT', //"TOP_LEFT"/"TOP_RIGHT"
          orientation: 'HORIZONTAL' //"HORIZONTAL"/"BOTTOM_RIGHT"
        },
        legendHide: true, //是否需要隐藏legend，默认不隐藏
        yGraduationLabel: 'L',
        extraTopOffset: 36, //顶部padding(8.7)
        extraLeftOffset: 16, //左边padding(8.7)
        extraRightOffset: 24, //右边padding(8.7)
        extraBottomOffset: 30, //底部padding(8.7)
        signPost: {
          //底部界面  v5.8.0
          lineHeight: 1, //线条的高度
          lineColor: '#33ffffff', //标签线的颜色 如果不设置，则默认是黑色线
          linePointRadius: 2.5, //标签线上圆点的半径, 默认10
          lineMarginTop: 11, //线条距离X轴的距离
          lineMarginBottom: '5',
          cursorColor: '#ccffffff', //标签（三角形）的颜色 如果不设置，则默认是黑色线
          cursorMarginTop: '5', //标签（三角形）距离线条的距离
          cursorHigh: '12', //标签（三角形）本身高度
          cursorMarginBottom: '30',
          show: true, //默认是 false 是否显示底部界面
          showType: 'ends', //端点的显示样式，支持 all,ends,none 三种模式
          isSelectedDisappear: true, //是否标签 滑动到的端点消失不见
          isSelectedShake: true //选择后是否支持震动，默认不支持，因为震动体验问题，该功能仅ios支持 （5.10）
        }
      },
      chartData2: {
        x: {
          value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
          // label: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
          label: ['1', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '16']
        },
        y: [
          {
            value: [6, 7, 5, 6, 5, 2, 8, 5, 4, 3, 4, 6, 6.5, 5, 3, 2],
            title: '',
            color: '#D7D7D7', //折线颜色
            starcolor: '#00ffffff', //区域背景渐变开始颜色（从下自上）
            endcolor: '#ccffffff', //区域背景渐变结束颜色（从下自上）
            smooth: 0, //0直线，1平滑
            lineWidth: 1, //折线宽度
            isVerticalHighlightIndicatorEnabled: true, //垂直高亮线是否显示，默认不显示（8.7）
            highLightColor: '#33ffffff', //高亮线的颜色（8.7）
            highLightLineWidth: 1, //高亮线的线宽（8.7）
            highLineDashAble: true //true-虚线，false-实线，默认是为false（8.7）
          },
          {
            value: [3, 2.5, 2, 3, 4, 2, 3, 2.8, 2, 4, 7, 5, 6, 5.5, 6, 7],
            title: '',
            color: '#E7704C', //折线颜色
            starcolor: '#00E7704C', //区域背景渐变开始颜色（从下自上）
            endcolor: '#E7704C', //区域背景渐变结束颜色（从下自上）
            smooth: 0, //0直线，1平滑
            lineWidth: 1, //折线宽度

            isVerticalHighlightIndicatorEnabled: true, //垂直高亮线是否显示，默认不显示（8.7）
            highLightColor: '#33ffffff', //高亮线的颜色（8.7）
            highLightLineWidth: 1, //高亮线的线宽（8.7）
            highLineDashAble: true //true-虚线，false-实线，默认是为false（8.7）
          }
        ],
        xAxisLabelHighLightColor: '#ccffffff', //x轴刻度选择后颜色
        xAxisLabelHighLightTextSize: 14, //x轴高亮label字体大小（8.23新增)
        xAxisColor: '#1affffff', //x轴线的颜色，如果不设置，则默认是黑色线
        yAxisColor: '#00ffffff', //y轴线的颜色，如果不设置，则默认是黑色线
        yAxisGridAlpha: 0.1, //y轴上分割线透明度,安卓分割线的颜色不支持透明度，需要设置该属性
        xAxisLabelColor: '#66ffffff', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
        yAxisLabelColor: '#66ffffff', // label的字体颜色，如果不设置，则默认是黑色字体颜色
        xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
        yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制   add by lau
        xAxisGridColor: '#1affffff', //x轴上分割线颜色
        yAxisGridColor: '#1affffff', //y轴上分割线颜色   add by lau
        xAxisLabelTextSize: 12, //x轴文字大小
        yAxisLabelTextSize: 10, //y轴文字大小
        xAxisGridAlpha: 1, //x轴上分割线透明度
        yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
        isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
        granularity: 1, //间距本身是自适应的，可以使用该值进行调整间距的比例，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
        description: '',
        xAxisYOffset: 11, //x轴文字和x轴的距离
        barSelectIndex: 5,
        legend: {
          position: 'TOP_LEFT', //"TOP_LEFT"/"TOP_RIGHT"
          orientation: 'HORIZONTAL' //"HORIZONTAL"/"BOTTOM_RIGHT"
        },
        legendHide: true, //是否需要隐藏legend，默认不隐藏
        unit: {
          x: '',
          y: ''
        },
        signPost: {
          //底部界面  v5.8.0
          lineHeight: 1, //线条的高度
          lineColor: '#33ffffff', //标签线的颜色 如果不设置，则默认是黑色线
          linePointRadius: 2.5, //标签线上圆点的半径, 默认10
          lineMarginTop: 11, //线条距离X轴的距离
          lineMarginBottom: '5',
          cursorColor: '#B35336', //标签（三角形）的颜色 如果不设置，则默认是黑色线
          cursorMarginTop: '5', //标签（三角形）距离线条的距离
          cursorHigh: '12', //标签（三角形）本身高度
          cursorMarginBottom: '30',
          show: true, //默认是 false 是否显示底部界面
          showType: 'ends', //端点的显示样式，支持 all,ends,none 三种模式
          isSelectedDisappear: true, //是否标签 滑动到的端点消失不见
          isSelectedShake: true //选择后是否支持震动，默认不支持，因为震动体验问题，该功能仅ios支持 （5.10）
        },
        extraTopOffset: 36, //顶部padding(8.7)
        extraLeftOffset: 16, //左边padding(8.7)
        extraRightOffset: 24, //右边padding(8.7)
        extraBottomOffset: 16 //底部padding(8.7)
      },
      chartData3: {
        x: {
          value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          label: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          hideLabelMarks: [
            // x轴文本显隐配置 0：显示 1：隐藏
            0,
            1,
            1,
            1,
            1,
            1,
            1,
            1,
            1,
            0
          ]
        },
        y: [
          {
            value: [3, 5, 4, 2, 5, 6, 8, 7, 3, 8],
            title: '',
            lineWidth: 1, //折线宽度
            color: '#D7D7D7', //折线颜色
            starcolor: '#00ffffff', //区域背景渐变开始颜色（从下自上）
            endcolor: '#ccffffff', //区域背景渐变结束颜色（从下自上）
            smooth: 0, //0直线，1平滑
            lineDashAble: false, //曲线的类型可调: 是否使用虚线，默认false
            isVerticalHighlightIndicatorEnabled: true, //垂直高亮线是否显示，默认不显示（8.7）
            highLightColor: '#33ffffff', //高亮线的颜色（8.7）
            highLightLineWidth: 1, //高亮线的线宽（8.7）
            highLineDashAble: true //true-虚线，false-实线，默认是为false（8.7）
          },
          {
            value: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
            title: '',
            lineWidth: 1, //折线宽度
            color: '#80ffffff', //折线颜色
            smooth: 0, //0直线，1平滑
            lineSidesPointAble: false, //首尾可以设置是否有端点,默认false
            lineSidesPointRadius: 4, //端点大小，端点的半径值大小，lineSidesPointAble为ture有效
            lineSidesPointColor: '', //端点颜色，lineSidesPointAble为ture有效
            lineDashAble: true, //曲线的类型可调: 是否使用虚线，默认false
            isVerticalHighlightIndicatorEnabled: true, //垂直高亮线是否显示，默认不显示（8.7）
            highLightColor: '#33ffffff', //高亮线的颜色（8.7）
            highLightLineWidth: 1, //高亮线的线宽（8.7）
            highLineDashAble: true //true-虚线，false-实线，默认是为false（8.7）
          }
        ],
        xAxisLabelHighLightColor: '#ccffffff', //x轴刻度选择后颜色
        xAxisLabelHighLightTextSize: 14, //x轴高亮label字体大小（8.23新增)
        xAxisColor: '#1affffff', //x轴线的颜色，如果不设置，则默认是黑色线
        yAxisColor: '#00ffffff', //y轴线的颜色，如果不设置，则默认是黑色线
        yAxisGridAlpha: 0.1, //y轴上分割线透明度,安卓分割线的颜色不支持透明度，需要设置该属性
        xAxisLabelColor: '#66ffffff', //x label的字体颜色，如果不设置，则默认是黑色字体颜色
        yAxisLabelColor: '#66ffffff', // label的字体颜色，如果不设置，则默认是黑色字体颜色
        xAxisGridLine: false, //iOS上默认关闭 设置是否开启X轴分割线绘制
        yAxisGridLine: true, //iOS上默认关闭 设置是否开启X轴分割线绘制   add by lau
        // "xAxisGridColor" : "transparent", //x轴上分割线颜色
        yAxisGridColor: '#ffffff', //y轴上分割线颜色   add by lau
        xAxisLabelTextSize: 12, //x轴文字大小
        yAxisLabelTextSize: 10, //y轴文字大小
        // xAxisLabelHighLightSize:14,  //add by lau
        // xAxisGridAlpha: 0.5, //x轴上分割线透明度
        yAxisLabelShow: true, //是否只显示最大最小值，true: 显示y轴值；false: 不显示y轴值；默认true
        isUnEquelDistance: true, //iOS6.2新增不等距属性，默认打开（iOS专用）false关闭
        granularity: 1, //间距本身是自适应的，可以使用该值进行调整间距的比例，比如自适应间距是20px，granularity设置为2的时候，界面显示的间距为 40px
        description: '',
        barSelectIndex: 9,
        xAxisYOffset: 15, //x轴文字和x轴的距离
        legend: {
          position: 'TOP_LEFT', //"TOP_LEFT"/"TOP_RIGHT"
          orientation: 'HORIZONTAL' //"HORIZONTAL"/"BOTTOM_RIGHT"
        },
        legendHide: true, //是否需要隐藏legend，默认不隐藏
        unit: {
          x: '', //单位
          y: ''
        },

        signPost: {
          //底部界面  v5.8.0
          lineHeight: 1, //线条的高度
          lineColor: '#33ffffff', //标签线的颜色 如果不设置，则默认是黑色线
          linePointRadius: 2.5, //标签线上圆点的半径, 默认10
          lineMarginTop: 11, //线条距离X轴的距离
          lineMarginBottom: '5',
          cursorColor: '#ccffffff', //标签（三角形）的颜色 如果不设置，则默认是黑色线
          cursorMarginTop: '5', //标签（三角形）距离线条的距离
          cursorHigh: '12', //标签（三角形）本身高度
          cursorMarginBottom: '30',
          show: true, //默认是 false 是否显示底部界面
          showType: 'ends', //端点的显示样式，支持 all,ends,none 三种模式
          isSelectedDisappear: false, //是否标签 滑动到的端点消失不见
          isSelectedShake: true //选择后是否支持震动，默认不支持，因为震动体验问题，该功能仅ios支持 （5.10）
        },
        yGraduationLabel: 'L',
        extraTopOffset: 16, //顶部padding(8.7)
        extraLeftOffset: 16, //左边padding(8.7)
        extraRightOffset: 24, //右边padding(8.7)
        extraBottomOffset: 16 //底部padding(8.7)
      }
    }
  },
  created() {
    /**
     * 设置图表背景色，
     *ios有bug，需要用css设置。
     * 安卓正常，安卓不能用css设置,需要用配置
     */
    if (!isIos) {
      this.chartData0.background = '#9943464d'
      this.chartData1.background = '#9943464d'
      this.chartData2.background = '#9943464d'
      this.chartData3.background = '#9943464d'
    }
  },
  methods: {
    reloadPage() {
      this.$bridge.reload()
    },
    getTime(type) {
      var now = new Date()
      var month = now.getMonth() //得到月份
      var date = now.getDate() //得到日期
      var day = now.getDay() //得到周几
      switch (type) {
        case 'month':
          return now.getMonth()
          break
        case 'date':
          return now.getDate()
          break
        default:
          return now.getDay()
          break
      }
    }
  }
}
</script>

<style scoped>
@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
}
.wrapper {
  width: 750px;
  background-color: #ffffff;
  align-items: center;
}
.title-box {
  padding: 32px;
  background-color: #e5e5e8;
  margin-bottom: 32px;
}
.title-text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  font-weight: 500;
}
.chart-header {
  flex-direction: row;
  background: rgba(67, 70, 77, 0.6);
  justify-content: space-between;
  align-items: center;
  padding: 36px 36px 0 36px;
}
.title-sub {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}
.barchart-wrapper {
  flex-direction: column;
  justify-content: center;
  margin-bottom: 16px;
}

.line-chart {
  width: 750px;
  height: 648px;
  background: rgba(67, 70, 77, 0.6);
}
.last-wrapper {
  margin-bottom: 200px;
}
</style>