v-charts的简单使用

简介： v-charts 是基于 Vue2.0 和 Echarts 封装的图标组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，就可以生成常见的图表。
v-charts 文档
echarts 文档

安装

npm i v-charts echarts -S

使用

完整引入

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})

按需引入

项目中我们一般使用按需引入，只需要引入自己使用的图表文件即可
v-charts 中的每种图表组件，都已经单独打包到 lib 文件夹下了

// main.js
import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'

Vue.component(VeLine.name, VeLine)

new Vue({
  el: '#app',
  render: h => h(App)
})

文件中使用

<template>
  <div>
    <ul>
      <li><a href="javascript:void(0);" v-for="(item, key) in activeTabs" :key="key" :class="{selected: key === activeTab}" @click="changeTab(key)">{{item.name}}</a></li>
    </ul>
    <div class="content">
      <div v-show="activeTab === 'line'">
        <ve-line :data="chartData" :extend="chartExtend" ref="chartline"></ve-line>
      </div>
      <div v-show="activeTab === 'histogram'">
        <ve-histogram :data="chartData" ref="charthistogram"></ve-histogram>
      </div>
      <div v-show="activeTab === 'pie'">
        <ve-pie :data="chartDataPie" :settings="chartSettings" ref="chartpie"></ve-pie>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vLine',
  data() {
    this.chartSettings = {
      roseType: 'radius'
    }
    this.chartExtend = {
      series: {
        smooth: false,  // 将曲线变为直线
        type: 'line'
      },
      color:['#E4004F','#64C9FA']
    }
    return {
      activeTab: 'line',
      activeTabs: {
        line: {
          name: '折线图',
          value: ''
        },
        histogram: {
          name: '柱状图',
          value: ''
        },
        pie: {
          name: '饼图',
          value: ''
        }
      },
      chartData: {
        columns: [],
        rows: []
      },
      chartDataPie: {
        columns: [],
        rows: []
      }
    }
  },
  methods: {
    changeTab(key) {
      this.activeTab = key
      if (key === 'line' || key === 'histogram') {
        this.getChartData()
      } else if (key === 'pie') {
        this.getChartDataPie()
      }
    },
    getChartData() {
      this.$axios('/charts/getOne').then(res => {
        if (res.data.code === 200) {
          this.chartData.columns = res.data.data.label
          this.chartData.rows = res.data.data.value
        }
      })
    },
    getChartDataPie() {
      this.$axios('/charts/getTwo').then(res => {
        if (res.data.code === 200) {
          this.chartDataPie.columns = res.data.data.label
          this.chartDataPie.rows = res.data.data.value
        }
      })
    }
  },
  created() {
    this.getChartData()
  },
  // 在一个初始宽度未知的容器内绘制图表时，因为无法获取宽度，所以图表会绘制失败，解决的办法是在容器宽度已知后， 调用echarts的resize方法。
  watch: {
    // 这种方式的监听，在切换 tab 栏时，图表不会变化
    activeTab(v) {
      this.$nextTick(() => {
        this.$refs[`chart${v}`].echarts.resize()
      })
    }
  // 这种方式的监听，在切换 tab 栏时，图表会动态变化
    // activeTab() {
    //   this.$nextTick(() => {
    //     this.$refs.chartline.echarts.resize()
    //     this.$refs.charthistogram.echarts.resize()
    //     this.$refs.chartpie.echarts.resize()
    //   })
    // }
  }
}
</script>

<style scoped>
.selected {
  color: red;
  border: 1px solid red;
  padding: 4px;
}
</style>

使用的是 mock 来传递数据

import Mock from 'mockjs'
Mock.mock('/charts/getOne', 'get', {
    code: 200,
    data: {
        label: ['日期', '销售额-1季度', '销售额-2季度'],
        value: [
            {'日期': '1月1日', '销售额-1季度': 1523, '销售额-2季度': 3523},
            {'日期': '1月2日', '销售额-1季度': 3533, '销售额-2季度': 1232},
            {'日期': '1月3日', '销售额-1季度': 2523, '销售额-2季度': 9768},
            {'日期': '1月4日', '销售额-1季度': 4588, '销售额-2季度': 5252},
            {'日期': '1月5日', '销售额-1季度': 5632, '销售额-2季度': 2536},
            {'日期': '1月6日', '销售额-1季度': 6773, '销售额-2季度': 4454},
        ]
    }
})
Mock.mock('/charts/getTwo', 'get', {
    code: 200,
    data: {
        label: ['日期', '访问用户'],
        value: [
        { '日期': '1/1', '访问用户': 1393 },
        { '日期': '1/2', '访问用户': 3530 },
        { '日期': '1/3', '访问用户': 2923 },
        { '日期': '1/4', '访问用户': 1723 },
        { '日期': '1/5', '访问用户': 3792 },
        { '日期': '1/6', '访问用户': 4593 }
        ]
    }
})