プロジェクトで EChart を使用する方法

---

序文

提示：这里可以添加本文要记录的大概内容：

この記事では主に、EChart の過去と現在、プロジェクトで EChart を使用するプロセス ステップ、および EChart の一般的な構成について説明します。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. ECharts の概要

一般的なデータベース:

• D3.js は現在、Web 上で最も評価の高い Javascript 視覚化ツール ライブラリです (使い始めるのが難しい)
• ECharts.js Baidu (中国製) が開発したオープンソースの Javascript データ視覚化ライブラリ
• Highcharts.js 外国のフロントエンド データ視覚化ライブラリ、非営利で無料、多くの大きな外国企業で使用されています
• AntV Ant Financialの新世代データ可視化ソリューションなど

したがって、ECharts は Baidu が開発したオープンソースの Javascript データ視覚化ライブラリであり、Highcharts は海外で多く使用され、Echarts は中国で多く使用されており、両者の関係は WPS と Office に似ています。PC およびモバイル デバイス上でスムーズに実行でき、最新のブラウザ (IE8/9/10/11、Chrome、Firefox、Safari など) と互換性があり、高度にカスタマイズされたデータ視覚化チャート。

2. ECharts を使用する場合の処理​​手順

1. echart をダウンロードしてページにインポートします

• eチャートをダウンロードする
• プロジェクトコンポーネントに導入する

import echarts from 'echarts';

2. divボックスを準備する

<div id="main" style="width: 600px;height:400px;"></div> //方法一对应的盒子
<div class="content-460300" ref="unlockTrendRef"></div> //方法二对应的盒子

3. echarts インスタンス オブジェクトを初期化する

var myChart = echarts.init(document.getElementById('main')); //方法一对应的初始化
let unlockTrendChart = echarts.init(this.$refs.unlockTrendRef); //方法二对应的初始化

4. 設定項目とデータの指定（オプション）

var 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'
    }]
};

var option = {
    
    
	//方法二对应的配置
        title: {
    
    
          text: '最近一个月开锁方式折线图(人)',
          left: 0,
          top: 0,
          textStyle: {
    
    
            fontSize: 12,
            color: 'rgba(192, 216, 255, 1)'
          }
        },

        grid: {
    
    
          //图表和父盒子之间的距离
          left: '40px',
          right: '40px',
          bottom: '20px',
          top: '20%',
          containLabel: true
        },
        legend: {
    
    
          data: ['指纹开锁', '门卡开锁', '密码开锁'],
          textStyle: {
    
    
            color: '#c0d8ff'
          }
        },
        xAxis: {
    
    
          data: unlockTrendXKey,
          type: 'category',
          boundaryGap: false,
          axisLabel: {
    
    
            interval: 0,
            rotate: 0,
            color: '#DFDDEA',
            fontFamily: 'PingFang SC',
            textStyle: {
    
    
              color: '#C0D8FF', //文字的颜色
              fontSize: '12'
            }
          },
          axisLine: {
    
    
            lineStyle: {
    
    
              color: '#5897ff',
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: {
    
    
          type: 'value',
          //Y轴的坐标文字
          minInterval: 1, //y坐标轴最小间隔大小
          axisLabel: {
    
    
            show: true,
            textStyle: {
    
    
              color: '#C0D8FF' //文字的颜色
            },
            fontSize: 10,
            fontFamily: 'PingFang SC'
          },
          splitLine: {
    
    
            lineStyle: {
    
    
              // 使用深浅的间隔色
              color: ['#5897ff']
            }
          },
          axisLine: {
    
    
            show: false
          },
          axisTick: {
    
    
            //y坐标轴刻度线设置
            show: false
          }
        },
        tooltip: {
    
    
          trigger: 'axis'
        },
        series: [
          {
    
    
            name: '指纹开锁',
            type: 'line',
            stack: 'Total',
            data: fingerVal
          },
          {
    
    
            name: '门卡开锁',
            type: 'line',
            stack: 'Total',
            data: cardVal
          },
          {
    
    
            name: '密码开锁',
            type: 'line',
            stack: 'Total',
            data: codeVal
          }
        ]
      };

5. 構成アイテムを echarts インスタンス オブジェクトに設定します

myChart.setOption(option); //方法一对应的设置
unlockTrendChart.setOption(option); //方法二对应的设置

結果を示す

• 方法 2 の対応する効果

一般的に使用される 3 つの構成

理解する必要がある主な構成は次のとおりです。series xAxis yAxis grid tooltip title legend color

• シリーズ
  シリーズ一覧。各シリーズは、次の方法でtype独自のチャート タイプを決定します。
• xAxis
  直交座標系グリッドの x 軸
• yAxis
  直交座標系グリッドの y 軸
• グリッド
  デカルト座標系の描画グリッド。
• ツールチップ
  プロンプト ボックス コンポーネント
• タイトル
  タイトルコンポーネント
• 凡例
  凡例コンポーネント
• カラー
  パレットのカラーリスト

要約する

echart の使用の核心は次のとおりです。

• divボックスを準備する
• インスタンス オブジェクト echarts.init(div box) を初期化します。
• 設定項目とデータを指定する
• インスタンス化されたものに構成アイテムを与えます。myChart.setOption(option)
  共有はここにあります。役に立った場合は、「いいね！」を忘れずに、質問がある場合は一緒に議論するメッセージを残して、一緒に成長してください。！！