使用からピットエントリーまでのさまざまな構成のチャート

echart の使い方と構成について話しましょう. 早速、料理を直接提供しましょう

npm インストール

npm install echarts --save

使用

echarts ファイルと構成ファイルをインポートする

import * as echarts from 'echarts';

メソッド作成、ダイレクトコミッショニング（折れ線グラフ）、全種類知りたい方は公式サイトへ

getEcharts() {
            let chartDom = this.$refs.echart1;    //获取div节点        
            let myChart = echarts.init(chartDom);    
            let option;

            option = {
                  xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                    type: 'value'
              },
              series: [
                    {
                      data: [150, 230, 224, 218, 135, 147, 260],
                      type: 'line'
                    }
                 ]
            };
            option && myChart.setOption(option);
        },

注: バインドされた div の幅と高さは、mounted (vue) で調整する必要があります。

.echart1 {
    width: 100%;
    height: 62vw;
}

いくつかの一般的な構成:

主にいくつかの一般的に使用される構成について説明します。理解するために注記をお読みください (折れ線グラフ)。

option = {
          tooltip: {    
              trigger: "item",    //'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                                  //'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                                  //'none'什么都不触发。
              formatter: " {c}",  //数据
          },
          toolbox: {    //工具箱
            feature: {    //工具配置
              dataView: { show: true, readOnly: false },    //数据视图
              magicType: { show: true, type: ['bar'] },   //切换图表显示
              restore: { show: true },    //还原
              saveAsImage: { show: true }   //图表下载
            }
          },
          textStyle: {    //文字样式,和css设置样式差不多，大小颜色类型加粗等等
            fontSize:16
          },
          grid: {         //网格,下面组件离容器上下左右的距离
              top: "10%",
              left: "3%",
              right: "4%",
              bottom: "32%",
              containLabel: true,   //是否包含坐标轴的刻度标签
          },
          legend: {   //图例
              data: ['光','暗'],  //图例的数据数组
              top: 'bottom'   //上侧的距离
          },
          axisPointer:{    //坐标轴指示器
            show:true,
            type:'line'    //'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器
          },
          xAxis: {          //x轴
              type: "value",
              name: "净丝重：g",
              nameLocation: "middle",    //名称显示位置(start,middle,end)
              nameGap: 24,    //坐标轴名称与轴线之间的距离
              // data: [10, 20, 30, 40, 50, 60, 70]
              // interval:50, // 步长
              min: 100, // 起始
              max: 300, // 终止
          },
          yAxis: {        //y轴
              type: "value",
              name: "压降：Pa",
              // nameTextStyle: { // x轴name的样式调整
              //   color: '#000', 
              //   fontSize: 22,
              // },
              //nameRotate: 90, // y轴name旋转90度 使其垂直
              // min: 2500,
              // // max: 6000,
          },
          series: [   //数据
            {
              name:'光',    //数据对象名，跟legend对应
              data: [[124, 218],[235, 317],[224, 288],],
               type: 'line'   //图表类型，line是折线图
            },
            {
              name:'暗',
              data: [[150, 230],[224, 188],[235, 302]],
               type: 'line'
            },
          ]

      };

echarts テーブルは次のとおりです。

ツールチップオブジェクトのフォーマッタ:テンプレート変数には{a}、、、、、 {b}が含まれ、{c}それぞれシリーズ名、データ名、データ値などを表します。、、は異なるチャートタイプの下で異なる意味を持ちます。{d}{e}{a}{b}{c}{d}

xy 軸のタイプ:'value' 連続データに適した値軸;'category' 離散カテゴリデータに適したカテゴリ軸;'time' 連続時系列データに適した時間軸, 値軸と比較して、時間軸には時間形式があります。また、スケール計算の違い、'log' 対数軸。対数データに適用されます。

echarts の設定の詳細については、公式ドキュメントを参照してください。https://echarts.apache.org/zh/index.html

ページデータ変更マップ表示シフト

地図を導入すると、最初のページで地図のサイズが変わったり、地図データを切り替えると、新しい地図の位置がずれたりすることがよくあります。マップは再生成されていません。

echarts のさまざまな視覚化チャート構成は類似しており、それらのほとんどは薬を変更せずにスープを変更します。

説明に誤りがあれば訂正してください！