vue-echarts (https://www.npmjs.com/package/vue-echarts/v/3.1.3)为VUE组件,支持ECharts图表绘制。
使用注意事项:
- 如果需要自适应容器大小,比如容器在Tab页内,可以在元素内添加属性:
:auto-resize='true'
。 - 如果想要调整ECharts风格,比如使用马卡龙风格,可以在元素内添加属性:
theme='macarons'
。务必要导入相应theme的js,对于马卡龙风格,需要:import 'echarts/theme/macarons'
,请参考 3。 - 除去基本属性,如果对图配置某属性,但在图上无法表现该属性时,很可能是未导入属性js导致。如未导入title,则即使配置了title,图上也不会出现title。导入示例如下:
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
- 如果需要动态更新数据,应该在更新series中的data后,执行clear()方法。