Echart.vue 697 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <canvas canvas-id="chart" ref="chart" :style="{width: '100%', height}"></canvas>
  3. </template>
  4. <script>
  5. import * as echarts from '@/packageA/static/js/echarts.js';
  6. export default {
  7. props:{
  8. ec:{
  9. type:Object
  10. },
  11. height:{
  12. type:String,
  13. default:'300px'
  14. }
  15. },
  16. watch: {
  17. 'ec.option': {
  18. handler(val) {
  19. if (val) {
  20. this.chart.setOption(val);
  21. }
  22. },
  23. deep: true
  24. }
  25. },
  26. mounted() {
  27. this.init()
  28. },
  29. data() {
  30. return {
  31. };
  32. },
  33. methods:{
  34. init(){
  35. this.chart = echarts.init(this.$refs.chart.$el);
  36. }
  37. }
  38. };
  39. </script>
  40. <style scoped>
  41. .uni-ec-canvas {
  42. width: 100%;
  43. height: 600upx;
  44. display: block;
  45. }
  46. </style>