ホームページ >ウェブフロントエンド >jsチュートリアル >eチャートとは何ですか?使い方？ eチャートの概要

eチャートとは何ですか?使い方？ eチャートの概要

不言オリジナル: 2018-09-11 13:43:5116449ブラウズ

Charts は、膨大なデータを適切な方法で直感的に表示することができ、フロントエンド担当者は、非常に快適かつ直感的な方法でデータを表示することもできます。では、echarts とは一体何でしょうか?使い方？ この記事ではechartsの内容を紹介します。

まずは見てみましょう echartとは何ですか?

公式 Web サイトの説明から、echarts は商用グレードのデータチャートであることがわかります。これは、ほとんどのブラウザーと互換性のある純粋な JavaScript アイコンライブラリであり、最下層は軽量のキャンバスクラスライブラリ ZRender に依存しています。直感的、鮮明、インタラクティブ、高度にカスタマイズ可能なデータ視覚化チャートを提供します。革新的なドラッグアンドドロップの再計算、データビュー、値範囲ローミングなどの機能により、ユーザーエクスペリエンスが大幅に向上し、ユーザーがデータをマイニングして統合できるようになります。

つまり、echarts はデータの視覚化を支援するライブラリです。

echarts とは何かについての説明を読んだ後、echarts の使用方法を見てみましょう。

echarts は商用グレードのデータチャートであると上で述べました。それでは、これらのチャートが何であるかを見てみましょう

折れ線グラフ (面グラフ)、縦棒グラフ (棒グラフ)、散布図 (バブルチャート)、K 折れ線グラフ、円グラフ (リングチャート)

レーダーチャート (塗りつぶしレーダーチャート）、コードチャート、フォース指示配置チャート、マップ、ダッシュボード、ファンネルチャート、イベントリバーチャートなど12種類のチャート。

チャートとは何かを理解したら、その使用方法を知る必要があります。

まず、プラグインをダウンロードする必要があります: https://github.com/ecomfe/echarts/archive/1.4.1.zip

次に、例を使用して、echarts を使用する基本プロセスを説明します。。

echarts 使用する最初のステップ: まず、ファイルに JS ライブラリを導入する必要があります。Baidu の CDN

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

echarts を使用できます。 2 番目のステップ: 次に、使用するチャート

<div id="pie" style="height:400px"></div>
<div id="bar" style="height:400px"></div>

echarts を表示するための DIV を作成します。 3 番目のステップ: ロードされたチャートのタイプとパスを設定する

<script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                &#39;echarts&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
                &#39;echarts/chart/bar&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
        &#39;echarts/chart/pie&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;
            }
        });
</script>

echarts ステップ 4: チャートデータを設定する

optionpie = {
　　title: {
　　　　text: &#39;2018年08月客户总满意度比例图&#39;,subtext: &#39;测试人员&#39;,x: &#39;center&#39;
　　},
　　tooltip: {
　　　　trigger: &#39;item&#39;,
　　　　formatter: "{a}<br/>{b} : {c} ({d}%)"
　　},
　　legend: {
　　　　orient: &#39;vertical&#39;,
　　　　x: &#39;left&#39;,
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　series: [
　　{
　　　　name: &#39;总满意度百分比&#39;,
　　　　type: &#39;pie&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [
　　　　{ value: 100, name: &#39;满意&#39; },
　　　　{ value: 16, name: &#39;不满意&#39;}
　　]
　　}
　　]
};

option = {
　　title: {
　　　　text: &#39;2018年08月客户满意度分布图&#39;,subtext: &#39;测试人员&#39;,x: &#39;left&#39;
　　},
　　tooltip: {
　　　　trigger: &#39;axis&#39;,
　　　　formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
　　},
　　legend: {
　　　　x: &#39;right&#39;,
　　　　padding: [5,70,5,5],
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　xAxis: [
　　{
　　　　type: &#39;category&#39;,
　　　　data: [&#39;客服人员满意度&#39;, &#39;维修人员满意度&#39;, &#39;售后人员满意度&#39;]
　　}
　　],
　　yAxis: [
　　{
　　　　type: &#39;value&#39;,
　　　　splitArea: { show: true }
　　}
　　],
　　series: [
　　{
　　　　name: &#39;满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [10, 5, 8]},
　　{
　　　　name: &#39;不满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [2, 4, 6]}
　　]
};

echarts ステップ 5: チャートにデータを表示する

require(
[
　　&#39;echarts&#39;,
　　&#39;echarts/chart/pie&#39;,
　　&#39;echarts/chart/bar&#39;
],
function (ec) {
　　//饼状图
　　var pieChart = ec.init(document.getElementById(&#39;pie&#39;));
　　pieChart.setOption(optionpie);
　　
　　//柱状图
　　var myChart = ec.init(document.getElementById(&#39;bar&#39;));
　　myChart.setOption(option);
}
)

eチャートとは何ですか?使い方？ eチャートの概要

関連記事