Vue通过echarts实现数据图表化显示

目录
  • 一、项目引入echarts
  • 二、创建容器
  • 三、配置图表

一、项目引入echarts

ecahrts官网

官网有许多图表案例，并且可以直接复制对应的配置代码。

vue项目中引入：

安装

npm install echarts --save

引入echarts

全部一次性引入：

import * as echarts from 'echarts';

按需引入：

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

对于入门学习，不考虑项目的体积等问题，直接全部引入即可。

我看有的教程是直接在main.js中将echarts挂载到vue实例上的，但我感觉在需要使用图表的组件或者页面中直接引入更好。

二、创建容器

我们需要创建一个容器（就是一个div块）来挂载将要渲染的图表。

<div id="main"></div>

在js中获取：

let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);

使用ref同理。

在vue组件中有个更方便的方式（仅适用于当前组件只渲染一个ecahrts图表情况），可以直接使用this.$el来获取当前组件的dom。

let chartDom = this.$el;
let myChart = echarts.init(chartDom);

三、配置图表

echarts是基于一个option对象（配置对象）来进行图表配置的。

下面是一个常见折线图的option配置对象：

项目完整代码：

<template>
  <div id="main"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data(){
    return{
    }
  },
  mounted() {
    let chartDom = document.getElementById('main');
    let myChart = echarts.init(chartDom);
    let option;

    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
    option && myChart.setOption(option);
  }
}
</script>
<style scoped>
#main{
  width: 500px;
  height: 500px;
}
</style>

效果：

注意：

1、一定要给容器设置宽高，不然默认宽高为0，页面不会显示图表。

2、需要在mounted生命周期中获取dom，在created周期中是无法获取到dom的，自然无法完成图表的挂载。

到此这篇关于Vue通过echarts实现数据图表化显示的文章就介绍到这了,更多相关Vue echarts内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue echarts实现横向柱状图

    vue echarts实现横向柱状图

    本文实例为大家分享了vue echarts实现横向柱状图的具体代码,供大家参考,具体内容如下 实现效果: 代码: <template> <div class="OverYearsPompany"> <div id="OverYearsPompanyChart" style="flex: 1; height: 368px; margin-top: -42px"></div> </div>

  • Vue使用Echarts实现立体柱状图

    Vue使用Echarts实现立体柱状图

    本文实例为大家分享了Vue使用Echarts实现立体柱状图的具体代码,供大家参考,具体内容如下 预览: 代码: 页面部分: <template> <div class="roadnum-all" ref="roadnumall"> <div id="roadnum" ref="dom"></div> </div> </template> CSS部分: .r

  • vue+echarts实现进度条式柱状图

    vue+echarts实现进度条式柱状图

    本文实例为大家分享了vue+echarts实现进度条式柱状图的具体代码,供大家参考,具体内容如下 效果图如下 代码: <template> <div class="content-page"> <div class="tab-content"> <div id="myChart1"></div> </div> </div> </template> &l

  • vue+echarts实现堆叠柱状图

    vue+echarts实现堆叠柱状图

    本文实例为大家分享了vue+echarts实现堆叠柱状图的具体代码,供大家参考,具体内容如下 echarts-子组件 <template> <div class="chart" ref="chartEle"></div> </template> <script> import echarts from "echarts"; import eventBus from '@/componen

  • vue echarts实现柱状图动态展示

    vue echarts实现柱状图动态展示

    本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码,供大家参考,具体内容如下 轮播图形式展现 <template> <div class="dan"> <div id="scalesize" :style="{width: '100%', height: '100%'}"></div> </div> </template> <script> i

  • 详解vue使用Echarts画柱状图

    详解vue使用Echarts画柱状图

    目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts 1.1 安装 使用如下命令通过 npm 安装 ECharts npm install echarts --save 注:本文安装Echarts版本为:“echarts”: “5.2.1” 1.2 引入 安装完成以后,可以将echarts全部引入,这样一来,我们可以在该页面使用echarts所有组件:

  • vue2.0 自定义 饼状图 (Echarts)组件的方法

    1.自定义 图表 组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 --> <div id="myChart" :style="echartStyle"></div> </div> </template> <script> export default { props: {

  • Vue通过echarts实现数据图表化显示

    Vue通过echarts实现数据图表化显示

    目录 一.项目引入echarts 二.创建容器 三.配置图表 一.项目引入echarts ecahrts官网 官网有许多图表案例,并且可以直接复制对应的配置代码. vue项目中引入: 安装 npm install echarts --save 引入echarts 全部一次性引入: import * as echarts from 'echarts'; 按需引入: // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口. import * as echarts fr

  • Vue联动Echarts实现数据大屏展示

    Vue联动Echarts实现数据大屏展示

    目录 1.安装echarts.js 2.新建vue界面 3.引入 ECharts 4.创建Vue方法和图表信息 5.效果样式 6.通过官网查找自己喜欢的样式 7.组件重复使用 1.组件重复使用定义 2.当前页面数据传递子组件中 1.安装echarts.js npm install echarts --save 2.新建vue界面 <template> <!-- 定义echarts需要控制的dom元素 --> <div :style="{height:height,w

  • vue使用Echarts设置数据无效问题记录及解决方法

    vue使用Echarts设置数据无效问题记录及解决方法

    目录 场景: 遇到的问题: 最终解决方案: 小结: 场景: 做一个动态的柱状图,模拟socket效果,如图所示: 遇到的问题: 元数据格式是这样的: config: { data: [ { name: '义乌市', value: 169 }, { name: '东阳市', value: 123 }, { name: '武义县', value: 98 }, { name: '兰溪市', value: 75 }, { name: '金东区', value: 66 }, ], colors: ['#e

  • Vue使用Echarts实现数据可视化的方法详解

    Vue使用Echarts实现数据可视化的方法详解

    目录 一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Echarts 2.3 使用模板 2.4实例 2.4.1柱状图(折线图变换) 2.4.2极坐标柱状图标签 总结 一,Echarts 一个基于 JavaScript 的开源可视化图表库 Echarts官网 https://echarts.apache.org/zh/index.html 1.1 获取ECharts (1)从 npm 获取(项

  • Vue使用Echarts图表多次初始化报错问题的解决方法

    Vue使用Echarts图表多次初始化报错问题的解决方法

    目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex

  • vue.js中使用echarts实现数据动态刷新功能

    在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础.我们再设想一下, 如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据. 所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能: watch:{ option:function(newval

  • vue基于Echarts的拖拽数据可视化功能实现

    vue基于Echarts的拖拽数据可视化功能实现

    背景 我司产品提出了一个需求,做一个数据基于Echars的可拖拽缩放的数据可视化,上网百度了一番,结果出现了两种结局,一种花钱买成熟产品(公司不出钱),一种没有成熟代码,只能自己写了,故事即将开始,敬请期待.......  不,还是先上一张效果图吧,请看...... 前期知识点 1. offset(偏移量) 定义:当前元素在屏幕上占用的空间,如下图: 其中: offsetHeight: 该元素在垂直方向上的占用的空间,单位为px,不包括margin. offsetWidth:该元素在水平方向上的

  • Vue实现Echarts图表宽高自适应的实践

    目录 1. 安装并引入 2. 定义防抖函数 3.  绘制图表代码 init 方法 resize 方法官网解释 1. 安装并引入 npm install echarts --save //main.js // import echarts from 'echarts'; import * as echarts from 'echarts'; // 如果安装的是echarts 5以上版本,则需此种方式引入 Vue.prototype.$echarts = echarts 2. 定义防抖函数 传送门:

  • vue+echarts实现数据实时更新

    本文实例为大家分享了vue+echarts实现数据实时更新的具体代码,供大家参考,具体内容如下 今天在管理后台新增一个图表,用了echarts,记录一下 根据数据实时更新 安装 npm install echarts --save 然后在main.js中配置一下 import echarts from 'echarts' Vue.prototype.$echarts = echarts 可以了,接下来就是在你需要用的页面写了 // html 宽高还是尽量固定吧,不然会出现一些奇奇怪怪的问题 <d

  • 使用antv替代Echarts实现数据可视化图表详解

    使用antv替代Echarts实现数据可视化图表详解

    目录 前言 面积图 常用参数文档 图表 度量 scale 提示 tooltip 坐标系 axis chart.line(options) chart.area(options) geom.position() geom.color() geom.shape() 柱状图 数据标签 label chart.coordinate() chart.interval(options) 地图 地图容器配置项 map 地图等级 viewLevel 小结 前言 技术永无止尽,多看看不同风景 周一,还在愉快的为移

随机推荐