プロジェクトでechartsを使用する

Apache ECharts

echarts公式サイト

1.プロジェクトで最初にechartsをダウンロードします

cnpm i echarts --save

2.main.jsで紹介して使用します

//引用castartsimport
* as castarts from'echarts';
//UsingechartsVue.prototype。$echarts=
echorts;

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);
      }