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