Que sont les graphiques électroniques ? Comment utiliser ? Introduction aux graphiques électroniques

Les graphiques peuvent nous afficher intuitivement d'énormes données de manière appropriée. Nous pouvons également obtenir des informations précieuses grâce à l'analyse des graphiques. Le personnel frontal est là pour présenter les données de manière très confortable et intuitive. d'une manière qui nécessite réellement des ECharts, alors, Qu'est-ce que les echarts exactement ? Comment utiliser ? Cet article vous présentera le contenu des graphiques électroniques.

Jetons d’abord un coup d’œil Qu’est-ce qu’un echarts ?

D'après l'explication sur le site officiel, nous pouvons savoir qu'echarts est un graphique de données de qualité commerciale. Il s'agit d'une bibliothèque d'icônes JavaScript pure, compatible avec la plupart des navigateurs, et la couche sous-jacente. s'appuie sur la classe Canvas légère. La bibliothèque ZRender fournit des graphiques de visualisation de données intuitifs, vifs, interactifs et hautement personnalisables. Le recalcul innovant par glisser-déposer, les vues de données, l'itinérance de la plage de valeurs et d'autres fonctionnalités améliorent considérablement l'expérience utilisateur et donnent aux utilisateurs la possibilité d'exploiter et d'intégrer des données.

En bref, echarts est une bibliothèque qui aide à la visualisation des données.

Après avoir lu l'explication de ce qu'est un e-chart, jetons un coup d'œil à Comment utiliser les e-charts ?

Nous avons mentionné ci-dessus que les echarts sont un graphique de données de qualité commerciale. Jetons donc un coup d'œil à ce que sont ces graphiques

Graphique linéaire (graphique en aires), graphique à colonnes (graphique à barres), graphique à nuages ​​de points (graphique à bulles), graphique à courbes K, diagramme circulaire (graphique en anneau)

Douze types de graphiques, dont un diagramme radar (un diagramme radar rempli), un diagramme d'accords, un diagramme de mise en page dirigé par la force, une carte, un tableau de bord, un diagramme en entonnoir, un diagramme de rivière d'événements, etc.

Une fois que nous savons ce que sont les graphiques, nous devons savoir comment les utiliser.

Nous devons d'abord télécharger le plug-in : https://github.com/ecomfe/echarts/archive/1.4.1.zip

Ensuite, nous l'utilisons. Un exemple pour illustrer le processus de base d'utilisation des graphiques électroniques.

La première étape de l'utilisation des echarts : Vous devez d'abord introduire la bibliothèque JS dans le fichier, vous pouvez utiliser le CDN de Baidu

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

La deuxième étape de l'utilisation des echarts : Créez ensuite un DIV pour afficher le graphique

<div id="pie" style="height:400px"></div>
<div id="bar" style="height:400px"></div>

Étape 3 de l'utilisation des echarts : configurer le type et le chemin du graphique chargé

<script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                &#39;echarts&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
                &#39;echarts/chart/bar&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
        &#39;echarts/chart/pie&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;
            }
        });
</script>

Étape 4 de l'utilisation des echarts : configurer les données du graphique

optionpie = {
　　title: {
　　　　text: '2018年08月客户总满意度比例图',subtext: '测试人员',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;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　series: [
　　{
　　　　name: &#39;总满意度百分比&#39;,
　　　　type: &#39;pie&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [
　　　　{ value: 100, name: &#39;满意&#39; },
　　　　{ value: 16, name: &#39;不满意&#39;}
　　]
　　}
　　]
};

option = {
　　title: {
　　　　text: &#39;2018年08月客户满意度分布图&#39;,subtext: &#39;测试人员&#39;,x: &#39;left&#39;
　　},
　　tooltip: {
　　　　trigger: &#39;axis&#39;,
　　　　formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
　　},
　　legend: {
　　　　x: &#39;right&#39;,
　　　　padding: [5,70,5,5],
　　　　data: [&#39;满意&#39;, &#39;不满意&#39;]
　　},
　　toolbox: {
　　　　show: true,
　　　　feature: {
　　　　　　restore: true,
　　　　　　saveAsImage: true
　　　　}
　　},
　　calculable: true,
　　xAxis: [
　　{
　　　　type: &#39;category&#39;,
　　　　data: [&#39;客服人员满意度&#39;, &#39;维修人员满意度&#39;, &#39;售后人员满意度&#39;]
　　}
　　],
　　yAxis: [
　　{
　　　　type: &#39;value&#39;,
　　　　splitArea: { show: true }
　　}
　　],
　　series: [
　　{
　　　　name: &#39;满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [10, 5, 8]},
　　{
　　　　name: &#39;不满意&#39;,
　　　　type: &#39;bar&#39;,
　　　　radius: &#39;55%&#39;,
　　　　center: [&#39;50%&#39;, 225],
　　　　data: [2, 4, 6]}
　　]
};

echarts Étape 5 : Afficher les données dans le graphique

require(
[
　　'echarts',
　　'echarts/chart/pie',
　　'echarts/chart/bar'
],
function (ec) {
　　//饼状图
　　var pieChart = ec.init(document.getElementById('pie'));
　　pieChart.setOption(optionpie);
　　
　　//柱状图
　　var myChart = ec.init(document.getElementById('bar'));
　　myChart.setOption(option);
}
)

Recommandations associées :

Introduction détaillée à l'utilisation d'Echarts

Comment utiliser ECharts dans webpack ?

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!