安装依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

创建图表

在入口js文件main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在使用echarts的Vue文件中

<div class="BrokenLine" id="BrokenLine" ></div>
.BrokenLine {
display: inline-block;
min-width: 200px;
height: 400px;
width: 50%;
}
methods: {
DoEchart() {
     // 这里我是部分引入,用哪种图就引入哪种,也可以全部引入
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
var BrokenLine = echarts.init(document.getElementById('BrokenLine'));
// 绘制图表
BrokenLine.setOption({
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
});
}
}
 mounted() {
this.DoEchart();
}

运行之后,就能正常出现和使用了

参考资料:https://www.jianshu.com/p/cf0a54374419

Vue 中引入echarts的更多相关文章

  1. Vue中引入echarts。

    1.安装 在终端vue项目的文件夹下运行npm install echarts --save安装依赖 可以使用npm install echarts@("这里可以写版本号") -- ...

  2. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  3. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  4. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

  5. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  6. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  7. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  8. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  9. vue中引入json数据,不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

随机推荐

  1. python练习:假设s是一个字符串,返回s中十进制数字之和。例如,如果s是‘a2b3c’,则返回5。

    python练习:假设s是一个字符串,返回s中十进制数字之和.例如,如果s是‘a2b3c’,则返回5. 重难点:字符串转化为字符序列.in的多种应用.try-except代码块的使用. print(& ...

  2. Centos7 安装virtualenv bash: virtualenv: command not found...的解决

    安装好了python3的环境前提下 1.使用pip3安装virtualenv pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple virt ...

  3. 解决IDEA快捷键 Alt+Insert 失效的问题

    现象 IDEA快捷键 Alt+Inser 失效,单击右键也不出现[Generate]. 这个问题经常出现在重新安装IDEA后. 原因 缺少2个插件 解决办法 在setting中启用这2个插件即可.这2 ...

  4. 棍子Sticks(poj_1011)[经典搜索]

    [题意描述] George用相同的长度棍子,将他们随机切成最多64个单位的长度,现在,他想回到原来的状态,但他忘了他原来的多少根,以及他们原本是多长.请帮助他和设计一个程序,计算最小的可能的原始长度. ...

  5. Java后台技术(线程安全)

    前端时间一个同事因为后台线程安全问题出了一次生产事故,今天我就对线程安全问题进行一次总结. 首先,我们来大致看以下我同事写的代码,代码我进行了精简,大致如下: for (final String re ...

  6. Manjaro 安装 ibus-rime 输入法

    Manjaro 安装 ibus-rime 输入法 安装软件包: sudo pacman -S ibus ibus-rime yay -S ibus-qt 编辑/添加配置文件~/.xprofile: e ...

  7. Springboot学习:Thymeleaf 语法基础

    详细内容见:Thymeleaf Tutorial 中文翻译,中文文档 参考: thymeleaf官方指南 新一代Java模板引擎Thymeleaf Thymeleaf基本知识 thymeleaf总结文 ...

  8. hive3.1.1 hive-site.xml

    <property> <name>hive.metastore.warehouse.dir</name> <value>/data/hive/wareh ...

  9. stackADT

    stack.h #ifndef STACK_H_INCLUDED #define STACK_H_INCLUDED #include <stdbool.h> typedef struct ...

  10. 任意值运动框架Move模块 js

    function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { retur ...