bar01.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <div class="chart" :id="id"></div>
  3. </template>
  4. <script lang="ts">
  5. import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
  6. import * as echarts from 'echarts';
  7. type EChartsOption = echarts.EChartsOption;
  8. @Component
  9. export default class Bar02 extends Vue {
  10. id=this.randomString();
  11. mounted(){
  12. this.init()
  13. }
  14. randomString(){
  15. const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  16. let result = '';
  17. for (let i = 10; i > 0; --i)
  18. result += str[Math.floor(Math.random() * str.length)];
  19. return result;
  20. }
  21. init(){
  22. let chartDom:any = document.getElementById(this.id);
  23. let myChart = echarts.init(chartDom);
  24. let option: EChartsOption;
  25. option = {
  26. title: {
  27. text: '每月订单量',
  28. left: 'center'
  29. },
  30. xAxis: {
  31. type: 'category',
  32. data: ['7月', '8月', '9月', '10月', '11月', '12月', '1月','2月','3月','4月','5月','6月']
  33. },
  34. yAxis: {
  35. type: 'value'
  36. },
  37. series: [
  38. {
  39. data: [0, 0, 0, 0, 0, 0, 0, 0, 0,100,460,600],
  40. type: 'bar',
  41. showBackground: true,
  42. backgroundStyle: {
  43. color: 'rgba(180, 180, 180, 0.2)'
  44. },
  45. itemStyle: {
  46. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  47. { offset: 0, color: '#83bff6' },
  48. { offset: 0.5, color: '#188df0' },
  49. { offset: 1, color: '#188df0' }
  50. ])
  51. }
  52. }
  53. ]
  54. };
  55. option && myChart.setOption(option);
  56. }
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. .chart{
  61. height: 100%;
  62. width: 100%;
  63. }
  64. </style>