vue2.0_在vue中使用echarts图表插件
说明:本例子基于vue-cli脚手架搭建
首先,安装echarts依赖
npm install echarts -S
注:安装NodeJS之后,使用npm来安装包使用的是国外的地址,经常会出现超时错误,这时可以通过修改为国内的淘宝镜像来加速安装。
//淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
在main.js中全局引入
//引入echarts
import echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;
example.vue中
html部分
<template><div id="container"><!--图表容器--><div id="newCharts"></div></div>
</template>
css部分
<style lang="scss" scoped>#container {width: 100%;height: 100vh;padding-top: 100px;#newCharts{margin: 0 auto;width: 800px;height: 800px;}}
</style>
js部分
<script>export default {name: "example",data() {return {formatter:'¥{value}',}},mounted() {this.showCharts();},methods: {// 展示折线图showCharts(){// 基于准备好的dom,初始化echarts实例let myChart = this.$echarts.init(document.getElementById('newCharts'));//也可以通过$refs.newCharts的方式去获取到dom实例。// 绘制图表myChart.setOption({title: { text: '在vue中使用echarts绘制图表' },//图标的标题// X轴xAxis: {type: 'category',//坐标轴类型,类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据//坐标轴刻度相关设置axisTick: {alignWithLabel: true,//为true时,可以让刻度跟底部的标签内容对齐},data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],//X轴的刻度数据name: "时间",//坐标轴名称nameLocation: "start",//坐标轴名称显示位置//坐标轴名称的文字样式nameTextStyle: {align: "center",//文字水平对齐方式,默认自动verticalAlign: "top",//文字垂直对齐方式,默认自动lineHeight: 28,//行高fontSize: 10,//字体大小color: "rgba(0, 0, 0, 1)"//字体颜色},//坐标轴刻度标签的相关设置axisLabel: {interval: 'auto'//坐标轴刻度标签的显示间隔,在类目轴中有效。可以设置成 0 强制显示所有标签,如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示『隔两个标签显示一个标签』,以此类推。}},// Y轴yAxis: {type: 'value',//坐标轴类型,'value' 数值轴,适用于连续数据//坐标轴刻度标签的相关设置axisLabel: {formatter: this.formatter//刻度标签的内容格式器,支持字符串模板和回调函数两种形式。简单讲就是可以自己格式化标签的内容。},},//直角坐标系内绘图网格,简单理解指的就是这个折线图。grid: {left: 50//grid 组件离容器左侧的距离},// 数据series: [{data: [155,45,87,123,89,116,173],//折线图要展示的数据type: 'line'//数据以什么样的类型展示。line为折线图}]})}}}
</script>
注释:如果上面的折线图setOption配置项里头的很多属性,包括很多没有写上去的属性,大家想要有一个更加清晰的了解的话,可以点击下面链接详情查看。
echarts绘制图表中,setOption配置项手册
注意: 这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用的。
当我们例子写好后,一运行,哎,很多人要开始骂我了,什么鬼,怎么报错了,折线图呢?
不要急,我还没讲完呢,且听我细听分说。
当我们运行项目,打开游览器之后,就会发现控制台报了一个错误,如下图所示:
解决办法:
//引入echarts
import * as echarts from 'echarts'//在import的后面,echarts的前面加一个 * as
//vue全局注入echarts
Vue.prototype.$echarts = echarts;
改完之后,运行,结果如下:
这样,一个简单的折线图例子就出来了,但是我在这里有必要提醒大家,上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入的比较好。
按需引入
在main.js中按需引入
//引入 ECharts 主模块
let echarts = require('echarts/lib/echarts');
//按需引入echart折线图等组件
require('echarts/lib/chart/line');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/grid');
//vue全局注入echarts
Vue.prototype.$echarts = echarts;
这里之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全。
问题解决!!!!
如果大家觉得我写的不错的可以点个赞支持一下,如果觉得对你有帮助的可以加以收藏。
更多详情操作,可以参考官方文档入门手册→
vue2.0_在vue中使用echarts图表插件相关推荐
- Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
- Vue中使echarts图表自适应
Vue中使echarts图表自适应 1.先在main.js中自定义一个全局指令,如下 // 定义全局指令 Vue.directive('resize', { // 使用局部注册指令的方式// 指令的名 ...
- vue2.0_在vue中实现input输入框的模糊查询
前言 我们要实现的一个效果是,当输入框输入值时,显示数据列表框并将检索到的数据在列表框当中做展示. 模糊查询功能原理分析 其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询,也就是说用 ...
- vue socketio 实现echarts图表动态显示
本文主要为续之前vue和flask使用socketio实现互连的文章,记一下我的Vue项目中使用echarts实现动态图表的方法. 如仍然不了解 socketio 的使用方法,可点击此看我之前写的关于 ...
- vue 工程中加入 echarts 图表不显示的问题
vue 工程中加入 echarts 图表不显示的问题 一.问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式 二.vue工程使用echarts vue官方教程 1. 安装 ...
- 在Vue中使用eCharts的地图图表,及生成自定义地图数据(乡镇级)
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录 一.在Vue使用ECharts地图功能 二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
- 【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...
- echart高级使用_Vue:在Vue中使用echarts
前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
- vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
最新文章
- 码云新建仓库,与本地仓库关联
- springmvc处理流程
- Linux 5.4 rc1发布: 正式支持Leez P710开发板(转载)
- mysql function_MySQL里event_ scheduler导致复制中断的故障分析-爱可生
- android监听通知消息 脚本,Bash玩转脚本4之搞一套完整的Android反编译与分包工具...
- python扫描app接口_[分享】python+requests对app和微信小程序进行接口测试
- 23种设计模式(二十)数据结构之迭代器
- JDBC 常用的类和接口--一学就会(欢迎转载)
- 2022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
- 软件配合HT8691功放使用技巧
- LeetCode 到最近的人的最大距离
- OKR | 我们的目标是称霸全国!
- office 论文 页码_word如何设置毕业论文页码
- AutoCAD.NET开发:PaletteSet
- 场景文字识别论文阅读
- python123 第四次作业_第四次作业
- Linux服务器开发,Posix API与网络协议栈
- 2017初秋最时髦服装搭配,裙子+短靴搭配
- linux分区sda和sdb合并,给系统新添加硬盘sdb后,怎么分配给sda下某个分区
- 【报错解决】expected single matching bean but found 2
热门文章
- Windows启动和停止jar包命令
- vue中使用mapboxgl 加载天地图初始化并打点marker以及逆地理编码
- 方法是学习和进步的捷径
- 毫无头绪的自学Python,你可能连门槛都摸不到!【最佳学习路线】
- ASLFeat(CVPR 2020)特征点检测论文笔记
- leetcode刷题优质题解(C++,Python,Go语言)
- 学习virtuoso软件过程-Linux基本命令篇
- 小米10至尊纪念版和iPhone12哪个好 小米10至尊纪念版和iPhone12参数对比
- 萌新iOS开发者看WWDC19
- 网上采购android智能手机,在这里您可以订购 Sony Android智能手机