在项目中使用 echarts

Apache ECharts

echarts官网

1.先在项目中下载 echarts

cnpm i echarts --save

2.在 main.js 中 引入 并使用

//引用 echarts
import * as echarts from 'echarts';
//使用echarts
Vue.prototype.$echarts = echarts;

3.在视图层留下放置可视化图表的盒子，起id名

（注意，这个盒子必须有高度）

<div class="charts_box" id="myChart"></div>

4.在方法中心定义一个方法，并在生命周期函数中调用

  methods: {
      drawLine(){
     
      }
  },

//在生命周期函数中调用  
mounted() {
      this.drawLine();
  }

5.在定义的方法中抓取放置可视化图表的容器

 drawLine(){
        //   抓取放置可视化图表的容器
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        
      }

6.抓取容器后，配置指定图表的配置项和数据

 drawLine(){
        //   抓取放置可视化图表的容器
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        
        // 指定图表的配置项和数据（视图内容）
        let option = {
        // 这里面的内容就是echarts官网提供的图表的数据和配置项
        }
      }

7.使用刚指定的配置项和数据显示出图表

 drawLine(){

        let myChart = this.$echarts.init(document.getElementById('myChart'));

        let myChart1 = this.$echarts.init(document.getElementById('myChart1'));

        let option = {

        }

        let option1 = {

        }

        // 使用刚指定好的配置项和数据显示图表
        myChart.setOption(option);
        myChart1.setOption(option1);
      }