知识点汇总

Vue

mixins

用于抽取公共代码

定义 mixins

import CommonCard from '../components/CommonCard/index'

export default {
  components: {
    CommonCard
  }
}

1
2
3
4
5
6
7

消费 mixins

<script>
  import commonCardMixin from '../../mixins/commonCardMixin'

  export default {
    mixins: [commonCardMixin]
  }
</script>

1
2
3
4
5
6
7

slot

用于定义资源位，允许父组件动态修改资源位

定义插槽

<div class="common-card">
  <div class="title">{{title}}</div>
  <div class="value">{{value}}</div>
  <div class="chart">
    <slot></slot>
  </div>
  <div class="line" />
  <div class="total">
    <slot name="footer"></slot>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11

使用插槽

<common-card
    title="累计销售额"
    value="¥ 32,039,165"
  >
  <template>
    <div class="total-sales-chart" />
  </template>
  <template v-slot:footer>
    <span>昨日销售额 </span>
    <span class="emphasis">¥ 30,000,000 </span>
  </template>
</common-card>

1
2
3
4
5
6
7
8
9
10
11
12

element-ui

el-row 和 el-col

el-row gutter 属性控制间距
el-col span 属性控制长度，总长度为 24

el-card

shadow=hover 鼠标悬浮时显示阴影

按需引用

安装 element-ui

vue add element

按需引用

import Vue from 'vue'
import { Card, Row, Col } from 'element-ui'

Vue.use(Card)
Vue.use(Row)
Vue.use(Col)

1
2
3
4
5
6

ECharts

Vue 引用 ECharts

定义

import ECharts from 'echarts'

Vue.prototype.$echarts = ECharts

1
2
3

消费

const chartDom = document.getElementById('today-users-chart')
const chart = this.$echarts.init(chartDom)
chart.setOption({
  // ...
})

1
2
3
4
5

series

隐藏线条

lineStyle: {
  width: 0
}

1
2
3

隐藏数据点

itemStyle: {
  opacity: 0
}

1
2
3

折线图填充面积区域颜色

areaStyle: {
  color: 'purple'
}

1
2
3

将折线图平滑显示

smooth: true

柱状图聚合

series: [{
  type: 'bar',
  stack: '总量',
  data: [100]
}, {
  type: 'bar',
  stack: '总量',
  data: [250]
}]

1
2
3
4
5
6
7
8
9

自定义绘图

{
  type: 'custom',
  stack: '总量',
  data: [100],
  renderItem: (params, api) => {
    const value = api.value(0)
    const endPoint = api.coord([value, 0])

    return {
      type: 'group',
      position: endPoint,
      children: [{
        type: 'path',
        shape: {
          d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
          x: -5,
          y: -20,
          width: 10,
          height: 10,
          layout: 'cover'
        },
        style: {
          fill: '#45c946'
        }
      }, {
        type: 'path',
        shape: {
          d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
          x: -5,
          y: 10,
          width: 10,
          height: 10,
          layout: 'cover'
        },
        style: {
          fill: '#45c946'
        }
      }]
    }
  }
}

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

xAxis

消除 x 轴两侧边距

boundaryGap: false

柱状图宽度

barWidth: '60%'
barWidth: 10

1
2

条形图

xAxis: {
  type: 'value'
},
yAxis: {
  type: 'category'
}

1
2
3
4
5
6

CSS

绘制三角形

.increase {
  width: 0;
  height: 0;
  border-width: 3px;
  border-color: transparent transparent red transparent;
  border-style: solid;
}

1
2
3
4
5
6
7

← 常见问题 Vue3.0 入门篇 →