Vue使用echarts(完整版,解决各种报错)
前言:Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,下次研究。
因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo。
首先看自己电脑是否安装了Vue,打开终端命令:vue --version,我以前安装过Vue,但是不知道为何报错:
vue/cli Error: Cannot find module ‘@vue/cli-shared-utils‘
注意:如果是全局module出错,就全局更新,如果是项目中module出错,就删除(rimraf node_modules)重新安装 (npm i)
解决方法(更新或者重装):
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
在自己特定的项目文件夹下cmd打开终端
- vue create echarts
- 默认习惯创建,选择package.json之后输入 n 或者 y ,过程简略。
cd echarts 到该文件夹下,npm run serve显示项目运行正常:
正式开始尝试Echarts
建议大家要学会看官网文档:https://echarts.apache.org/handbook/zh/get-started/
能学习到两点:
- 在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
- 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。
基于这两句话进行研究:我通常是在About中尝试进行写Demo。
Ctrl + C结束项目。
在项目终端安装echarts:npm install echarts --save
请注意,2022年后安装的echarts都是5.X版本,可以在package.json中看到,不知为何,这个和Vue项目不匹配,导致发生错误,知道原因的麻烦在下面留言。
全局引入:在 main.js 中全局引入 echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
在About.Vue中的<template> </template>写<div id="main" style="width: 600px; height: 400px"></div>
,如上图,对应1. 在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
<div id="main" style="width: 600px; height: 400px"></div>
对应 2.通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。这个需要在script中进行操作。
示例一:
drawChart() {// 基于准备好的dom,初始化echarts实例 这个和上面的main对应let myChart = this.$echarts.init(document.getElementById("main"));// 指定图表的配置项和数据let option = {title: {text: "ECharts 入门示例",},tooltip: {},legend: {data: ["销量"],},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},
然后新建monted(){},否则会出现init没有定义等等错误。
mounted() {this.drawChart();},
到这一步,其实示例一已经完成,但是我们运行发现图片无法显示,只有一处警告错误:"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
起着怀疑的态度进行百度,https://blog.csdn.net/Aom_yt/article/details/110947734 ,给出的原因是“可能还不能支持最新版的echarts5.0” 这句话不一定对,麻烦知道原因的在下面进行评论。
解决方法:
- 卸载: npm uninstall echarts
- 重装echarts: npm install echarts@4.9.0
- 重新运行项目,发现成功了。
示例二:
我的需求和目标是将https://echarts.apache.org/examples/zh/editor.html?c=bar-race-country&version=5.2.1导入到我的Vue项目中,基于上面1和2原理,上代码:
<div id="main2" style="width: 1600px; height: 1400px"></div>
drawChart2() {// 基于准备好的dom,初始化echarts实例 这个和上面的main2对应let myChart = this.$echarts.init(document.getElementById("main2"));// 指定图表的配置项和数据var ROOT_PATH ="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";// var chartDom = document.getElementById("main");// var myChart = echarts.init(chartDom);var option;const updateFrequency = 2000;const dimension = 0;const countryColors = {Australia: "#00008b",Canada: "#f00",China: "#ffde00",Cuba: "#002a8f",Finland: "#003580",France: "#ed2939",Germany: "#000",Iceland: "#003897",India: "#f93",Japan: "#bc002d","North Korea": "#024fa2","South Korea": "#000","New Zealand": "#00247d",Norway: "#ef2b2d",Poland: "#dc143c",Russia: "#d52b1e",Turkey: "#e30a17","United Kingdom": "#00247d","United States": "#b22234",};$.when($.getJSON("https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json"),$.getJSON(ROOT_PATH + "/data/asset/data/life-expectancy-table.json")).done(function (res0, res1) {const flags = res0[0];const data = res1[0];const years = [];for (let i = 0; i < data.length; ++i) {if (years.length === 0 || years[years.length - 1] !== data[i][4]) {years.push(data[i][4]);}}function getFlag(countryName) {if (!countryName) {return "";}return (flags.find(function (item) {return item.name === countryName;}) || {}).emoji;}let startIndex = 10;let startYear = years[startIndex];option = {grid: {top: 10,bottom: 30,left: 150,right: 80,},xAxis: {max: "dataMax",axisLabel: {formatter: function (n) {return Math.round(n) + "";},},},dataset: {source: data.slice(1).filter(function (d) {return d[4] === startYear;}),},yAxis: {type: "category",inverse: true,max: 10,axisLabel: {show: true,fontSize: 14,formatter: function (value) {return value + "{flag|" + getFlag(value) + "}";},rich: {flag: {fontSize: 25,padding: 5,},},},animationDuration: 300,animationDurationUpdate: 300,},series: [{realtimeSort: true,seriesLayoutBy: "column",type: "bar",itemStyle: {color: function (param) {return countryColors[param.value[3]] || "#5470c6";},},encode: {x: dimension,y: 3,},label: {show: true,precision: 1,position: "right",valueAnimation: true,fontFamily: "monospace",},},],// Disable init animation.animationDuration: 0,animationDurationUpdate: updateFrequency,animationEasing: "linear",animationEasingUpdate: "linear",graphic: {elements: [{type: "text",right: 160,bottom: 60,style: {text: startYear,font: "bolder 80px monospace",fill: "rgba(100, 100, 100, 0.25)",},z: 100,},],},};// console.log(option);myChart.setOption(option);for (let i = startIndex; i < years.length - 1; ++i) {(function (i) {setTimeout(function () {updateYear(years[i + 1]);}, (i - startIndex) * updateFrequency);})(i);}function updateYear(year) {let source = data.slice(1).filter(function (d) {return d[4] === year;});option.series[0].data = source;option.graphic.elements[0].style.text = year;myChart.setOption(option);}});// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},
mounted() {this.drawChart2();},
不一一解释了,只要你弄懂了示例一,这个也能运行出来,同时也能举一反三。
其他:
在学习Echarts时候,发现这个用途很广,很多的人都在使用,也延伸出来了很多包,比如
- 封装的D3,简化了代码。https://github.com/Finedl/Vue-echart-D3
示例:
- HighCharts,在相比echarts有更多的风格等等,如何使用请参考:https://www.highcharts.com/blog/download/
Vue使用echarts(完整版,解决各种报错)相关推荐
- vue解决启动报错cjs loader.js Error: Cannot find module ‘../config‘问题
vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题 参考文章: (1)vue解决启动报错cjs loader.js Error ...
- .vue文件在webstorm中es6语法报错解决方法
.vue文件在webstorm中es6语法报错解决方法 参考文章: (1).vue文件在webstorm中es6语法报错解决方法 (2)https://www.cnblogs.com/yuqing6/ ...
- vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法 参考文章: (1)vue项目初始化时npm run dev报错webpack-dev-server解决方法 ( ...
- 解决MySQL报错ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost:3306‘ (10061)
解决MySQL报错ERROR 2003 HY000: Can't connect to MySQL server on 'localhost:3306' 10061 笔者在新电脑安装完 MySQL ...
- 解决mysql报错ERROR 2002 (HY000)
解决Mysql报错:ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/my ...
- 解决MySQL报错ERROR 2003 (HY000) Can‘t connect to MySQL server on ‘localhost3306‘ (10061)
解决MySQL报错ERROR 2003 HY000: Can't connect to MySQL server on 'localhost:3306' 10061 笔者在新电脑安装完 MySQL 后 ...
- vue项目在vscode中编译eslint报错没显示红色波浪线提示
vue项目在vscode中编译eslint报错没显示红色波浪线提示. 如下图所示: 下图是预期效果: 不符合Eslint校验规则的代码位置都能展示出来,这样一目了然.能帮助我们迅速找到报错的位置. 然 ...
- 解决php报错date():It is not safe to rely....
解决php报错date():It is not safe to rely.... 在练习的过程中,遇到下面的报错信息. 访问页面中提示: date(): It is not safe to rely ...
- css引入报错,vue项目通过import引入外部css报错怎么办
vue项目通过import引入外部css报错的解决办法:首先在[webpack.config.js]中添加相关内容,添加后重新npm run dev:然后json文件中查看是否存在[css-loade ...
最新文章
- Centos7 安装 telnet 服务
- win7电脑恢复系统设置或计算机点不了,Win7系统电脑开机就提示需要启动修复的解决方法...
- [OS复习]设备管理3
- 《那些年啊,那些事——一个程序员的奋斗史》——39
- 「Python」queue库简易教程
- python基础之内置异常对象
- 会计准则应用指南2020pdf_如何提高企业会计准则体系的学习效率和效果
- python颜值分析
- 矩阵水平翻转java,通过翻转1的矩阵的行和列来确定是否可以到达给定二进制矩阵的算法...
- Shell编程-JAVA大数据-Week5-DAY3-linux
- python 通信中间件_Python Web框架Sanic middleware – 中间件
- mongodb 分组聚合_MongoDB学习笔记整理,赶紧收藏起来吧
- C# dataGridView控件 左上角加string
- xml突然变成空白_真实职场故事:开会时候,被领导突然提问,我差点被开除了...
- 牛客网暑期ACM多校训练营(第五场)B. div(技巧+OEIS or Pell方程)
- WPE系统NTPWEdit工具无法打开SAM,显示只读文件怎么修改?
- 杏仁粉的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- Go语言使用RabbitMQ
- Qt--样式表设置按钮样式
- 交换机配置SNMP团体字
热门文章
- linux面试题_互联网linux面试题[含答案]
- 推荐一个会非常好用的记事本工具 ediray
- Pandas实现两个表格内容模糊匹配
- 玩转2023国际无人机应用及防控大会 四大吸睛亮点揭密
- 解析IE6,IE7,火狐浏览器兼容性写法
- 数据库插入数据,居然又报错“ERROR 1366 (22007): Incorrect string value: ‘\xCE\xE4\xBA\xBA\xCA\xD0‘ for column ‘mc“
- 头歌平台Docker企业级实训 第2章 Docker进阶之镜像 镜像管理
- 带你搞懂Thrift核心源码(JAVA)
- 端午节主题风格PPT模板
- 生存资料校准曲线calibration curve的绘制