test.vue 829 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view id="chart">
  3. </view>
  4. </template>
  5. <script>
  6. import Highcharts from 'highcharts'
  7. export default {
  8. data() {
  9. return {
  10. options: {
  11. chart: {
  12. type: 'bar' //指定图表的类型,默认是折线图(line)
  13. },
  14. title: {
  15. text: '我的第一个图表' // 标题
  16. },
  17. xAxis: {
  18. categories: ['苹果', '香蕉', '橙子'] // x 轴分类
  19. },
  20. yAxis: {
  21. title: {
  22. text: '吃水果个数' // y 轴标题
  23. }
  24. },
  25. series: [{ // 数据列
  26. name: '小明', // 数据列名
  27. data: [1, 0, 4] // 数据
  28. }, {
  29. name: '小红',
  30. data: [5, 7, 3]
  31. }]
  32. }
  33. }
  34. },
  35. onLoad() {
  36. HighCharts.chart("chart",options)
  37. },
  38. methods: {
  39. }
  40. }
  41. </script>
  42. <style lang="scss">
  43. #chart{
  44. width:750rpx;
  45. height:500rpx;
  46. }
  47. </style>