1、安装

  • 在终端vue项目的文件夹下运行npm install echarts --save安装依赖
  • 可以使用npm install echarts@(“这里可以写版本号”) --save安装指定版本。

提示我之前使用的第一种方式安装、结果出现了错误、弄了我老半天。最终解决的方法是:通过将之前下载的版本卸载掉、然后安装对应的版本

2、在main.js文件中引入

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、测试

<style scoped>
#sector{
width: 100%;
height: 300px;
margin: 0 auto;
}
</style>
<template>
<div id="sector">
</div>
</template> <script>
import echarts from 'echarts'
export default {
name:'sector',
data() {
return {
option:{
title: {
text: '某站点用户访问来源',
top:'5%',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: {
orient: 'vertical',
left: 'left',
top:'15%',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b} : {c}'
},
labelLine :{show:true}
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
}
}
}
]
} }
},
mounted() {
let this_ = this;
let chart = echarts.init(document.getElementById('sector'));
chart.setOption(this.option);
//建议加上以下这一行代码,不加的效果图如下(当浏览器窗口缩小的时候)。超过了div的界限(红色边框)
window.addEventListener('resize',function() {chart.resize()});
},
methods: {},
watch: {},
created() {
}
}
</script>

4、效果展示

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

  1. Vue 中引入echarts

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

  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. vue-cli 启动项目时空白页面

    vue-cli 启动项目时空白页面 在启动项目时 npm run serve / npm run dev 启动 vue 项目空白页:且终端及控制台都未报错 通过各种查阅发现在项目根目录中 vue-co ...

  2. 为什么企业不愿意升级ERP系统

    前段时间看到一篇文章讲企业为何不愿意升级内部系统的文章,觉得有意思,也想聊聊为何大部分企业不愿意升级ERP的事情. 老东家用的ERP是QAD系统,92年版本,没有图形界面,用户都是通过NetTerm等 ...

  3. 4.直方图介绍和使用|MySQL索引学习

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 一.导读 二.步骤 2.1 SQL语句 2.2 直方图案例 2.3 查看直方图统计信息 2.3 直方图分类 2.4 ...

  4. 字符编码和python中的文件处理

    字符编码与python文件处理 ---------------- 字符编码 1.常见的编码 ASCII: 美国人发明的,只编码英文字母和符号,1个字节. GB2312: 中国人发明的,增加了中文汉字和 ...

  5. LuoguP2254 [NOI2005]瑰丽华尔兹 (单调队列优化DP)(用记忆化过了。。。)

    记忆化 #include <cstdio> #include <iostream> #include <cstring> #include <algorith ...

  6. openstack中Glance组件简解

    一.Glance组件介绍 1.概念 Glance是OpenStack镜像服务,用来注册.登陆和检索虚拟机镜像.Glance服务提供了一个REST API,使你能够查询虚拟机镜像元数据和检索的实际镜像. ...

  7. KingbaseES R6 集群测试job管理测试

    案例说明: 本案例参考<Job And Schedule (V8R6C4)>(https://www.cnblogs.com/kingbase/p/15194227.html)单实例环境下 ...

  8. C# Parallel类For循环与普通For循环耗时性能比较

    1 static void Main(string[] args) 2 { 3 var dt = DateTime.Now; 4 var rand = new Random(DateTime.Now. ...

  9. VSCODE 配置远程调试环境

    以下内容为本人的著作,如需要转载,请声明原文链接微信公众号「englyf」https://www.cnblogs.com/englyf/p/16691460.html 我的需求是,在Windows桌面 ...

  10. PLM产品生命周期管理,包含哪些阶段?

    PLM:Product Lifecycle Management=产品生命周期管理.产品的整个生命周期包括:投入期.成长期.成熟期.衰退期.结束期.PLM系统使企业可以把多年积累的所有产品相关数据放到 ...