Comment utiliser des graphiques visuels dans les projets Vue-js tutoriel-php.cn

Comment utiliser des graphiques visuels dans les projets Vue

爱喝马黛茶的安东尼

Libérer： 2019-12-06 17:59:52

avant

3638 Les gens l'ont consulté

Comment utiliser des graphiques visuels dans les projets Vue

Jetons d'abord un coup d'œil au site officiel : https://www.echartsjs.com/zh/index.html

Comment utiliser des graphiques visuels dans les projets Vue

Cliquez Par exemple, vous pouvez voir différents graphiques visuels dans l'image ci-dessus. Sélectionnez l'un des graphiques :

Comment utiliser des graphiques visuels dans les projets Vue

Après ouverture, le code est à gauche et le graphique. à droite :

Comment utiliser des graphiques visuels dans les projets Vue

app.title = &#39;环形图&#39;;
option = {
    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;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
    },
    series: [
        {
            name:&#39;访问来源&#39;,
            type:&#39;pie&#39;,
            radius: [&#39;50%&#39;, &#39;70%&#39;],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: &#39;center&#39;
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: &#39;30&#39;,
                        fontWeight: &#39;bold&#39;
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:&#39;直接访问&#39;},
                {value:310, name:&#39;邮件营销&#39;},
                {value:234, name:&#39;联盟广告&#39;},
                {value:135, name:&#39;视频广告&#39;},
                {value:1548, name:&#39;搜索引擎&#39;}
            ]
        }
    ]
};

Copier après la connexion

Ensuite, vous pouvez l'utiliser en quelques étapes :

Installation locale :

Vous pouvez. utilisez npm pour installer ECharts :

npm install echarts

Copier après la connexion

2. Introduisez echarts

import echarts from &#39;echarts&#39;

Copier après la connexion

dans index.html 3. Écrivez un conteneur div pour transporter le graphique :

<div class="hccalone">
       <div  id="teamLeader" style="float:left;width:100%;height: 300px"></div>
</div>

Copier après la connexion

Définissez un div dans le code ci-dessus (définir la hauteur, la taille et d'autres attributs, définir un identifiant)

4. Écrivez une méthode pour initialiser le code du graphique (copiez et collez directement le code du document du site officiel et modifiez l'identifiant du conteneur et les valeurs de chaque partie) :

getTeamLeader(){
            var myChart = echarts.init(document.getElementById(&#39;teamLeader&#39;));
            myChart.setOption({
              title : {
                text: &#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;]
            },
            series: [
                {
                    name:&#39;访问来源&#39;,
                    type:&#39;pie&#39;,
                    radius: [&#39;50%&#39;, &#39;70%&#39;],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: &#39;center&#39;
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: &#39;30&#39;,
                                fontWeight: &#39;bold&#39;
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:50, name:&#39;已完成&#39;},
                        {value:50, name:&#39;未完成&#39;}
                    ]
                }
            ]
          });
        }

Copier après la connexion

5 Enfin, lors de l'initialisation de la page, appelez simplement cette méthode et vous pourrez voir le graphique :

Comment utiliser des graphiques visuels dans les projets Vue