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

インストール

npm install --save echarts

main.js は echart を導入します。

// 引入 echarts
import * as echarts from "echarts";
const app = createApp(App);
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts;

templateタグでdomコンテナを定義する

注: import * as echarts from 'echarts' を使用する必要がありますが、import echarts from 'echarts' は使用できません。使用しないと、エラーが報告されます。

<script>
  import { defineComponent, toRefs, reactive, onMounted } from 'vue'
  import * as echarts from 'echarts'
  
  export default defineComponent({
    name: 'Histogram',
    setup() {
      const state = reactive({
        option: {
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: ["芳草地国际","实验小学","白家庄小学","外国语小学","师范学校附属","望京东园"],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '学校',
              type: 'bar',
              barWidth: '40%',
              data: [260,680,360,460,150,320],
            },
          ],
        },
      })
      const initeCharts = () => {
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption(state.option)
      }
      
      onMounted(() => {
        initeCharts()
      })

      return {
        ...toRefs(state),
      }
    },
  })
</script>

注: 一部の縦棒グラフのテキストコンテンツが表示されないことに気付きました。テキストが長すぎるため、表示されなかったのではないかと推測しました。プロトタイプの X 軸の文字を傾ける必要があったためです。クエリドキュメント xAxis には設定可能な axisLabel があります。

xAxis はフォントの傾きを設定します

xAxis: [
  {
    type: 'category',
    data: [ "芳草地国际", "实验小学", "白家庄小学", "外国语小学", "师范学校附属", "望京东园" ],
    axisTick: { alignWithLabel: true },
    axisLabel: { interval: 0, rotate: 30 },
  },
],

一連の itemStyle のこの属性は、スタイルを設定し、color を通じてグラデーションカラーを設定し、barBorderRadius を通じて丸い角を設定できます。

series: [
{ name: '学校', type: 'bar', barWidth: '40%', itemStyle: { color: new VabChart.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color : '#9a9cf6' }, { オフセット: 1, カラー: '#6365ef' }, ])、 barBorderRadius: [5, 5, 0, 0], }, データ: [260,680,360,460,150,320], }, ],

クリックイベントを追加する

このドキュメントでは、クリックイベントを追加できることが示されています。

constiniteCharts = () => { let myChart = echarts.init(document.getElementById('myChart')) // チャートを描画します myChart.setOption(state.option) myChart.on('click', (params) => { console .log(params) // to do }) }イベントが正常に追加された後、echarts チャートをクリックすると何度も開始され、多くの結果が出力されます。

クリックイベントの前に閉じるには off を使用します

const initeCharts = () => { let myChart = echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption(state.option) myChart.off('click') myChart.on('click ', (params) => { console.log(params) // 実行すること }) }

追加後、データは 1 回だけ印刷され、クリックイベントで必要な操作を行うことができます。

ランダムな名前で新しい js ファイルを作成し (ここでは echarts.js という名前)、それを js フォルダーに配置します。

echarts.js フォルダーに存在する必要があるコンテンツ:

// echarts の使用に必要なインターフェイスを提供する echarts コアモジュールを導入します。
import * as echarts from "echarts/core";

/** 棒グラフと折れ線グラフを導入します。グラフの接尾辞は Chart です */
import { BarChart, LineChart } from "echarts/charts";

// プロンプトボックス、タイトルを導入します、デカルト座標系、データセット、組み込みデータコンバータコンポーネント、コンポーネントのサフィックスは Component
import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, } from "echarts/components"; // ラベルの自動レイアウト、グローバル遷移アニメーションとその他の機能import { LabelLayout, UniversalTransition } from "echarts/features"; // Canvas レンダラを導入します。CanvasRenderer または SVGRenderer の導入は必要なステップであることに注意してください。import { CanvasRenderer } from "echarts/renderers"; // を登録します必要なコンポーネントのチャート。

TooltipComponent、
GridComponent、
DatasetComponent、
TransformComponent、
BarChart、
LabelLayout、
UniversalTransition、
CanvasRenderer、
LineChart、
]);

//
デフォルトの echart をエクスポートします。

作成した echarts.js ファイルをグローバル main.js に導入します。

import App from './App'
// echarts を導入
import echarts from './common/js/echarts.js'

import {createSSRApp} from 'vue'
let app = createSSRApp(App)

// vue インスタンスにマウント
/ / Vue.prototype.$echarts = echarts;//vue2 マウントメソッド
app.config.globalProperties.$echarts = echarts;//vue3 マウントメソッド

export function createApp() { return {app} } //Called 今回は、これです。 $echarts.init()

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

おすすめ