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,
 
            },
 
          ],

vue百分比图总结规律

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