vue百分比图总结规律

1：package.json; "hchs-vue-charts": "^1.2.8", "chart.js": "^2.3.0",2:cnpm install3:main.js:全局引入import ChartJS from 'chart.js'import VueCharts from 'hchs-vue-charts'Vue

晴天Smile

3121人浏览 · 2017-08-05 11:26:12

晴天Smile · 2017-08-05 11:26:12 发布

1：package.json;

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

  "chart.js": "^2.3.0",

2:cnpm install

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