1. 数据问题,不像官方实例所提供的数据直接写在options对应的数据源里,开发中应当是后端接口请求过来的数据,一般来说,会将echarts图标抽成组件的形式,需要的数据源通过父组件传给子组件,但是遇到的问题就是,图表会木有数据的问题(图表会展示出来,但是没有数据,尴尬),这是因为echats实例在dom渲染前没有拿到数据,在子组件中使用watch侦听父组件传过来的数据即可,如果有再挂载dom,这样就做到了页面没数据的问题
2. 图表响应式的问题,因为echarts图表是canvas画布生成的,所以说在创建都没元素的时候就应当指定宽高,但是直接将style属性写死宽高做不到图表的响应式,这时候通过父组件获取到图表的父级宽高传给子组件绑定,然后使用window.onresize() 方法的回调设置响应式图表
父组件:
1 <template> 2 <div class="home" ref="home"> 3 <echarts :widthheight="style" :echartsData="echartsData"></echarts> 4 </div> 5 </template> 6 7 <script> 8 import echarts from "../components/echarts"; 9 export default { 10 components: { 11 echarts 12 }, 13 data() { 14 return { 15 style: { 16 "", 17 height: "250px" 18 }, 19 echartsData: {} //图的数据 20 }; 21 }, 22 created() { 23 this.echartsData = { 24 X: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 25 Y: [820, 932, 901, 934, 1290, 1330, 1320] 26 }; 27 }, 28 mounted() { 29 this.style.width = this.$refs["home"].offsetWidth; //获取父元素的宽度 30 } 31 }; 32 </script> 33 34 <style> 35 .home { 36 margin: 50px; 37 border: 1px solid grey; 38 height: 300px; 39 } 40 </style>
子组件:
<template> <div ref="var_echarts" :style="widthheight"></div> </template> <script> export default { props: ["widthheight", "echartsData"], data() { return { myChart: {} //用来保存echarts图这个实例 }; }, watch: { echartsData: function(newval, oldval) { if(newval) { this.drawBar(); } } }, mounted() { this.$nextTick(() => { this.drawBar(); }); window.onresize = () => { this.myChart.resize(); //跟对屏幕的宽度变化而变化 }; }, methods: { drawBar() { this.myChart = this.$echarts.init(this.$refs.var_echarts); this.myChart.setOption({ xAxis: { type: "category", data: this.echartsData.X // }, yAxis: { type: "value" }, series: [ { data: this.echartsData.Y, // type: "line" } ] }); } } }; </script>