Vueでechartを使用する最も簡単な方法

6820 ワード
echart vue アパッチ アパッチグラフ テキストリンク
VUEでプロジェクトを行う際に遭遇する最大のジョブは차트のようです.
Googleをプレイしている間に本当に出てこなかったのは차트についての説明で、実際にはユーザーインタフェースではあまり展示されていませんが、管理者インタフェースでは必ず加入しなければならない要素なので、最初は大変でした.
実際には、amChart、echart、chartjsなど非常に良いライブラリがありますが、基本スタイルの違いやハンドルに違いがあります.コード長から見ると、amChartは最も長く、最も複雑で、最も文句を言っているが、個人的な観点から見ると、特定のイベントに最も与えやすい.echartの場合、個別のサンプルアクティビティのような複雑な設定は不可能です(2週間苦労するかもしれませんが)、グラフはとてもきれいで、特別な機能がなければ、とてもよく使われるグラフの一つです!echartをvueに簡略化する方法
👉 echartインストール
npm i echarts
👉 スクリプト
<script>
  import * as echarts from "echarts"; //echart를 전역으로 불러옴
  
  export default {
  	name:'',
    data(){
    	option :[], //옵션 넣기
    },
    mounted(){
      var chartDom = document.getElementById('차트 id');
    
      var myChart = echarts.init(chartDom);
      
      if (myChart != null && myChart != '' && myChart != undefined) {
        myChart.dispose(); //차트돔이 먼저 생성된 경우 기존 돔을 삭제해준다
      }
      
      myChart = echarts.init(chartDom);
      
      var option;

      option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '10px',
          width: '300px',
        },
        series: this.series, //속성들은 echart 에 잘 나와있으니 설명을 보고 넣으면 된다
      };

      option && myChart.setOption(option);
      
      //윈도우 사이즈가 변경될때마다 resize되도록 설정해준다
      window.onresize = function () {
        myChart.resize();
      };
      
    }
 }
</script>
👉 最後に.
eグラフは非常に推奨されているグラフの一つです.変数やアクティビティがたくさんあるので、ホームページをよく閲覧すれば、誰でも使用できます.
👉 デモサイト
https://echarts.apache.org/examples/en/index.html
Seleniumを適用してWebテストを行う
iOS unit test雑記