Vue Morris
made with Vuejs

简介及使用教程

Vue Morris是图标库Morris.js的Vue.js包装器。Morris.js是一个简单易用的图表库,目前支持线形图、面积图、柱状图及环形图。

安装

Npm

npm i vue-morris

Yarn

yarn add vue-morris

除此之外需要在package.json中声明jQuery:

"peerDependencies": {
    "jQuery": "^3.0.0"
  },

而且如果你使用Webpack你需要在webpack.config.js中配置:

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'jquery': 'jquery/src/jquery.js'
    }
  },

使用

引入

import Raphael from 'raphael/raphael'
global.Raphael = Raphael

import Vue from 'vue'
import { DonutChart } from 'vue-morris'

new Vue({
  el: '#app',

  data: {
    donutData: [
      { label: 'Red', value: 300 },
      { label: 'Blue', value: 50 },
      { label: 'Yellow', value: 100 }
    ],

    components: {
    DonutChart, BarChart, LineChart, AreaChart
  }
})

在组件中使用:

<donut-chart 
  id="donut" 
  :data="donutData" 
  colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]' 
  resize="true">
</donut-chart>

示例

柱状图

image.png

线形图

image.png

面积图

image.png

环状图

image.png

作者

Bruno Bonnin

@_bruno_b_

相关项目

这是ApexCharts的Vue.js组件。
这是一个基于Vue.js的简单趋势图。
这是一个Gantt图表组件。
这是一个Vue.js的官方Highcharts包装器。
这是一个SVG漏斗图库。
这是一个 Vue 对于 Chart.js 的封装。