Echarts在Vue2中的使用

1.安装echarts

echarts官方地址:echarts.apache.org/zh/index.ht…

//安装echarts
npm install echarts --save

然后在main.js中引入

//引入
import echarts from 'echarts'
//将echarts添加到vue的原型上
Vue.prototype.$echarts = echarts

2.创建图表

1.创建图表容器

//一定要设置宽高,且宽高必须是行内样式，单位必须是px
<template>
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>

2.绘制图表

<script>
        export default {
             data() {
                    return {

                   }
              },
             //钩子函数
             mounted(){
                   this.draw();
             },
             methods: {
                   draw(){
                       // 初始化echarts实例
                        let myChart = this.$echarts.init(document.getElementById('myChart'))
                       // 绘制图表
                       var option = {
                            //echarts官方示例代码
                       }
                       //防止越界，重绘canvas，解决掉屏幕缩小，图表不会随之适应的缩小的方法
                       window.onresize = myChart.resize;
                       //设置option
                       myChart.setOption(option);
                   }
              }
         }
</script>

option={}处具体看echarts官方的示例代码和文档的配置项的使用