vue中使用v-charts

时间 2019-12-13

标签 vue 使用 charts 繁體版

原文原文链接

前段时间因为公司须要，产品临时安排任务，但愿尽快出一个实时数据统计的图表，因此综合考虑就没有用echarts自己，而是使用了经过vue封装过的v-charts，但愿能快速上手echarts,而后就有了这篇文章的实现过程。html

界面效果图

接下来按照上图红框从左到右从上到下一一讲解：vue

框1、环图占比

由于是用vue实现的，不但愿全部内容都写在一个组件里，因此上图的五个红框分别表明五个子组件；
目录以下：

├── src                    源码目录  
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          组件目录
│  │  └── common           公共组件
          └── classfiyRing.vue   框5
          └── hHistogram.vue     框4
          └── hLine.vue          框2
          └── hMap.vue           框3
          └── hRing.vue          框1复制代码

环图组件内容：

<!-- 环状 -->
<template>
  <div class="h-ring">
    <div class="ring-relative">
      <ve-ring
        class="ring-box"
        :data="chartData"
        :settings="chartSettings"
        height="112px"
        width="112px"
        :tooltip="tooltip"
        :extend="chartExtend"
      ></ve-ring>
      <span class="desc">{{percentage}}</span>
    </div>
    <p class="title">{{text}}</p>
  </div>
</template>

<script>
export default {
  data () {
    this.chartSettings = {
      dimension: 'name',
      metrics: 'value',
      label: {
        normal: {
          show: false
        }
      },
      radius: [
        '25', '40'
      ],
      offsetY: 56
    }
    return {
      tooltip: {
        trigger: 'none'
      },
      chartExtend: {
        legend: {
          show: false
        },
        color: ['#44F0FF', '#19355A']
      }
    }
  },
  props: {
    text: {
      type: String,
      required: true
    },
    chartData: {
      type: Object,
      required: true
    },
    percentage: {
      type: String,
      required: true
    }
  }
}
</script>复制代码

v-charts官方文档提到两点：

extend 属性，为了可以更方便的设置属性配置项等，能够经过extend属性实现对已配置好的内部属性进行单独的设置；
echarts options 属性，与echarts配置项对应的属性也被加到了组件上，用于直接覆盖options原有的对应属性；json
echarts options 属性以下：

grid: [object, array],
colors: array,
visualMap: [object, array],
dataZoom: [object, array],
toolbox: [object, array],
title: object,
legend: [object, array],
xAxis: [object, array],
yAxis: [object, array],
radar: object,
tooltip: object,
axisPointer: object,
brush: [object, array],
geo: object,
timeline: [object, array],
graphic: [object, array],
series: [object, array],
backgroundColor: [object, string],
textStyle: object,
animation: object复制代码

ve-ring组件相关配置项

settings，你们能够参考v-charts官方文档
data，你们能够参考v-charts官方文档
tooltip，你们能够参考echarts官方文档
extend，你们能够参考v-charts文档里的extend属性说明

ve-ring组件内各属性值细节说明：

settings内label做用是为了隐藏视觉引导线；
settings内radius做用是为了设置环图外半径与内半径；
settings内offsetY做用是为了设置纵向偏移量使环图居中；
tooltip是为了设置鼠标hover时不触发提示框；
extend内legend做用是为了隐藏展示不一样系列的标记；
extend内color做用是为了设置环图颜色；
props内text环图底部文字描述；
props内percentage表示环图中心百分比。

框2、折线图

折线图组件内容：bash

<!-- 折线图 -->
<template>
  <div class="h-line">
    <ve-line
      :data="chartData"
      :settings="chartSettings"
      height="250px"
      width="348px"
      :extend="chartExtend"
    ></ve-line>
  </div>
</template>

<script>
export default {
  data () {
    this.chartSettings = {
      metrics: ['新增门店'],
      dimension: ['日期'],
      scale: [true, true]
    }
    return {
      chartExtend: {
        series: {
          label: {
            normal: {
              show: true,
              color: '#90E23C',
              fontSize: 18
            }
          },
          symbolSize: 10,
          color: ['#44F0FF']
        },
        legend: {
          show: false
        },
        grid: {
          y: 10,
          y2: 50,
          left: 10,
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          splitLine: {
            show: false
          },
          position: 'left',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        }
      }
    }
  },

  props: {
    chartData: {
      type: Object,
      required: true
    }
  }
}
</script>复制代码

ve-line组件相关配置项

settings，你们能够参考v-charts官方文档
data，你们能够参考v-charts官方文档
extend，你们能够参考v-charts文档里的extend属性说明

ve-line组件内各属性值细节说明：

settings内scale做用是为了坐标刻度不会强制包含零刻度；
extend内series的label做用是为了显示每一个拐点数量；
extend内series的symbolSize做用是为了设置每一个拐点小圆点的大小；
extend内series的color做用是为了设置折线的颜色；
extend内legend的做用是为了隐藏展示不一样系列的标记；
extend内grid的做用是为了控制y轴密集程度；
extend内xAxis的做用是为了设置x轴字体、轴线样式；
extend内yAxis的做用是为了设置y轴字体、轴线样式；

框3、地图分布图

地图分布图组件内容：

<!-- 地图 -->
<template>
  <div class="h-map">
    <ve-map
      class="echarts-map"
      :data="chartData"
      :settings="chartSettings"
      height="600px"
      width="600px"
      :extend="chartExtend"
    ></ve-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartSettings: {
        position: 'china',
        metrics: ['门店数'],
        itemStyle: {
          normal: {
            borderColor: '#72F2FF',
            areaColor: '#7F8FA3',
            borderWidth: 2,
            shadowBlur: 1
          },
          emphasis: {
            borderColor: '#72F2FF',
            areaColor: '#19355A',
            borderWidth: 1,
            shadowBlur: 1
          }
        },
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              if (params.value) {
                return params.name + ' ' + params.value // 地图上展现文字 + 数值
              } else {
                return ''
              }
            },
            color: '#fff',
            backgroundColor: 'rgba(0, 15, 42, 0.3)',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: 12,
            padding: 4,
            borderRadius: 4
          },
          emphasis: {
            show: true,
            formatter: function (params) {
              if (params.value) {
                return params.name + ' ' + params.value // 地图上展现文字 + 数值
              } else {
                return ''
              }
            },
            color: '#44F0FF'
          }
        },
        zoom: 1,
        selectData: true,
        scaleLimit: {
          min: 1,
          max: 2
        },
        roam: true
      },
      chartExtend: {
        legend: {
          show: false
        },
        visualMap: [
          {
            type: 'continuous',
            left: 'left',
            top: 'bottom',
            calculable: true,
            text: ['高', '低'],
            inRange: {
              color: ['#4C627F', '#334C6D', '#19355A']
            },
            textStyle: {
              color: '#fff'
            }
          }
        ]
      }
    }
  },
  props: {
    chartData: {
      type: Object,
      required: true
    }
  }
}
</script>复制代码

ve-map组件相关配置项

settings，你们能够参考v-charts官方文档
data，你们能够参考v-charts官方文档
extend，你们能够参考v-charts文档里的extend属性说明

ve-map组件内各属性值细节说明：

settings内position做用是设置为中国地图；
settings内itemStyle做用是设置地图区域的多边形图形样式；
settings内label做用是设置地图各区域的描述；
settings内selectData做用是设置高亮显示数据对应位置；
settings内scaleLimit做用是设置滚轮缩放的极限控制；
settings内roam做用是设置开启鼠标缩放和平移漫游；
extend内legend做用是为了隐藏展示不一样系列的标记；
extend内visualMap做用是为了设置左下角的视觉映射组件。

为ve-map组件添加geo、series属性可设置涟漪特效动画，以下图：app

实现涟漪特效动画的关键代码以下：（感兴趣的能够本身实现，原本项目也须要作这个动画，可是当和区域地图结合的时候二者不能同时显示，目前尚未找到最佳方法，因此项目中舍弃了动画）echarts

<div id="app">
    <ve-map :tooltip="chartTooltip" :settings="chartSettings" :geo="chartGeo" :series="chartSeries" :data="chartData"></ve-map>
</div>
<script>
    new Vue({
        el: '#app',
        created: function() {
            this.chartTooltip = {
                formatter: function(v) {
                    var tpl = []
                    tpl.push(v.seriesName + '<br>')
                    tpl.push(v.name + '：' + v.value[2])
                    return tpl.join('')
                }
            }
            this.chartData = {
                columns: [],
                rows: []
            }
            this.chartSettings = {
                position: 'china'
            }
            this.chartSeries = [{
                name: 'pm2.5',
                type: 'effectScatter', // 'scatter'
                coordinateSystem: 'geo',
                symbolSize: 10,
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                data: [{
                    name: '吉林',
                    value: [126.57, 43.87, 10]
                }],
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ddb926'
                    }
                }
            }]
            this.chartGeo = {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            }
        }
    })
</script>复制代码

框4、柱状图

柱状图组件内容：

<!-- 柱状图 -->
<template>
  <div class="h-histogram">
    <h-title :text="'活跃门店走势图'"></h-title>
    <ve-histogram
      :data="chartData"
      :extend="chartExtend"
      width="328px"
      height="220px"
    ></ve-histogram>
    <div class="item">
      <h-title :text="'活跃门店排名'"></h-title>
      <ul class="city-list">
        <transition-group name="list" mode="out-in">
          <li class="city" v-for="item in realList" :key="item.id">
            {{item.name}}
          </li>
          <li class="city" v-if="realList.length >= 1 && realList.length < 2" :key="'one'"></li>
          <li class="city" v-if="realList.length >= 1 && realList.length < 3" :key="'two'"></li>
          <li class="city" v-if="realList.length >= 1 && realList.length < 4" :key="'three'"></li>
          <li class="city" v-if="realList.length >= 1 && realList.length < 5" :key="'four'"></li>
        </transition-group>
      </ul>
    </div>
  </div>
</template>

<script>
import HTitle from '@/components/common/hTitle'
export default {
  data () {
    return {
      chartExtend: {
        legend: {
          show: false
        },
        grid: {
          left: '5%',
          containLabel: true,
          top: '5%',
          bottom: '5%'
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          splitLine: {
            show: false
          },
          position: 'left',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: {
          type: 'bar',
          itemStyle: {
            normal: {
              color: 'rgba(68,240,255,1)'
            }
          }
        }
      },
      storeFlag: true,
      realList: [],
      timer3: null
    }
  },
  props: {
    chartData: {
      type: Object,
      required: true
    },
    storeList: {
      type: Array,
      required: true
    }
  },
  components: {
    HTitle
  },
  watch: {
    storeList (newVal, oldVal) {
      const that = this
      if (newVal.length > 0) {
        if (that.storeList.length > 5) {
          that.realList = that.storeList.slice(0, 5)
          that.timer3 = setInterval(() => {
            if (that.storeFlag) {
              that.realList = that.storeList.slice(5)
              that.storeFlag = false
            } else {
              that.realList = that.storeList.slice(0, 5)
              that.storeFlag = true
            }
          }, 5000)
        } else {
          that.realList = that.storeList
        }
      }
    }
  }
}
</script>复制代码

ve-histogram组件相关配置项

data，你们能够参考v-charts官方文档
extend，你们能够参考v-charts文档里的extend属性说明

ve-histogram组件内各属性值细节说明：

extend内legend做用是为了隐藏展示不一样系列的标记；
extend内grid的做用是为了控制x、y轴密集程度；
extend内xAxis的做用是为了设置x轴字体、轴线样式；
extend内yAxis的做用是为了设置y轴字体、轴线样式；
extend内series的做用是为了柱状条样式。

框5、环图占比二

环图组件内容：

<!-- 产品分类统计 -->
<template>
  <div class="classify-ring">
    <h-title :text="'产品分类统计'"></h-title>
    <ve-ring
      class="ring"
      :data="chartData"
      width="360px"
      height="160px"
      :settings="chartSettings"
      :extend="chartExtend"
    ></ve-ring>
  </div>
</template>

<script>
import HTitle from '@/components/common/hTitle'
export default {
  data () {
    this.chartSettings = {
      dimension: 'name',
      metrics: 'value',
      radius: [
        '35', '50'
      ],
      offsetY: 80,
      labelLine: {
        normal: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      label: {
        normal: {
          formatter: '{b}: {d}%',
          padding: [0, -10]
        }
      }
    }
    return {
      chartExtend: {
        legend: {
          show: false
        }
      }
    }
  },
  components: {
    HTitle
  },
  props: {
    chartData: {
      type: Object,
      required: true
    }
  }
}
</script>复制代码

ve-ring组件相关配置项

settings，你们能够参考v-charts官方文档
data，你们能够参考v-charts官方文档
extend，你们能够参考v-charts文档里的extend属性说明

ve-ring组件内各属性值细节说明：

settings内radius做用是为了设置环图外半径与内半径；
settings内offsetY做用是为了设置纵向偏移量使环图居中；
settings内labelLine做用是为了设置视觉引导线样式；
settings内label做用是为了重组视觉引导线上的文字描述；
extend内legend做用是为了隐藏展示不一样系列的标记。

结语

其实在作项目以前，本人是没有用过echarts的，就项目自己而言是有些畏惧的，怕作很差。但经过本身的摸索，尽量达到产品须要的效果，这也是我但愿作到的。最后的效果除了地图有点差强人意，其余基本都正常实现了，后面有时间再好好研究下地图涟漪动画的实现。之因此写这个文章，一是为了帮助那些没用过又须要上手echarts的朋友；二是为了记录本身的学习过程。读到这里，若是以为本文对你有所启发或帮助，请动动大家的手指，点个赞吧！ide

vue中使用v-charts

相关文档

界面效果图

框1、 环图占比

框2、折线图

框3、地图分布图

框4、柱状图

框5、环图占比二

结语

框1、环图占比