Explication détaillée de l'ajout de l'utilisation des graphiques Echarts dans vue

Nous avons souvent besoin d'utiliser des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc. dans nos projets. J'ai déjà utilisé heightCharts, mais plus tard, j'ai senti que ce produit n'était pas open source et serait une perte de temps juste pour. display, j'ai donc jeté un œil à eCharts. Ainsi, eCharts a été ajouté au projet construit par vue-cli. Vous trouverez ci-dessous les étapes spécifiques et certaines de mes propres notes d'étude. J'espère que cela pourra aider tout le monde.

Le front-end actuel a généralement besoin de compléter la visualisation d'une grande quantité de données. Nous sommes désormais à l’ère du big data et du cloud computing, la visualisation des données est donc progressivement devenue une tendance. ECharts et d3.js sont des frameworks matures pour la visualisation. On peut dire que les graphiques que vous créez satisfont votre créativité.

Comparé aux deux, D3 est utilisé par de nombreux autres plugins de table. Il permet de lier des données arbitraires au DOM, puis d'appliquer des transformations basées sur les données au document. Vous pouvez l'utiliser pour créer des tableaux HTML de base avec un tableau, ou profiter de ses transitions et interactions fluides pour créer de superbes graphiques à barres SVG avec des données similaires.

Le graphique ECharts est plus adapté à l'application, avec une apparence magnifique, mais très pratique.

Le modèle de base d'ECharts est très simple, et il est plus facile de démarrer que d3.

Utilisation de base des graphiques Echarts

1. Ajoutez la configuration du webpack au projet vue-cli, la dernière version présentée dans cet article. Avant la version 3.1.1, le package ECharts sur npm était officieusement maintenu. À partir de la version 3.1.1, le package EFE officiel maintenait les packages ECharts et zrender sur npm.

Utilisez npm pour ajouter la configuration dans le fichier package.json et téléchargez les dépendances du package npm pertinentes

npm install echarts --save

Ajoutez ensuite

à l'entrée js fichier main.js du fichier de projet

import echarts from "echarts"

Créez une instance dépendante dans le composant où l'icône doit être ajoutée

var echarts = require('echarts');

Ce que vous obtenez en utilisant cette méthode est un package ECharts qui a chargé tous les graphiques et composants , le volume sera donc relativement important. Vous pouvez également importer uniquement les modules requis selon vos besoins. Par exemple

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

Pour la liste des différentes ressources, veuillez vous référer au référentiel github sur le site officiel https://github.com/ecomfe/echarts/blob/master/index.js

dans le modèle Créez le dom requis

<!-- ECharts图表测试 -->
 <p id="charts" style="width:&#39;100%&#39;,height:&#39;3.54rem&#39;">
  <p id="main" :style="{width:&#39;100%&#39;,height:&#39;3.54rem&#39;}"></p>
 </p>

Écrivez js :

export default {
 name: 'Bank',
 data () {
 return {
 }
 },
 components: {
 },
 computed: {
 },
 methods: {
 },
 mounted() {
 /*ECharts图表*/
 var myChart = echarts.init(document.getElementById('main'));
 myChart.setOption({
  series : [
   {
    name: '访问来源',
    type: 'pie',
    radius: '55%',
    itemStyle: {
    normal: {
      // 阴影的大小
      shadowBlur: 200,
      // 阴影水平方向上的偏移
      shadowOffsetX: 0,
      // 阴影垂直方向上的偏移
      shadowOffsetY: 0,
      // 阴影颜色
      shadowColor: 'rgba(0, 0, 0, 0.5)'
     }
    },
    data:[
     {value:400, name:'搜索引擎'},
     {value:335, name:'直接访问'},
     {value:310, name:'邮件营销'},
     {value:274, name:'联盟广告'},
     {value:235, name:'视频广告'}
    ]
   }
  ]
 })
 }
}

Événements dans les eCharts :

ECharts prend en charge les types d'événements de souris classiques , y compris les événements 'click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout'.

// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// Spécifier les éléments de configuration et les données du graphique

var option = {
 xAxis: {
  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {},
 series: [{
  name: '销量',
  type: 'bar',
  data: [5, 20, 36, 10, 10, 20]
 }]
};

// Afficher le graphique en utilisant les éléments de configuration et les données qui viennent d'être spécifiés.

myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
 window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

Tous les événements de souris incluent des paramètres params, qui sont un objet contenant des informations sur le graphique cliqué, au format suivant :

{
 // 当前点击的图形元素所属的组件名称，
 // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
 componentType: string,
 // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
 seriesType: string,
 // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
 seriesIndex: number,
 // 系列名称。当 componentType 为 'series' 时有意义。
 seriesName: string,
 // 数据名，类目名
 name: string,
 // 数据在传入的 data 数组中的 index
 dataIndex: number,
 // 传入的原始数据项
 data: Object,
 // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
 // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
 // 其他大部分图表中只有一种 data，dataType 无意义。
 dataType: string,
 // 传入的数据值
 value: number|Array
 // 数据图形的颜色。当 componentType 为 'series' 时有意义。
 color: string
}

Comment distinguer où le clic de souris :

myChart.on('click', function (params) {
 if (params.componentType === 'markPoint') {
  // 点击到了 markPoint 上
  if (params.seriesIndex === 5) {
   // 点击到了 index 为 5 的 series 的 markPoint 上。
  }
 }
 else if (params.componentType === 'series') {
  if (params.seriesType === 'graph') {
   if (params.dataType === 'edge') {
    // 点击到了 graph 的 edge（边）上。
   }
   else {
    // 点击到了 graph 的 node（节点）上。
   }
  }
 }

});

Vous pouvez obtenir le nom des données et le nom de la série dans cet objet dans la fonction de rappel, puis l'indexer dans votre propre entrepôt de données pour obtenir d'autres informations, puis mettre à jour le graphique, afficher le flottant couche, etc., comme indiqué dans l'exemple suivant Code :

myChart.on('click', function (parmas) {
 $.get('detail?q=' + params.name, function (detail) {
  myChart.setOption({
   series: [{
    name: 'pie',
    // 通过饼图表现单个柱子中的数据分布
    data: [detail.data]
   }]
  });
 });
});

Recommandations associées :

Que dois-je faire si le graphique Echarts est incomplet ?

Explication détaillée de l'utilisation d'Echarts pour générer des rapports statistiques avec PHP

HTML5, JS, JQuery, chargement asynchrone ECharts

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!