Vueプロジェクトでechartを使用する方法-フロントエンドQ&A-php.cn

使用手順: 1. "yarn add echarts" または "npm install echarts -S" または "cnpm install echarts -S" コマンドを使用して Echarts をインストールします。 2. メインで "import echarts from ' を使用します。 .js echartsの「Vue.prototype.$echarts = echarts」を導入します; 3. vueページで関連するapiを呼び出すだけです。

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

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

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

Echarts は、フレームワークとは関係のない JS チャートライブラリですが、Js をベースにしているため、Vue などの多くのフレームワークで使用できます。

開始は簡単

Echarts のインストール

次のインストール方法のいずれかを選択します

このプロジェクトは

yarn、echarts を使用してインストールされます。バージョン番号は 4.8.0

// yarn
yarn add echarts
// npm
npm install echarts -S
// cnpm
cnpm install echarts -S

ログイン後にコピー

グローバル紹介## main.js

import echarts from &#39;echarts&#39;
Vue.prototype.$echarts = echarts

ログイン後にコピー

これに到達このステップは、準備作業が完了したことを意味します

##余分なコードを削除します # を削除しましょう最初にページ上のその他の不要なコードを実行します#

<template>
  <div class="home">

</div>
</template>

<script>
export default {
name: &#39;Home&#39;,
}
</script>

ログイン後にコピー

#コンテナを作成します#div を作成しますコンテナとして EChart の ID を使用します (ID を使用するときに小さな問題が発生します。これについては最後に答えます)

<div id="EChart" style="width: 300px; height: 300px;"></div>

ログイン後にコピー

メソッドを作成します

##
getRenderer() { console.log(this.$echarts); // 基于准备好的dom，初始化echarts实例 let EChart = this.$echarts.init(document.getElementById("EChart")); // 配置参数 let config = { title: { text: "悲伤日记" }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }; // 设置参数 EChart.setOption(config); },
ログイン後にコピー
##ライフサイクル中にこのメソッドを呼び出します

mounted() {
    // 在生命周期中调用 getRenderer 方法
    this.getRenderer();
},

ログイン後にコピー

#大きなスクリーンでご覧ください

## メロンを食べる人たち: " ヤン先生: 「正直に言うと、少し低いです。パニックにならないでください。ここはどこですか? しましょう。」まずは基礎講座から始めましょう」

まずはパラメータを理解しましょう

について話しましょう最初に簡単な設定パラメータをいくつか紹介します。これは退屈ですが、理解すると、将来絵を描くのが簡単になります。まず、簡単で一般的に使用されるパラメータをいくつか見てみましょう (メモはすべてAPI アドレスに対応)

パラメータ名

関数備考

##titlehttps://echarts.apache.org/zh/option.html#title図としてのマーカーhttps://echarts.apache.org/zh/option.html#legend グラフの X 軸としてhttps://echarts.apache.org/zh /option.html#xAxisチャートの Y 軸としてhttps://echarts。 apache.org/zh/option.html#yAxisグラフとしてのシリーズhttps://echarts .apache.org/zh/option.html#seriesチャートとしてのカラーリストhttps:/ /echarts.apache.org/zh/option.html#color

掰扯了这么多，估计大家心里也没个底，实战一下吧

来造作一下下

series type

来吧！！展示

折线图

修改折线图,复制上面的config代码

只用修改一处地方，那就是series 中的type属性为line即可

let config = {
   title: { text: "悲伤日记" },
   tooltip: {},
   xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
       {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
       },
    ],
};

ログイン後にコピー

饼状图

饼状图，我们也来看看，将type修改为pie

当然我们需要把多余的X轴Y轴配置删除咯,data数据格式也需要修改一下

let config = {
    tooltip: {},
    legend:{
       data : ["严","老","湿"]
    },
    series: [
       {
          name: "销量",
          type: "pie",
          data: [
              {value:20,name:"严"},
              {value:10,name:"老"},
              {value:15,name:"湿"}
          ],
        },
    ],
};

ログイン後にコピー

仪表盘

仪表盘将 type 修改为 gauge

let config = {
    series: [
       {
         name: "销量",
         type: "gauge",
         data: [50],
       },
    ],
};

ログイン後にコピー

嗯~ 看起来有那么一点味道了

画一个老严的脸

let config = {
      series: [
          {
            name: "销量",
            type: "funnel",
            data: [
                 {value: 60, name: &#39;访问&#39;},
                 {value: 40, name: &#39;咨询&#39;},
                 {value: 20, name: &#39;订单&#39;},
                 {value: 80, name: &#39;点击&#39;},
                 {value: 100, name: &#39;展现&#39;}
              ]
           },
     ],
};

ログイン後にコピー

哈哈哈倒三角就是老严的脸了（脑补一下下）

legend

刚刚其实我们已经用到了这个参数噢 ps：饼状图

legend 可以作为图表的标记或颜色的名称描述(专业名词：图例)

它的type有两个参数plain || scroll

默认为plain 当图表内容比较丰富的时候可以使用 scroll 可以带有滚动操作

color

都说颜色是Web的灵魂所在，每一个人都是画手

官方默认配色：

[&#39;#c23531&#39;,&#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;,&#39;#749f83&#39;,  &#39;#ca8622&#39;, &#39;#bda29a&#39;,&#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;]

ログイン後にコピー

我们也可以自己修改颜色,规则是按数据对应的index找color颜色

例如这样：

let config = {
     color:["red","blue","yellow"],
    legend:{
            data : ["严","老","湿"]
    },
    series: [
            {
               name: "销量",
               type: "pie",
               data: [
                    {value:20,name:"严"},
                    {value:10,name:"老"},
                    {value:15,name:"湿"}
               ],
          },
    ],
};

ログイン後にコピー

yAxis

我们还是以线条为参考8

先看看基础篇,我们在y轴声明了一个name

let config = {
    xAxis: {
        type: &#39;category&#39;,
        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },
    yAxis:[ {
        name:"销量",
        type: &#39;value&#39;
    }],
    series: [{
        name:&#39;销量&#39;,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: &#39;line&#39;,
        smooth: true
    }]
};

ログイン後にコピー

但是有时候呢，我们会根据需求，要做一个双Y轴，顾名思义双Y轴，在加一个Y轴就好了

let config = {
    xAxis: {
        type: &#39;category&#39;,
        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },
    yAxis:[ {
        name:"l",
        type: &#39;value&#39;
    }, {
        name:"r",
        type: &#39;value&#39;
    }],
    series: [{
        name:&#39;l&#39;,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: &#39;line&#39;,
        smooth: true
    },
    {
        name:&#39;r&#39;,
        data: [20, 10, 60, 100, 300, 600, 800],
        type: &#39;bar&#39;,
    }]
}

ログイン後にコピー

xAxis

x轴与y轴基本同理，直接改成数组就成为双x轴了

let config = {
    xAxis: [{
        type: &#39;category&#39;,
        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },{
        type: &#39;category&#39;,
        data: [&#39;0&#39;, &#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;, &#39;6&#39;]
    }],
    yAxis:[{
        name:"l",
        type: &#39;value&#39;
    }, {
        name:"r",
        type: &#39;value&#39;
    }],
    series: [{
        name:&#39;l&#39;,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: &#39;line&#39;,
        smooth: true
    },
    {
        name:&#39;r&#39;,
        data: [20, 10, 60, 100, 300, 600, 800],
        type: &#39;bar&#39;,
    }]
};

ログイン後にコピー

到了上面基础篇也就差不多了

使用id为问题所在

其实我们讲了这么多，我们梳理梳理最开始的问题

id重名怎么办？
数据多个渲染怎么办？

答案：使用ref，因为vue是单页面，使用id出现重名会导致渲染问题

具体怎么使用我们来看看

<div ref="EChart" style="width: 300px; height: 300px;"></div>

ログイン後にコピー

// 同样的初始化参数 但是我们此次使用的是ref 
let EChart = this.$echarts.init(this.$refs.EChart)
// 配置参数
let config = {
    xAxis: [{
        type: &#39;category&#39;,
        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },{
        type: &#39;category&#39;,
        data: [&#39;0&#39;, &#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;, &#39;6&#39;]
    }],
    yAxis:[{
        name:"l",
        type: &#39;value&#39;
    }, {
        name:"r",
        type: &#39;value&#39;
    }],
    series: [{
        name:&#39;l&#39;,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: &#39;line&#39;,
        smooth: true
    },
    {
        name:&#39;r&#39;,
        data: [20, 10, 60, 100, 300, 600, 800],
        type: &#39;bar&#39;,
    }]
};
// 设置参数
EChart.setOption(config);

ログイン後にコピー