Line

线状图。

使用

  1. <m-line id="myLine" width="600" height="300" 
  2.   data="{
  3.     labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  4.     datasets: [{
  5.       label: '# of Votes',
  6.       data: [12, 19, 3, 5, 2, 3],
  7.       backgroundColor: 'rgba(255, 99, 132, .4)',
  8.       borderColor: 'rgb(255, 99, 132)',
  9.       borderWidth: 1
  10.     }]
  11.   }"
  13.   options="{
  14.     responsive: true,
  15.     title: {
  16.       display: true,
  17.       text: 'Omi-chart Line Chart'
  18.     },
  19.     tooltips: {
  20.       mode: 'index',
  21.       intersect: false
  22.     },
  23.     hover: {
  24.       mode: 'nearest',
  25.       intersect: true
  26.     },
  27.     scales: {
  28.       xAxes: [{
  29.         display: true,
  30.         scaleLabel: {
  31.           display: true,
  32.           labelString: 'Month'
  33.         }
  34.       }],
  35.       yAxes: [{
  36.         display: true,
  37.         scaleLabel: {
  38.           display: true,
  39.           labelString: 'Value'
  40.         }
  41.       }]
  42.     }
  43.   }">
  44. </m-line>

更新图表

  1. //获取该元素
  2. var chart = document.querySelector('#myLine')
  3. //更改图表的数据
  4. chart.props.data.datasets.forEach(dataset => {
  5.   dataset.data.forEach((item, index) => {
  6.     dataset.data[index] = Math.random() * 100
  7.   })
  8. })
  9. //更新图表视图
  10. chart.update()

API

Props

  1. {
  2.   data: object,
  3.   options: object,
  4.   width: number,
  5.   height: number
  6. }