vue結合echarts繪制一個支持切換的折線圖實例
更新時間：2022年10月22日 10:22:58 作者：不染-9732
這篇文章主要介紹了vue結合echarts繪制一個支持切換的折線圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue+echarts繪制一個支持切換的折線圖
在項目中做了一個基礎的折線圖效果，樣式如下
接下來主要記錄在項目中echarts的使用流程
主要關注《xxx》中的內容，其余部分依項目不同而變化
- 折線圖如何添加陰影
- 折線圖如何進行線段切換
- 折線圖如何進行動態(tài)數(shù)據(jù)綁定
- 折線能夠從0開始顯示，兩端不留空白
- echarts在項目中的使用流程
// 頁面初始天氣數(shù)據(jù)的獲取
getWeatherNew(eeiId) {
var option = {};
let _this = this;
《==注意內外數(shù)據(jù)的this指向問題 下面有四個變量this指向作用域外，需要提前記錄外部this==》
api.getWeatherNew(eeiId).then((res) => {
this.weatherData = res.data.hourlyDTOList;
// 天氣狀態(tài)加載
_this.weatherSpan.text = this.weatherData[0].text;
_this.weatherSpan.temp = this.weatherData[0].temp;
_this.weatherSpan.windDir = this.weatherData[0].windDir;
_this.weatherSpan.windScale = this.weatherData[0].windScale;
option = {
legend: {
icon: "rect",
data: ["溫度", "風力"],
《==這里data對應下面的series中的name，name不同對應不同的折線效果==》
textStyle: {
//文字樣式
color: "#c1dafc",
fontSize: "14",
},
right: "9%",
top: "14%",
selectedMode: "single",
},
tooltip: {
trigger: "axis",
},
xAxis: {
《==折線能夠從0開始顯示，兩端不留空白==》
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#fff",
},
},
type: "category",
splitLine: {
lineStyle: {
color: "#29457e",
},
},
axisLabel: {
interval: 0,
},
《==這里使用了function的方法進行動態(tài)的數(shù)據(jù)綁定，主要用于提取接口中的前十個數(shù)據(jù)內容==》
data: (function () {
var x = [];
for (let i = 0; i < 10; i++) {
// 時間橫坐標
x.push(_this.weatherData[i].fxTime.split("T")[1].slice(0, 5));
}
return x;
})(),
},
yAxis: [
{
type: "value",
axisTick: {
//y軸刻度線
show: false,
},
name: "單位：(°C/級)",
axisLabel: {
formatter: "{value}",
},
axisLine: {
lineStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
type: "dashed",
},
},
},
],
series: [
{
name: "溫度",
type: "line",
symbol: "circle", //折線點設置為實心點
《==為折線添加陰影并支持透明度==》
areaStyle: {
normal: {
color: "rgba(255, 255, 255, 0.2)",
},
},
itemStyle: {
normal: {
color: "#4DF9FF", //折線數(shù)據(jù)點顏色
lineStyle: {
color: "#fff",
},
},
},
data: (function () {
var x = [];
for (let i = 0; i < 10; i++) {
// 時間橫坐標
x.push(_this.weatherData[i].temp);
}
return x;
})(),
},
{
name: "風力",
type: "line",
symbol: "circle", //折線點設置為實心點
areaStyle: {
normal: {
color: "rgba(255, 255, 255, 0.2)",==》折線圖添加掃過區(qū)域的陰影和背景色透明度
},
},
itemStyle: {
normal: {
color: "#4DF9FF", //折線數(shù)據(jù)點顏色
lineStyle: {
color: "#fff",
},
},
},
data: (function () {
var x = [];
for (let i = 0; i < 10; i++) {
// 時間橫坐標
x.push(_this.weatherData[i].windScale.slice(0, 1));
}
return x;
})(),
},
],
};
this.option = option;
《==這里是echarts基礎的繪制綁定部分，需要注意的是綁定的元素必須要有寬高，否則不顯示==》
// 天氣圖表的繪制
let chartWeather = echarts.init(
document.getElementById("chartWeather")
);
chartWeather.setOption(option);
this.weatherChange();
});
},
這里是關于第一次如何在項目中引入echarts的記錄
npm install echarts --save ? ? ? 《==下載echarts插件==》
main文件中引入echarts
使用echarts實現(xiàn)折線圖問題
前端可視化是一個前端最基本的技能，要想做的好看，還是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？這個官網(wǎng)沒有給出實例，實例基本都是在jquery里面使用，引入的例子。
Echarts官網(wǎng)：https://echarts.apache.org/zh/index.html
1:在項目里面安裝echarts
cnpm install echarts --s
2：在需要用圖表的地方引入
import echarts from "echarts";
3：打開vue組件，繼續(xù)寫代碼，代碼如下：
<template>
<div id="app">
<!--為echarts準備一個具備大小的容器dom-->
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "",
data() {
return {
charts: "",
opinionData: ["3", "2", "4", "4", "5"],
};
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: "axis",
},
legend: {
data: ["近七日收益"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["1", "2", "3", "4", "5"],
},
yAxis: {
type: "value",
},
series: [
{
name: "近七日收益",
type: "line",
stack: "總量",
data: this.opinionData,
},
],
});
},
},
//調用
mounted() {
this.$nextTick(function () {
this.drawLine("main");
});
},
};
</script>
<style scoped>
</style>這個時候，可以看到，加載出的折線圖了，后面可以繼續(xù)進行完善。
以上完成的，只是一個靜態(tài)頁面，下面就開始完成動態(tài)數(shù)據(jù)渲染部分的折線圖部分啦~~
1：進入項目，npm安裝
npm install axios --save
2：在main.js下引用axios
import axios from 'axios'
3：準備json數(shù)據(jù)
{
"categories": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
],
"data": [
3,
2,
4,
4,
5
]
}
4：跨域問題
一般后端小伙伴給到我們這邊的接口里面，應該對跨域問題已經(jīng)處理好了，所以不需要我們處理了。
如果需要我們處理，我們可以設置代理，利用proxyTable屬性實現(xiàn)跨域請求
在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代碼
（這里處于安全考慮，我隱藏了自己的而服務器域名，如果需要測試，改成你自己的即可）
proxyTable: {
'/api': {
target: 'http://inxxxe.com',//設置你調用的接口域名和端口號
changeOrigin: true,//允許跨域
pathRewrite: {
'^/api': '' //這個是定義要訪問的路徑，名字隨便寫
}
}
},
5：打開一個界面test.vue，開始寫請求數(shù)據(jù)的方法
methods: {
getData() {
axios.get('/api/test.json').then(response => {
console.log(response.data);
this.opinionData =response.data.data;
this.drawLine('main')
}, response => {
console.log("error");
});
},
}
6：再次運行
npm run dev
運行成功之后，打開f12，查看network的請求
這個時候，我們可以看見，本地的localhost替代 了我之前放在服務器上的鏈接的域名，這也是設置代理成功，就解決了跨域的問題了。
請求成功
response里面也有返回值，ok,下一步就要開始將這些數(shù)據(jù)渲染在前端界面上面了。
test.vue參考代碼：
<template>
<div>
<!--為echarts準備一個具備大小的容器dom-->
<div id="main" style="width: 600px;height: 400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import axios from "axios";
export default {
name: '',
data() {
return {
charts: '',
/* opinionData: ["3", "2", "4", "4", "5"]*/
opinionData: []
}
},
methods: {
getData() {
axios.get('/api/test.json').then(response => {
console.log(response.data);
this.opinionData =response.data.data;
this.drawLine('main')
}, response => {
console.log("error");
});
},
drawLine(id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: ['近七日收益']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ["1","2","3","4","5"]
},
yAxis: {
type: 'value'
},
series: [{
name: '近七日收益',
type: 'line',
stack: '總量',
data: this.opinionData
}]
})
},
},
//調用
mounted() {
this.getData();
}
}
</script>實現(xiàn)效果
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
這篇文章主要介紹了vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue使用swiper插件實現(xiàn)垂直輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue3中使用Pinia修改State的五種方式,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
vue實現(xiàn)點擊導航欄滾動頁面到指定位置的功能(推薦)
這篇文章主要介紹了vue實現(xiàn)點擊導航欄滾動頁面到指定位置的功能(推薦),步驟一是是通過獲取不同板塊的滾輪高度,步驟二通過編寫執(zhí)行滾動操作的函數(shù),結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue?表格單選按鈕的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們日常開發(fā)中，表格業(yè)務基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11
el-date-picker設置日期默認值兩種方法(當月月初至月末)
這篇文章主要給大家介紹了關于el-date-picker設置日期默認值(當月月初至月末)的相關資料,文中通過代碼示例將解決的辦法介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,這篇文章將為大家詳細介紹一下vue-dplayer視頻播放器組件的安裝與使用,需要的小伙伴可以參考下2023-09-09
這篇文章主要介紹了在Vue中如何使用Cookie操作實例的相關資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Vue SSR 即時編譯技術的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05