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. }"
  12. options="{
  13. responsive: true,
  14. title: {
  15. display: true,
  16. text: 'Omi-chart Line Chart'
  17. },
  18. tooltips: {
  19. mode: 'index',
  20. intersect: false
  21. },
  22. hover: {
  23. mode: 'nearest',
  24. intersect: true
  25. },
  26. scales: {
  27. xAxes: [{
  28. display: true,
  29. scaleLabel: {
  30. display: true,
  31. labelString: 'Month'
  32. }
  33. }],
  34. yAxes: [{
  35. display: true,
  36. scaleLabel: {
  37. display: true,
  38. labelString: 'Value'
  39. }
  40. }]
  41. }
  42. }">
  43. </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. }