vue百分比图总结规律

1：package.json;

  "hchs-vue-charts":  "^1.2.8",

  "chart.js":  "^2.3.0",

2:cnpm install

3:

main.js:全局引入

import  ChartJS  from  'chart.js'

import  VueCharts  from  'hchs-vue-charts'

Vue. use( window. VueCharts)

import  ChartJS  from  'chart.js'

import  VueCharts  from  'hchs-vue-charts'

4：

< chartjs-line  class= "platform-chart" : labels= "compare" : datasets= "comparedata" : beginzero= "beginzero" : width= "mywidth" : height= "myheight" ></ chartjs-line >

   //折线图

data return 里的

         compare: [ "06-20",  "06-30",  "07-10",  "07-20",  "07-30"],  //折线图横坐标数据

         beginzero: true,

         mywidth :  300,

         myheight :  150,

         comparedata:[

          {

             label:  "投资人数",

             fill:  false,

             lineTension:  0,

             backgroundColor:  "#37C4E7",

             borderColor:  "#37C4E7",

             borderCapStyle:  'butt',

             borderDashOffset:  0.0,

             pointBorderWidth:  5,

             pointHoverRadius:  5,

             pointHoverBackgroundColor:  "#37C4E7",

             pointHoverBorderColor:  "#37C4E7",

             pointHoverBorderWidth:  2,

             pointHitRadius:  10,

             data: [ 11,  18,  14,  8,  13,  14],  //投资人数数据

             spanGaps:  false,

          },

          {

               label:  "借款人数",

               fill:  false,

               lineTension:  0,

               backgroundColor:  "#F29055",

               borderColor:  "#F29055",

               borderCapStyle:  'butt',

               borderDashOffset:  0.0,

               pointBorderWidth:  5,

               pointHoverRadius:  5,

               pointHoverBackgroundColor:  "#F29055",

               pointHoverBorderColor:  "#F29055",

               pointHoverBorderWidth:  2,

               pointHitRadius:  10,

               data: [ 9,  14,  13,  14,  20,  16],  //借款人数数据

               spanGaps:  false,

          },

        ],

地址：https://www.npmjs.com/package/hchs-vue-charts