每天记录一个知识点（vue中使用echarts）

vue中使用echarts

不废话直接上过程（打卡：2020-12-17 ）

一、安装charts

// 最新版5.0.0的好像不兼容，建议安装4.9.0的
cnpm install echarts@4.9.0 -S

二、main.js 中引用

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

三、使用

<template>
  <div id="myChart" style="width:100%;height:300px">
  </div>
</template>

<script>
  export default {
    
    
    name:'test',
    data(){
    
    
      return {
    
    }
    },
    mounted() {
    
    
       //初始化echarts实例
       let lineChart = this.$echarts.init(document.getElementById('myChart')),
         option = {
    
    
	        xAxis: {
    
    
	        type: 'category',
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	        },
	        yAxis: {
    
    
	            type: 'value'
	        },
	        series: [{
    
    
	            data: [820, 932, 901, 934, 1290, 1330, 1320],
	            type: 'line'
	        }]
	      };
	   //绘制图表
       lineChart.setOption(option);
      //监听窗口变化重新绘制表格大小,建议加上
      window.addEventListener('resize',function() {
    
    lineChart.resize()});
      }
    }
  }
</script>
<style scoped></style>

四、效果

笔记：

charts 官方地址