点击上方蓝字关注我们

首先先安装需要的插件

输入命令：

npm install echarts -S

接着在main.js的文件中进行配置：

// 引入echarts图表插件,并设置成全局变量

import echarts from 'echarts';

Vue.prototype.$echarts = echarts;

接下来在对应的页面中加上UI：

并编写初始化的函数：

// 获取图表对象

let myChart = this.$echarts.init(document.getElementById('myChart'))

// 绘制图表

myChart.setOption({

title: { text: '在Vue中使用echarts' },

tooltip: {},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

});

接下来在初始化的时候调用该函数吧：

参数配置

这时候我们需要查看官网https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

官网中也有明确的使用方式介绍哦，这边就不做赘述了。

在线客服

使用 vue_VUE使用ECharts教程相关推荐

ECharts教程(详细)
ECharts教程(详细) 非常全面的ECharts教程,非常全面的ECharts教程,目前线条/节点颜色.线条粗细.线条样式.线条阴影.线条平滑.线条节点大小.线条节点阴影.线条节点边框.线条节点边 ...
ECharts教程（未完）
ECharts 特性兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) 底层依赖轻量级的矢量图形库 ZRender 丰富的可视化类型常规的折线图.柱状图 ...
php链接echarts教程,图文详解echarts的使用方法（饼状图实例）
在页面布局时经常需要插入一些图表,比如饼状图,柱状图,地图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法 ...
c语言输出漏斗图形7层,ECharts 教程漏斗图属性与实例介绍 - 闪电教程JSRUN
漏斗图属性与实例介绍 ECharts漏斗图在 ECharts 系列中,漏斗图使用 series[i]-funnel 表示.漏斗图适用于业务流程比较规范.周期长.环节多的流程分析,通过漏斗各环节业务数 ...
【Echarts教程】Ajax实现动态加载环状饼图
一.GIF图二.前台码 // 调用方法 workOrderPie();// 定时刷新 setInterval(function () {workOrderPie(); },5000);functio ...
echarts教程（三）：配置多条折线图
多条折线非常简单,只需要在series中写多个元素,并都指定type为line即可 option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'W ...
Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图
Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图一.效果图二.资源主题编辑器 ECharts 教程实现代码------想要进行实战的同学可以研究以下代码,下面的 ...
Apache ECharts各种图表页面展示
ECharts 教程 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. EChar ...
echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.
今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...
echarts 卡_图表太丑怎么破，ECharts神器带你飞！
一.前言在本专栏或文集中,我曾多次使用ECharts绘制图表.进行可视化,也渐渐积累了30多个实例,本文对此前用过的所有图表和代码进行整理并分享,以给想绘制精美图表的人一点绵薄的帮助.其中全部实例已 ...

使用 vue_VUE使用ECharts教程

点击上方蓝字关注我们

使用 vue_VUE使用ECharts教程相关推荐

最新文章

热门文章