vue百分比图总结规律

来源：互联网发布：虚拟立铣编程编辑：程序博客网时间：2024/06/07 07:08

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

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

阅读全文

0 0