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

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

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

app.title = '环形图';
option = {
    tooltip: {
        trigger: 'item',
        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;}
            ]
        }
    ]
};

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

Installation locale :

Vous pouvez. utilisez npm pour installer ECharts :

npm install echarts

2. Introduisez echarts

import echarts from 'echarts'

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>

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('teamLeader'));
            myChart.setOption({
              title : {
                text: '团队考核情况',
                x:'center'
            },
            tooltip: {
                trigger: 'item',
                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;}
                    ]
                }
            ]
          });
        }

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

<.>D'autres graphiques peuvent être introduits dans votre propre projet vue en utilisant cette méthode ~

Le site Web PHP chinois propose un grand nombre de

Tutoriels d'introduction JavaScript gratuits, tout le monde est invité à apprendre !

Cet article est reproduit à partir de : https://www.jianshu.com/p/2894b781063b

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!