Vue使用echarts的完整步驟及解決各種報(bào)錯(cuò)
前言：
Echarts，它是一個(gè)與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，下次研究。
因?yàn)槲业牧?xí)慣，每次新嘗試做一個(gè)功能的時(shí)候，總要新創(chuàng)建個(gè)小項(xiàng)目，做做Demo。
首先看自己電腦是否安裝了Vue，打開終端命令：vue --version，我以前安裝過Vue，但是不知道為何報(bào)錯(cuò)：
vue/cli Error: Cannot find module ‘@vue/cli-shared-utils‘
注意：如果是全局module出錯(cuò)，就全局更新，如果是項(xiàng)目中module出錯(cuò)，就刪除（rimraf node_modules）重新安裝 (npm i)
解決方法（更新或者重裝）：
npm update -g @vue/cli # 或者 yarn global upgrade --latest @vue/cli
在自己特定的項(xiàng)目文件夾下cmd打開終端
1.vue create echarts
2.默認(rèn)習(xí)慣創(chuàng)建，選擇package.json之后輸入 n 或者 y ，過程簡(jiǎn)略。
cd echarts 到該文件夾下，npm run serve顯示項(xiàng)目運(yùn)行正常：
正式開始嘗試Echarts
建議大家要學(xué)會(huì)看官網(wǎng)文檔：https://echarts.apache.org/handbook/zh/get-started/
能學(xué)習(xí)到兩點(diǎn)：
- 在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)定義了高寬的 DOM 容器。
- 通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡(jiǎn)單的柱狀圖。
基于這兩句話進(jìn)行研究：我通常是在About中嘗試進(jìn)行寫Demo。
Ctrl + C結(jié)束項(xiàng)目。
在項(xiàng)目終端安裝echarts：npm install echarts --save
請(qǐng)注意，2022年后安裝的echarts都是5.X版本，可以在package.json中看到，不知為何，這個(gè)和Vue項(xiàng)目不匹配，導(dǎo)致發(fā)生錯(cuò)誤，知道原因的麻煩在下面留言。
全局引入：在 main.js 中全局引入 echarts
import echarts from "echarts"; Vue.prototype.$echarts = echarts;
在About.Vue中的<template> </template>寫<div id="main" style="width: 600px; height: 400px"></div>，如上圖，對(duì)應(yīng)1. 在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)定義了高寬的 DOM 容器。
<div id="main" style="width: 600px; height: 400px"></div>
對(duì)應(yīng) 2.通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡(jiǎn)單的柱狀圖。這個(gè)需要在script中進(jìn)行操作。
示例一：
drawChart() {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 這個(gè)和上面的main對(duì)應(yīng)
let myChart = this.$echarts.init(document.getElementById("main"));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
let option = {
title: {
text: "ECharts 入門示例",
},
tooltip: {},
legend: {
data: ["銷量"],
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
},
yAxis: {},
series: [
{
name: "銷量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
},
然后新建monted(){},否則會(huì)出現(xiàn)init沒有定義等等錯(cuò)誤。
mounted() {
this.drawChart();
},
到這一步，其實(shí)示例一已經(jīng)完成，但是我們運(yùn)行發(fā)現(xiàn)圖片無法顯示，只有一處警告錯(cuò)誤："export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
起著懷疑的態(tài)度進(jìn)行百度，https://blog.csdn.net/Aom_yt/article/details/110947734 ，給出的原因是“可能還不能支持最新版的echarts5.0” 這句話不一定對(duì)，麻煩知道原因的在下面進(jìn)行評(píng)論。
解決方法：
- 卸載： npm uninstall echarts
- 重裝echarts： npm install echarts@4.9.0
- 重新運(yùn)行項(xiàng)目，發(fā)現(xiàn)成功了。
示例二:
我的需求和目標(biāo)是將https://echarts.apache.org/examples/zh/editor.html?c=bar-race-country&version=5.2.1導(dǎo)入到我的Vue項(xiàng)目中，基于上面1和2原理，上代碼：
<div id="main2" style="width: 1600px; height: 1400px"></div>
drawChart2() {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例 這個(gè)和上面的main2對(duì)應(yīng)
let myChart = this.$echarts.init(document.getElementById("main2"));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
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);
}
});
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
},
mounted() {
this.drawChart2();
},
不一一解釋了，只要你弄懂了示例一，這個(gè)也能運(yùn)行出來，同時(shí)也能舉一反三。
其他：
在學(xué)習(xí)Echarts時(shí)候，發(fā)現(xiàn)這個(gè)用途很廣，很多的人都在使用，也延伸出來了很多包，比如
封裝的D3，簡(jiǎn)化了代碼。https://github.com/Finedl/Vue-echart-D3
示例：
HighCharts，在相比echarts有更多的風(fēng)格等等，如何使用請(qǐng)參考：https://www.highcharts.com/blog/download/
總結(jié)
到此這篇關(guān)于Vue使用echarts的文章就介紹到這了,更多相關(guān)Vue使用echarts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+webpack實(shí)現(xiàn)懶加載過程解析
這篇文章主要介紹了Vue+webpack實(shí)現(xiàn)懶加載過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個(gè)Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue使用openlayers實(shí)現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實(shí)現(xiàn)繪制圓形和多邊形，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起動(dòng)手嘗試一下2022-06-06
vue npm install 安裝某個(gè)指定的版本操作
這篇文章主要介紹了vue npm install 安裝某個(gè)指定的版本操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-04-04
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios，然后項(xiàng)目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料，文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
詳解Electron中如何使用SQLite存儲(chǔ)筆記
這篇文章主要為大家介紹了Electron中如何使用SQLite存儲(chǔ)筆記示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
解決element-ui el-input賦值后不能編輯的問題
這篇文章主要介紹了解決element-ui el-input賦值后不能編輯的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09