fulink-datav-libs

v1.1.11

Published

3 years ago

fulink datav components library

Downloads

0High
0Medium
0Low

windyld

vue fulink datav

const salesListMockData = [{"order":"北京 -10%","shop":"北京 -19%","rider":"北京 -12%","newShop":"北京 -17%","avgOrder":"北京 -8%"},{"order":"上海 +19%","shop":"上海 -7%","rider":"上海 +6%","newShop":"上海 +7%","avgOrder":"上海 +21%"},{"order":"广州 -6%","shop":"广州 -5%","rider":"广州 +23%","newShop":"广州 -22%","avgOrder":"广州 +12%"},{"order":"深圳 -19%","shop":"深圳 -14%","rider":"深圳 -13%","newShop":"深圳 +7%","avgOrder":"深圳 -7%"},{"order":"南京 -22%","shop":"南京 -7%","rider":"南京 -7%","newShop":"南京 +16%","avgOrder":"南京 -8%"},{"order":"杭州 +15%","shop":"杭州 +9%","rider":"杭州 -10%","newShop":"杭州 -11%","avgOrder":"杭州 +7%"},{"order":"合肥 -8%","shop":"合肥 -5%","rider":"合肥 +9%","newShop":"合肥 -7%","avgOrder":"合肥 -12%"},{"order":"济南 +20%","shop":"济南 +8%","rider":"济南 +16%","newShop":"济南 +3%","avgOrder":"济南 -12%"},{"order":"太原 +8%","shop":"太原 -4%","rider":"太原 +5%","newShop":"太原 +10%","avgOrder":"太原 +25%"},{"order":"成都 -7%","shop":"成都 +19%","rider":"成都 -24%","newShop":"成都 +13%","avgOrder":"成都 -3%"},{"order":"重庆 +4%","shop":"重庆 -24%","rider":"重庆 +12%","newShop":"重庆 +9%","avgOrder":"重庆 +4%"},{"order":"苏州 +16%","shop":"苏州 -8%","rider":"苏州 +19%","newShop":"苏州 -17%","avgOrder":"苏州 -15%"},{"order":"无锡 +15%","shop":"无锡 +12%","rider":"无锡 +20%","newShop":"无锡 -13%","avgOrder":"无锡 -20%"},{"order":"常州 -18%","shop":"常州 -19%","rider":"常州 +15%","newShop":"常州 +5%","avgOrder":"常州 +8%"},{"order":"温州 -21%","shop":"温州 +20%","rider":"温州 +8%","newShop":"温州 -21%","avgOrder":"温州 +11%"},{"order":"哈尔滨 -19%","shop":"哈尔滨 -17%","rider":"哈尔滨 -9%","newShop":"哈尔滨 -23%","avgOrder":"哈尔滨 +18%"},{"order":"长春 -2%","shop":"长春 +18%","rider":"长春 -20%","newShop":"长春 -4%","avgOrder":"长春 -24%"},{"order":"大连 +22%","shop":"大连 -15%","rider":"大连 -6%","newShop":"大连 -16%","avgOrder":"大连 +9%"},{"order":"沈阳 -15%","shop":"沈阳 -8%","rider":"沈阳 -17%","newShop":"沈阳 +14%","avgOrder":"沈阳 -14%"},{"order":"拉萨 -4%","shop":"拉萨 -17%","rider":"拉萨 -17%","newShop":"拉萨 +19%","avgOrder":"拉萨 -21%"},{"order":"呼和浩特 -10%","shop":"呼和浩特 +15%","rider":"呼和浩特 +17%","newShop":"呼和浩特 +21%","avgOrder":"呼和浩特 +11%"},{"order":"武汉 +15%","shop":"武汉 -12%","rider":"武汉 +18%","newShop":"武汉 +15%","avgOrder":"武汉 -7%"},{"order":"南宁 -17%","shop":"南宁 -13%","rider":"南宁 -23%","newShop":"南宁 -13%","avgOrder":"南宁 -14%"}]

const config = ref({})
const data = []
const headerIndexData = []
const aligns = []

for (let i = 0; i < props.data.length; i++) {
    data[i] = []
    if (i % 2 === 0) {
        headerIndexData[i] = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background: rgb(40,40,40)">
            <div style="width:15px;height:15px;background:rgb(72,122,72);border-radius:50%;border:1px solid #fff;"/>
          </div>`
    } else {
        headerIndexData[i] = `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background: rgb(40,40,40)">
            <div style="width:15px;height:15px;background:rgb(38,88,104);border-radius:50%;border:1px solid #fff;"/>
          </div>`
    }

    for (let j = 0; j < 5; j++) {
        aligns.push('center')
        let text = ''
        switch (j) {
            case 0: // 第一列数据
                text = props.data[i].order
                break
            case 1: // 第二列数据
                text = props.data[i].shop
                break
            case 2: // 第三列数据
                text = props.data[i].rider
                break
            case 3: // 第四列数据
                text = props.data[i].newShop
                break
            case 4: // 第五列数据
                text = props.data[i].avgOrder
                break
            default:
                break
        }
        if (j === 1 || j === 3) {
            data[i].push(`<div style="color: rgb(178,209,126)">${text}</div>`)
        } else {
            data[i].push(`<div>${text}</div>`)
        }
    }
}

config.value = {
    headerData: ['城市订单量', '店铺数', '接单骑手人数', '新店铺数量', '人均订单量'],
    headerBg: 'rgb(80,80,80)',
    headerHeight: 55,
    headerFontSize: 24,
    headerIndex: true,
    headerIndexContent: '',
    headerIndexData,
    rowNum: 10,
    rowBg: ['rgb(40,40,40)', 'rgb(55,55,55)'],
    rowColor: '#FFF',
    rowFontSize: 24,
    data,
    aligns
}

return {
    config
}

效果图

API

 <count-to :startVal='startVal' :endVal='endVal' :duration='3000' />

e.g.

<template>
  <div class="count-to">
    <count-to
      :startVal='startVal'
      :endVal='endVal'
      :duration='3000'
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      startVal: 0,
      endVal: 2021
    }
  }
}
</script>

<style lang="scss" scoped>
.count-to{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 42px;
  font-weight: 700;
}
</style>

效果图

API

注意：当autoplay：true时，它将在startVal或endVal更改时自动启动**

功能

  <transform-category :data="['ALL','北京','上海','杭州','南京','武汉']"/>

效果图

API

| 属性 | 说明 | 默认值| | :-------- | :-------- | :-- | | data | 数据源 Array | []| | color |颜色 Array ([0]选中颜色;[1]hover颜色)| [] | | duration |切换时间间隔 | 2000 |

注意：
这里用的echarts版本是5.1.1；
option里面配置参数可以根据实际需求配置不同类型的图表。

 <vue-echarts :option="option"/>

e.g.

<template>
  <vue-echarts :option="option"/>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const option = ref({})

    option.value = {
      xAxis: {},
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [10, 15, 20, 25, 30]
        }
      ]
    }

    return {
      option
    }
  }
}
</script>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

目录

效果图

效果图

API

效果图

API

效果图

API

功能

效果图

API

效果图