echart を使用してチャート プロジェクトを実装する場合の注意事項

この記事の内容は、echartsを使用してチャートプロジェクトを実装する際の注意点に関するものであり、必要な友人が参考になれば幸いです。

最近、私はechartsを使用してチャートプロジェクトを行いました。 API を理解する能力が限られているため、使用はスムーズではありません。
ことわざにあるように、良い記憶力は悪い文章ほど良くないので、後で復習するためにいくつかの重要なポイントを記録します。

使用方法の1つ

プロジェクト: ionic+angular4+echarts

    1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入
    <script src="assets/js/echarts.min.js"></script>

    2.在组件的.html文件中
    <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

    3.在组件的.ts文件中配置好options的值pieOption以及点击drill down的逻辑

注意点2つ

1.各レンダリング領域には位置設定があり、上下左右からの距離をカスタマイズできます

    grid:{
        top:...
        left:...
        bottom:...
        right:...
    }
    
    legend:{
        top:...
        left:...
        ...
    }

2. 値を含む各表示ポイントは基本的にフォーマッタを提供します

tooltip:{
        formatter: params => { //自定义hover状态数据显示的情况
            let str = '';
            str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;
                //item中提供了图标、颜色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //需要根据值去重算数据然后显示的情况
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ': ' + Math.round(total).toLocaleString();
        }
    }

3.xAxis/yAxis は、座標軸のいくつかの属性スケール、座標軸の名前、座標情報の表示方法を構成します

4.toolboxエクスポート機能が組み込まれたツールバーには、画像、データ ビュー、動的タイプ切り替え、データ領域のズーム、リセットの 5 つのツールがあり、キャンバスの関連 API を使用して自分で画像をエクスポートできます。 5. dataZoom データ領域ズーム コンポーネント -- 複数の

dataZoom:[
    {
        type:'inside', //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
        ...
    },
    {
        type:'slider', //在外部 显示为滑动条形的一个组件，可直接拖动使用
        ...
    }
]

6.series シリーズ リストを使用することもできます。各シリーズは、タイプによってチャート タイプを決定します。異なるチャートに従って異なる形式でデータを挿入します。実際、各グラフにはいくつかの微妙な設定、データと色、間隔などがあり、続きます...

関連する推奨事項:

円グラフのセクター統計テーブルへのクリック イベントの追加を実装するためのチャート

Echarts を使用して動的曲線チャートを実装します

以上がechart を使用してチャート プロジェクトを実装する場合の注意事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。