Echarts在vue中使用:
- 先是需要引入,引入第三方库就行;(引入echarts之前,需引入jQuery的第三方库)
- 然在组件中使用:
构建一个有宽高容器,用于画图表,并且带有id:
<div class="chartsdom" id="bar_chart"></div>(该容器的宽高在style中规定,一定要有,不然图表不会显示出来)
然后在<script>中的methods构建一个方法作图:
getChart() {
var chartDom = document.getElementById('bar_chart');
var myChart = echarts.init(chartDom);
var option;
option = {
//一些画图规则
};
option && myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
}
最后执行该方法,在mounted中:this.getChart()。