vue3使用echarts繪制折線圖的代碼示例
更新時間：2023年07月31日 11:11:58 作者：大聰明2_0
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實現(xiàn)繪制折線圖,文中有詳細(xì)的示例代碼供大家參考,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
簡單折線圖配置
引入echarts
``` npm install echarts //下載依賴
import * as echarts from 'echarts' //引入初始化及其調(diào)用
```const renderChart = () => {
const el = document.querySelector('“獲取到元素”')
const myChart = echarts.init(el)
myChart.setOption(
{
xAxis: {
type: 'category', //x軸類型
data: ['', '5', '10', '15', '20', '25', '30'],
axisLine: { //坐標(biāo)軸軸線相關(guān)設(shè)置。數(shù)學(xué)上的x軸
show: false, //不顯示X軸
lineStyle: {//X軸樣式
color: "rgba(100,100,100,1)" //X軸字體顏色
}
},
axisPointer: { //坐標(biāo)軸指示器配置項
type: 'shadow'
},
boundaryGap: false,//坐標(biāo)軸兩邊留白
axisTick: { // 是否顯示坐標(biāo)軸刻度
show: false, //不顯示刻度
alignWithLabel: true //刻度與標(biāo)簽對齊
},
axisLabel: { // 坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置
color: '#666', //字體顏色
fontSize: 12 //字體大小
}
},
yAxis: {
type: 'value', // y軸類型
min: 0, // y軸最小值
max: 100, // y軸最大值
interval: 20, // y軸間隔
splitLine: { //網(wǎng)格線
show: true,
lineStyle: { // 網(wǎng)格線樣式
color: '#d9d9d9',// 網(wǎng)格線顏色
type: 'dashed', //設(shè)置網(wǎng)格線類型 dotted：虛線 solid:實線
width: 1 //設(shè)置網(wǎng)格線寬度
}
},
axisLine: { //坐標(biāo)軸軸線相關(guān)設(shè)置。數(shù)學(xué)上的x軸
show: false //不顯示X軸
},
axisTick: { // 是否顯示坐標(biāo)軸刻度
show: false //不顯示刻度
},
splitArea: { //網(wǎng)格區(qū)域
show: false //不顯示網(wǎng)格區(qū)域
}
},
grid: { //圖表位置
top: '30px',
left: '0px',
right: '10px',
bottom: '0px',
containLabel: true, // 是否預(yù)留坐標(biāo)軸寬度
},
series: [ //數(shù)據(jù)
{
// q: 如何讓x軸也共享y軸上的0
// a: 1.設(shè)置y軸的min為0
data: [4, 43, 23, 76, 45, 4, 43], //數(shù)據(jù)
type: 'line',//
smooth: true,//平滑曲線
symbol: 'circle',
symbolSize: 0,//拐點大小
itemStyle: {//拐點顏色
color: '#00a0e9' //拐點顏色
},
lineStyle: {//線條顏色
color: '#00a0e9' //線條顏色
}
}
]
}
)
}效果圖：
稍微復(fù)雜折線圖
封裝成了一個組件，和上面的簡單折線圖多了一些配置，直接上代碼：
``` <script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
const brokenLine = () => {
//獲取對應(yīng)的dom元素
const el = document.querySelector('.chart-box1')
// 初始化
const myLine = echarts.init(el)
// 設(shè)置option
let option = ref({})
myLine.setOption(
option.value = {
tooltip: { //類似于hover效果鼠標(biāo)放上顯示彈框
borderColor: '#EBEEF5',
borderWidth: 1,
padding: [5, 16, 5, 14],
trigger: 'axis', //觸發(fā)類型為坐標(biāo)軸
backgroundColor: 'rgba(255,255,255,0.96)',
formatter: (params) => {
return (
'<span style="color:#818693;font-size:12px;margin-right:17px;margin-bottom:4px;display:inline-block">日期：</span>' +
'<span style="color:#20232A;font-size:12px;display:inline-block">' +
params[0].name +
'</span>' +
'<br />' +
('<span style="color:#818693;font-size:12px;margin-bottom:4px;display:inline-block">訂單總量：</span>' +
'<span style="color:#20232A;font-size:12px;display:inline-block;float:right">' +
params[0].data +
'筆' +
'</span>')
)
}
},
grid: { //圖表位置
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true // 是否預(yù)留坐標(biāo)軸寬度
},
xAxis: {
type: 'category', //x軸類型
boundaryGap: true, // 坐標(biāo)軸兩邊留白
data: ['2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04'], //x軸數(shù)據(jù)折線圖下面數(shù)據(jù)
axisLabel: { // 坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
show: true, //顯示x軸
interval: 0, // 設(shè)置為 1，表示『隔一個標(biāo)簽顯示一個標(biāo)簽』
textStyle: {
color: '#20232A',
fontStyle: 'normal',
fontFamily: '微軟雅黑',
fontSize: 12
},
margin: 17
},
axisTick: {
// 坐標(biāo)軸刻度相關(guān)設(shè)置。
show: false , //不顯示刻度
alignWithLabel:true // 刻度與標(biāo)簽對齊
},
axisLine: { //坐標(biāo)軸軸線相關(guān)設(shè)置 --x軸
// 坐標(biāo)軸軸線相關(guān)設(shè)置
lineStyle: { // x軸樣式
color: '#E5E9ED' // x軸字體顏色
// opacity:0.2
}
},
splitLine: {//splitLine的作用是將坐標(biāo)軸上的數(shù)值分隔開來，splitLine通常是水平或垂直的，
// 坐標(biāo)軸在 grid 區(qū)域中的分隔線。
show: false, // 不顯示x軸
lineStyle: { //x軸樣式
color: '#E5E9ED'
// opacity:0.1
}
}
},
yAxis: [
{
type: 'value', //y軸類型
// splitNumber: 5, //刻度的數(shù)量
axisLabel: { //axisLabel指的是坐標(biāo)軸上的標(biāo)簽，用于標(biāo)識坐標(biāo)軸上每個刻度所代表的具體數(shù)值。axisLabel通常包括數(shù)值的單位和數(shù)值的格式等信息，以幫助讀者更好地理解數(shù)據(jù)。
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微軟雅黑',
fontSize: 12
}
},
axisLine: { //坐標(biāo)抽軸線相關(guān)設(shè)置
show: false //不顯示
},
axisTick: { //是否顯示坐標(biāo)軸刻度
show: false //不顯示
},
splitLine: { //網(wǎng)格線
show: true,
lineStyle: { //網(wǎng)格線樣式
color: '#E5E9ED'
// opacity:0.1
}
}
}
],
series: [
{
symbol: 'circle', //類型
symbolSize: 6, //拐點大小
name: '2019',
type: 'line',
itemStyle: { //拐點顏色
normal: {
color: '#E25433',
lineStyle: { //線條顏色
color: '#E25433',//線條顏色
width: 1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(225,85,54,0.21)'
},
{
offset: 1,
color: 'rgba(225,85,54,0.00)'
}
])
}
}
},
data: [24322, 74423, 12244, 13312, 14132, 15532], //數(shù)據(jù)
}
]
},
myLine.setOption(option),
// 當(dāng)窗口或者大小發(fā)生改變時執(zhí)行resize，重新繪制圖表
window.addEventListener('resize', function() {
myLine.resize()
})
)
}
onMounted(() => {
brokenLine()
})
</script>
<template>
<div class="chart-box1"></div>
</template>
<style lang="scss" scoped>
.chart-box1 {
width: 100%;
height: 400px;
// background-color: antiquewhite;
}
</style>效果圖如下：
到此這篇關(guān)于vue3使用echarts繪制折線圖的代碼示例的文章就介紹到這了,更多相關(guān)vue3 echarts折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了Vue組件的繼承用法,本文通過實例代碼案例講解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue3響應(yīng)式數(shù)據(jù)轉(zhuǎn)回原始普通對象的方法詳解
本文介紹了在Vue中,如何使用toRaw將響應(yīng)式數(shù)據(jù)轉(zhuǎn)回原始普通對象,核心應(yīng)用場景包括與第三方庫兼容、性能優(yōu)化、避免無限遞歸、只讀不觸發(fā)響應(yīng)式等,文中詳細(xì)解釋了響應(yīng)式數(shù)據(jù)與原始數(shù)據(jù)的區(qū)別,并提供了轉(zhuǎn)回原始數(shù)據(jù)的方法和注意事項,需要的朋友可以參考下2026-04-04
在 Vue 3 的開發(fā)過程中,計算屬性是一個強(qiáng)大而優(yōu)雅的工具,它不僅能簡化模板邏輯,還能顯著提升代碼的可讀性、可維護(hù)性和運(yùn)行效率,本文將結(jié)合兩個典型開發(fā)場景,深入剖析計算屬性的正確使用方式及其帶來的諸多優(yōu)勢,需要的朋友可以參考下2026-02-02
這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
詳解Vue-cli中的靜態(tài)資源管理（src/assets和static/的區(qū)別）
這篇文章主要介紹了Vue-cli中的靜態(tài)資源管理（src/assets和static/的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue實現(xiàn)table上下移動功能,結(jié)合實例形式分析了vue.js針對table表格元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
vue實現(xiàn)頁面內(nèi)容禁止選中功能,僅輸入框和文本域可選
今天小編就為大家分享一篇vue實現(xiàn)頁面內(nèi)容禁止選中功能,僅輸入框和文本域可選，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了深入解析Vue 組件命名那些事，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
今天小編就為大家分享一篇vue.js父子組件通信動態(tài)綁定的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09