search
HomeWeb Front-endJS TutorialDetailed explanation of adding Echarts chart usage in vue
Detailed explanation of adding Echarts chart usage in vueJan 15, 2018 pm 05:11 PM
echartsuseDetailed explanation

We often need to use some line charts, bar charts, pie charts, etc. in our projects. I have used heightCharts before, but later I felt that it was not open source and was a waste of time just for display, so I took a look at eCharts. So eCharts was added to the project built by vue-cli. Below are the specific steps and some of my own study notes. I hope it can help everyone.

The current front-end generally needs to complete the visualization of a large amount of data. Now is the era of big data and cloud computing, so data visualization is gradually becoming a trend. ECharts and d3.js are mature frameworks for visualization. It can be said that the charts produced satisfy your creativity.

Compared with the two, D3 is used by many other table plug-ins. It allows binding arbitrary data to the DOM and then applying data-driven transformations to the Document. You can use it to create basic HTML tables with an array, or take advantage of its fluid transitions and interactions to create stunning SVG bar charts with similar data.

The ECharts chart is more suitable for application, with a gorgeous appearance, but very practical.


The basic template of ECharts is very simple and easier to get started than d3.

Basic use of Echarts charts

1. Add webpack configuration to the vue-cli project, the latest version introduced in this article. Before version 3.1.1, the ECharts package on npm was unofficially maintained. Starting from 3.1.1, the official EFE package maintained the ECharts and zrender packages on npm.

Use npm to add the configuration in the package.json file and download the relevant npm package dependencies

npm install echarts --save

Then add

import echarts from "echarts"
# to the entry js file main.js of the project file ##Create dependent instances in components that need to add icons

var echarts = require('echarts');
Using this method will result in an ECharts package that has loaded all charts and components, so the volume will be relatively large. You can also import only the required modules as needed. For example

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
For the list of various resources, please refer to the github repository on the official website https://github.com/ecomfe/echarts/blob/master/index.js

Create all the resources in the template The required dom

<!-- ECharts图表测试 -->
 <p>
  </p><p></p>
 
is written into 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:'视频广告'}
    ]
   }
  ]
 })
 }
}
Events in eCharts:


ECharts supports conventional mouse event types, including 'click', 'dblclick' ', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout' events.


// 基于准备好的dom,初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
// Specify the configuration items and data of the chart

var option = {
 xAxis: {
  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {},
 series: [{
  name: '销量',
  type: 'bar',
  data: [5, 20, 36, 10, 10, 20]
 }]
};
// Display the chart using the configuration items and data just specified.


myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
 window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
All mouse events include parameter params, which is an object containing data information about the clicked graphic, in the following format:

{
 // 当前点击的图形元素所属的组件名称,
 // 其值如 '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
}
How to distinguish where the mouse clicked:

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(节点)上。
   }
  }
 }

});
You can get the data name and series name in this object in the callback function and then index it in your own data warehouse to get other information and then update the chart, display the floating layer, etc., as shown in the following sample code:

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

What should I do if the Echarts chart is incomplete?

PHP Detailed explanation of using Echarts to generate data statistical reports

HTML5, JS, JQuery, ECharts asynchronous loading

The above is the detailed content of Detailed explanation of adding Echarts chart usage in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
ECharts和Java接口:如何实现统计图表数据导出与分享ECharts和Java接口:如何实现统计图表数据导出与分享Dec 17, 2023 am 08:44 AM

ECharts是一款功能强大、灵活可定制的开源图表库,可用于数据可视化和大屏展示。在大数据时代,统计图表的数据导出和分享功能变得越来越重要。本文将介绍如何通过Java接口实现ECharts的统计图表数据导出和分享功能,并提供具体的代码示例。一、ECharts简介ECharts是百度开源的一款基于JavaScript和Canvas的数据可视化库,具有丰富的图表

使用PHP和ECharts创建可视化图表和报表使用PHP和ECharts创建可视化图表和报表May 10, 2023 pm 10:21 PM

随着大数据时代的来临,数据可视化成为企业决策的重要工具。千奇百怪的数据可视化工具层出不穷,其中ECharts以其强大的功能和良好的用户体验受到了广泛的关注和应用。而PHP作为一种主流的服务器端语言,也提供了丰富的数据处理和图表展示功能。本文将介绍如何使用PHP和ECharts创建可视化图表和报表。ECharts简介ECharts是一个开源的可视化图表库,它由

ECharts入门指南:如何使用EChartsECharts入门指南:如何使用EChartsDec 17, 2023 am 09:26 AM

ECharts入门指南:如何使用ECharts,需要具体代码示例ECharts是一款基于JavaScript的数据可视化库,通过使用ECharts,用户可以轻松地展示各种各样的图表,如折线图、柱状图、饼图等等。本文将为您介绍如何使用ECharts,并提供详细的代码示例。安装ECharts要使用ECharts,您首先需要安装它。您可以从ECharts官网htt

vue3怎么封装ECharts组件vue3怎么封装ECharts组件May 20, 2023 pm 03:22 PM

一、前言前端开发需要经常使用ECharts图表渲染数据信息,在一个项目中我们经常需要使用多个图表,选择封装ECharts组件复用的方式可以减少代码量,增加开发效率。二、封装ECharts组件为什么要封装组件避免重复的工作量,提升复用性使代码逻辑更加清晰,方便项目的后期维护封装组件可以让使用者不去关心组件的内部实现以及原理,能够使一个团队更好的有层次的去运行封装的ECharts组件实现了以下的功能:使用组件传递ECharts中的option属性手动/自动设置chart尺寸chart自适应宽高动态展

利用ECharts和Python接口生成漏斗图的步骤利用ECharts和Python接口生成漏斗图的步骤Dec 17, 2023 am 10:08 AM

利用ECharts和Python接口生成漏斗图的步骤,需要具体代码示例漏斗图是一种常用的数据可视化工具,可以用于展示数据在不同阶段之间的变化情况。利用ECharts和Python接口,我们可以轻松地生成漂亮的漏斗图。下面,将按照以下步骤介绍如何实现漏斗图的生成,并给出具体的代码示例。步骤一:安装ECharts和Python接口首先,我们需要安装ECharts

如何在Python中使用ECharts绘制堆叠柱状图如何在Python中使用ECharts绘制堆叠柱状图Dec 17, 2023 am 09:48 AM

在数据可视化领域,堆叠柱状图是一种常见的可视化方式。它将多个数据系列绘制成一个条形,每个条形由多个子项组成,每个子项对应一个数据系列,在同一坐标系下进行展示。这种图表可以用于比较不同类别或数据系列的总大小、每个类别或数据系列的组成比例等。在Python中,我们可以使用ECharts库来绘制堆叠柱状图,而且该库具有丰富的可定制性和交互性。一、安装和导入ECha

如何利用ECharts和Python接口绘制箱线图如何利用ECharts和Python接口绘制箱线图Dec 17, 2023 am 10:03 AM

如何利用ECharts和Python接口绘制箱线图,需要具体代码示例引言:箱线图(Boxplot)是统计学中常用的一种可视化方法,用于显示实数型数据的分布情况,通过绘制数据的五数概括(最小值、下四分位数、中位数、上四分位数和最大值)以及异常值,可以直观地了解数据的偏态、离散程度和异常值情况。本文将介绍如何利用ECharts和Python接口来绘制箱线图,并

ECharts是什么ECharts是什么Aug 04, 2023 am 10:24 AM

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能,同时还具有定制性强、适配移动端和社区支持等诸多优势,无论是在商业应用、数据分析还是数据展示方面,ECharts都是一个非常值得推荐的工具。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!