vue-echarts和echarts的区别:

  • vue-echarts是封装后的vue插件, 基于 ECharts v4.0.1+ 开发,依赖 Vue.js v2.2.6+,功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。
  • echarts就是普通的js库,

vue-echarts特征:

  • 轻量,高效,按需绑定事件
  • 支持按需导入ECharts.js图表​​和组件
  • 支持组件调整大小事件自动更新视图

git地址:https://github.com/ecomfe/vue-echarts

安装

npm(推荐方式)

$ npm install vue-echarts

bower

$ bower install vue-echarts

手动安装

直接下载 dist/vue-echarts.js 并在 HTML 文件中引入:

<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>

使用方法

用 npm 与 vue-loader 基于 ES Module 引入(推荐用法)

import Vue from 'vue'
import ECharts from 'vue-echarts/components/ECharts.vue'
// 手动引入 ECharts 各模块来减小打包体积
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title.js'
// 注册组件后即可使用
Vue.component('v-chart', ECharts)

用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件

1、webpack 1.x 修改成如下

{
test: /\.js$/,
loader: 'babel',
include: [
  path.join(prjRoot, 'src'),
  path.join(prjRoot, 'node_modules/vue-echarts-v3/src')
], exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
},

2、webpack 2.x 修改成如下

{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
}

调用组件

<style>
.echarts {
width: %;
height: %;
}
</style> <template>
<v-chart theme="ovilia-green" :options="polar"/>
</template> <script>
import ECharts from 'vue-echarts/components/ECharts'
import theme from '../theme.json'
ECharts.registerTheme('ovilia-green', theme); //引入主题
export default {
components: {
'v-chart': ECharts
},
data () {
return {
polar: {
title : {
text: '会员数据统计',
subtext: '动态数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show: true,
orient: 'vertical',
left: 'left',
data: ['微信访问','公众号访问','扫码进入','分享进入','搜索访问']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:, name:'微信访问'},
{value:, name:'公众号访问'},
{value:, name:'扫码进入'},
{value:, name:'分享进入'},
{value:, name:'搜索访问'}
],
itemStyle: {
emphasis: {
shadowBlur: ,
shadowOffsetX: ,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
}
}
</script>

自定义主题

只要把定义主题样式theme.json文件通过下面方法引入即可

import theme from '../theme.json'
ECharts.registerTheme('ovilia-green', theme);

图示:

更多详细信息请参考 ECharts 的 API 文档

Vue使用vue-echarts图表的更多相关文章

  1. 在vue中使用echarts图表

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

  2. vue中添加Echarts图表的使用,Echarts的学习笔记

    项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...

  3. 在内网中 vue项目添加ECharts图表插件

    原文地址:https://www.cnblogs.com/aknife/p/11753854.html 最近项目中要使用到图表 但是项目在内网中无法直接使用命令安装 然后我在外网中弄个vue的项目(随 ...

  4. 在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作

    文章目录 1.实现的效果 2.前端代码 3.后端controller代码 4.servie层代码 5.serviceImpl层代码 6.mapper层代码 7.xml中的sql语句 8.遇到的问题 8 ...

  5. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  6. Vue怎么使用Echarts创建图表

    摘要:在后台管理系统中,我们经常会遇到图表,比如说:柱形图,饼状图,折线图,雷达图等等,而用来写图表插件有很多,我这里主要介绍Echarts在项目里怎么使用,官网地址如下:https://echart ...

  7. vue使用Echarts图表

    vue使用Echarts图表 童话_xxv 关注  0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...

  8. vue学习【一】vue引用封装echarts并展示多个echarts图表

    大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...

  9. Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

  10. vue 引入 echarts 图表 并且展示柱状图

    npm i echarts -S 下载 echarts 图表 mian.js 文件 引入图表并且全局挂载 //echarts 图表 import echarts from 'echarts' Vue. ...

随机推荐

  1. 将matlab数据保存为excel文件

    摘录网址:https://blog.csdn.net/wangh0802/article/details/70312415 参考网址:https://jingyan.baidu.com/article ...

  2. Entity Framework入门教程(9)---离线场景附加实体图集到上下文

    附加离线实体图集到上下文 这节主要内容是通过不同的方法将离线实体附加到上下文中. 在离线场景中,保存一个实体要略微困难一些.当我们保存一个离线的实体图集或一个单独的离线实体时,我们需要做两件事.首先, ...

  3. c# mvc 在控制器中动态解析cshtml文件并获取对应的html代码

    public static string GetViewHtml(ControllerContext context, string viewName, Object param) { if (str ...

  4. 16、爬取知乎大v张佳玮的文章“标题”、“摘要”、“链接”,并存储到本地文件

    爬取知乎大v张佳玮的文章“标题”.“摘要”.“链接”,并存储到本地文件 # 爬取知乎大v张佳玮的文章“标题”.“摘要”.“链接”,并存储到本地文件 # URL https://www.zhihu.co ...

  5. Generator和Coroutine学习

    简单的生产者消费者模型 #!/usr/bin/python2.7 def consumer(): while True: newn = yield print 'Consumer : {}'.form ...

  6. 实现线程安全先进先出的dict

    # encoding:utf-8 from collections import OrderedDictfrom collections import MutableMappingfrom threa ...

  7. 查看oracle当前的连接数

    SQL> select count(*) from v$session #当前的连接数SQL> Select count(*) from v$session where status='A ...

  8. PGCD2 - Primes in GCD Table (Hard)

    这题肝了三四天,其他啥也没做... 传送门 然后...双倍经验 简单版 不知道为什么会脑抽去帮 LZ_101 大佬验题... 题目和被 A 穿的 PGCD 一样,数据范围变成大概 2e11 ... 于 ...

  9. Centos6.X搭建Squid为YUM做代理

    1.在能联网的机器上安装 Squid yum install squid 2.配置squid vi /etc/squid/squid.conf 编辑内容如下: http_port cache_mem ...

  10. ROS-十步完成ROS-indigo安装

    Ubuntu 版本是14.04.5.(这个版本的ubuntu的内核是V4.4的内核,长期维护到2019年,是14代比较稳定的,反正用这个安装就没有什么依赖的头疼的问题,安装ROS很方便,可以去清华的网 ...