データ視覚化 ----ECharts の一般的な構成 (2)

テキストは表ほど良くありませんし、表は写真ほど良くありません。前回は、ECharts の関連概念と使用手順を紹介しました。
データの視覚化 - ECharts の初体験 (1) を参照してください。
もう 1 つの文章は、最良のドキュメントは公式 Web サイトにあります。公式 Web サイトを注意深く読むよりも、公式 Web サイトをよく読んだ方が良いです。誰のブログも読める、公式サイトへのアクセス方法

ここをクリッククリッククリッククリック
公式Webサイトのアドレス：https://echarts.apache.org/zh/index.htmlをブラウザにコピーして開きます
直接百度、echarts

今回は、EChartsの一般的な構成を一緒に学びましょう

1タイトル（タイトル）

メインタイトルとサブタイトルを含むタイトルコンポーネント。

テキスト（タイトルテキスト）

text: 文字列のメインタイトルテキスト。\n 改行をサポートします。

textStyle(テキストスタイル)

構成はオブジェクトです

色

色は、「rgb(128, 128, 128)」などの RGB で表現できます。アルファチャネルを追加する場合は、「rgba(128, 128, 128, 0.5)」などの RGBA を使用できます。 16 進数。「#ccc」などの形式。
color: タイトルのテキストの色。

フォントスタイル

fontStyle: タイトルのテキストのスタイル

'普通'
'イタリック'
'斜め'

フォントの太さ

fontWeight: メインタイトルのテキストフォントの太さ。

'普通'
'大胆な'
「より大胆に」
'ライター'
100 | 200 | 300 | 400…

フォントサイズ

fontSize: メインタイトルテキストのフォントサイズ。-----number、値は数値です。単位を書かないように注意してください。

タイトル枠

境界線の幅

タイトルの枠線の幅です。-----number、値は数値です。単位を書かないように注意してください。

ボーダの色

タイトルの枠線の色。

色は、「rgb(128, 128, 128)」などの RGB で表現できます。アルファチャネルを追加する場合は、「rgba(128, 128, 128, 0.5)」などの RGBA を使用できます。 16 進形式 (「#ccc」など)

境界半径

コーナー半径 (単位 px) は、4 つのコーナー半径をそれぞれ指定する配列での受け渡しをサポートします。のように：

borderRadius: 5, // 四隅の角丸を均等に設定
borderRadius: [5, 5, 0, 0] // (時計回りに左上、右上、右下、左下)

タイトルの位置

上

タイトルコンポーネントとコンテナの上辺との間の距離。

top の値は、20 などの特定のピクセル値、「20%」などのコンテナの高さと幅に対する相対的なパーセンテージ、または「top」、「middle」、「bottom」のいずれかにすることができます。
top の値が 'top'、'middle'、'bottom' の場合、コンポーネントは対応する位置に従って自動的に配置されます。

右

タイトルコンポーネントとコンテナの右側との間の距離。

right の値は、20 のような特定のピクセル値、または「20%」のようなコンテナの高さと幅に対する相対的なパーセンテージにすることができます。
デフォルトではアダプティブです。

底

タイトルコンポーネントとコンテナの下側との間の距離。

Bottom の値は、20 のような特定のピクセル値、または「20%」のようなコンテナの高さと幅に対するパーセンテージにすることができます。
デフォルトではアダプティブです。

左

タイトルコンポーネントとコンテナの左側との間の距離。

left の値には、20 などの特定のピクセル値、「20%」などのコンテナの高さと幅に対する相対的なパーセンテージ、または「left」、「center」、「right」を指定できます。
left の値が 'left'、'center'、'right' の場合、コンポーネントは対応する位置に従って自動的に整列されます。

このタイトルは下の図のスタイルに設定されています
ここに画像の説明を挿入します

2 ツールチップ (プロンプトボックスコンポーネント)

引き金

トリガータイプ、3 つのパラメーター:

この項目は、マウスが列に入ったときにのみトリガーされます。
axis は、マウスが列が配置されている軸に入るとトリガーされます。
none: 何もトリガーされません

トリガーオン

プロンプトボックスがトリガーされる条件

.click クリックトリガー
マウスがその上をスライドすると、mousemove がトリガーされます。デフォルト値

フォーマッタ

プロンプトボックスのフローティングレイヤーコンテンツフォーマッタは、文字列テンプレートとコールバック関数の 2 つの形式をサポートします。

テンプレート文字列の例: '{b} の成績は {c}'
コールバック関数。例:

formatter: function (arg) {
    
     //借助回调函数中的参数
     console.log(arg);
     // return "hehe"
     return arg.name + '的成绩是：' + arg.data
}

ツールチップの効果は以下の通りで、この効果はクリックとアイテムです。

tooltip: {
    
    
   trigger: 'axis',
   triggerOn: 'mousemove',
   formatter: function (arg) {
    
     //借助回调函数中的参数
     console.log(arg);
     // return "hehe"
     return arg.name + '的成绩是：' + arg.data
}
}

画像の説明を追加してください
軸 + マウス移動の効果

tooltip: {
    
    
   trigger: 'axis',
   triggerOn: 'mousemove',
   formatter: '{b}的{a}成绩是{c}'
}

画像の説明を追加してください

ツールボックス

ツールボックスのツールバー。これには、画像のエクスポート、データビュー、動的タイプの切り替え、データ領域のズーム、リセットの 5 つのツールが組み込まれています。

機能（各ツールの設定項目）

saveAsImage (画像として保存)

dataView (データビュー)

復元する

dataZoom（エリアズーム）

magicType (動的タイプ切り替え)

例：

toolbox: {
    
    
  // 各工具配置项
  feature: {
    
    
    saveAsImage: {
    
    },  //保存图片
    dataView: {
    
    }, // 数据视图
    restore: {
    
    },  // 重置
    dataZoom: {
    
    }, // 区域缩放
    magicType: {
    
      // 动态类型切换
    	type: ['bar' , 'line']
    }
  }
}

ここに画像の説明を挿入します
全体的なエフェクト表示
画像の説明を追加してください

伝説

データ

// legend: 图例，用于筛选系列，需要和series配合使用
legend:{
    
    
//这里data的数据必须和series中name的值一致
  data: ['语文','数学']
},

合わせてシリーズも必要です

var xData = ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃'],
        yData = [65, 78, 98, 100, 59, 86, 76, 89.5];
        //多定义一个数组
        yData2 = [69, 82, 89, 95, 70, 95, 84, 90];

シリーズ

series: [{
    
    
    name: '语文',
    type: 'bar',
    data: yData
},{
    
    
    name: '数学',
    type: 'bar',
    data: yData2
}]

これがエフェクトです。
画像の説明を追加してください
最終的な完全なコードはここにあります。サポートしていただきありがとうございます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>
    <script src="./lib/echarts.min.js"></script>
</head>

<body>
    <div style="width: 600px;height: 400px;"></div>
    <script>
        let oDiv = document.querySelector('div');
        var xData = ['张三', '李四', '王五', '二嘎', '闰土', '铁蛋', '史珍香', '狗娃'],
        yData = [65, 78, 98, 100, 59, 86, 76, 89.5];
        yData2 = [69, 82, 89, 95, 70, 95, 84, 90];
        
        var mCharts = echarts.init(oDiv);
        var option = {
      
      
            title: {
      
      
                // 标题文字
                text: '成绩展示',
                // 文字样式
                textStyle: {
      
      
                    color: '#7c7c7c'
                },
                // 标题边框
                borderWidth: 5,
                borderColor: '#c00',
                borderRadius: 5,
                // 标题所在位置
                // left:400,
                // top: 10
            },
            tooltip: {
      
      
                // trigger  触发类型  三个参数
                // item 鼠标进入柱内才会触发
                trigger: 'axis',
                // axis 鼠标进入柱所在的轴就会触发
                // trigger: 'axis',
                // none: 怎样都不触发
                // trigger: 'none'

                // triggerOn 提示框触发的条件
                // 点击触发，默认时mousemove 鼠标滑过就会触发
                triggerOn: 'mousemove',
                // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                // 字符串模板
                // formatter: '{b}的成绩是{c}'
                // formatter: function (arg) { //借助回调函数中的参数
                // console.log(arg);
                //     // return "hehe"
                //     return arg.name + '的成绩是：' + arg.data
                // }
            },
            // toolbox 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
            toolbox: {
      
      
                // 各工具配置项
                feature: {
      
      
                    saveAsImage: {
      
      },  //保存图片
                    dataView: {
      
      }, // 数据视图
                    restore: {
      
      },  // 重置
                    dataZoom: {
      
      }, // 区域缩放
                    magicType: {
      
        // 动态类型切换
                        type: ['bar' , 'line']
                    }
                }
            },
            // legend: 图例，用于筛选简历，需要和series配合使用
            legend:{
      
      
                data: ['语文','数学']
            },
            xAxis: {
      
      
                type: 'category',
                name: '姓名',
                nameLocation: 'start',
                data: xData
            },
            yAxis: {
      
      
                name: '得分',
                nameLocation: 'start',
                type: 'value'
            },
            series: [{
      
      
                name: '语文',
                type: 'bar',
                data: yData
            },{
      
      
                name: '数学',
                type: 'bar',
                data: yData2
            }]
        }
        mCharts.setOption(option)
    </script>
</body>

</html>

ここまで言いましたが、まだ一文を繰り返さなければなりません。ECharts を学ぶために最も重要なことは、公式 Web サイトを読む、公式 Web サイトを読む、公式 Web サイトを読むことです。！！
時間をかけてインターネットを閲覧し、設定項目
をクリックします。クリック方法がわからない場合は、https://echarts.apache.org/zh/option.html#title をコピーしてください。