vue3使用echarts繪制折線圖的代碼示例
更新時(shí)間：2023年07月31日 11:11:58 作者：大聰明2_0
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實(shí)現(xiàn)繪制折線圖,文中有詳細(xì)的示例代碼供大家參考,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
簡(jiǎn)單折線圖配置
引入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)軸指示器配置項(xiàng)
type: 'shadow'
},
boundaryGap: false,//坐標(biāo)軸兩邊留白
axisTick: { // 是否顯示坐標(biāo)軸刻度
show: false, //不顯示刻度
alignWithLabel: true //刻度與標(biāo)簽對(duì)齊
},
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:實(shí)線
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,//拐點(diǎn)大小
itemStyle: {//拐點(diǎn)顏色
color: '#00a0e9' //拐點(diǎn)顏色
},
lineStyle: {//線條顏色
color: '#00a0e9' //線條顏色
}
}
]
}
)
}效果圖：
稍微復(fù)雜折線圖
封裝成了一個(gè)組件，和上面的簡(jiǎn)單折線圖多了一些配置，直接上代碼：
``` <script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
const brokenLine = () => {
//獲取對(duì)應(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，表示『隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽』
textStyle: {
color: '#20232A',
fontStyle: 'normal',
fontFamily: '微軟雅黑',
fontSize: 12
},
margin: 17
},
axisTick: {
// 坐標(biāo)軸刻度相關(guān)設(shè)置。
show: false , //不顯示刻度
alignWithLabel:true // 刻度與標(biāo)簽對(duì)齊
},
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ù)值分隔開(kāi)來(lái)，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)識(shí)坐標(biāo)軸上每個(gè)刻度所代表的具體數(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, //拐點(diǎn)大小
name: '2019',
type: 'line',
itemStyle: { //拐點(diǎn)顏色
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ā)生改變時(shí)執(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue使用Vue Elements實(shí)現(xiàn)文件預(yù)覽功能
在現(xiàn)代 web 開(kāi)發(fā)中,用戶與系統(tǒng)的交互體驗(yàn)越來(lái)越重要,而文件上傳和文件預(yù)覽是最常見(jiàn)的交互場(chǎng)景之一,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中使用 Vue Elements 來(lái)實(shí)現(xiàn)文件預(yù)覽的功能,包括基本使用方法、常見(jiàn)實(shí)例、性能優(yōu)化以及樣式自定義等內(nèi)容,需要的朋友可以參考下2025-01-01
vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能,結(jié)合實(shí)例形式分析了vue.js針對(duì)本地json數(shù)據(jù)的讀取、遍歷輸出相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)
在vue項(xiàng)目中我們經(jīng)常遇到圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于如何基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
使用el-form-item設(shè)置標(biāo)簽長(zhǎng)度
這篇文章主要介紹了使用el-form-item設(shè)置標(biāo)簽長(zhǎng)度方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開(kāi)剩余數(shù)據(jù)實(shí)例
這篇文章主要介紹了vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開(kāi)剩余數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue.js實(shí)現(xiàn)模擬微信朋友圈開(kāi)發(fā)demo
本篇文章主要介紹了Vue.js實(shí)現(xiàn)模擬微信朋友圈開(kāi)發(fā)demo，實(shí)現(xiàn)展示朋友圈，評(píng)論，點(diǎn)贊等功能，有興趣的可以了解一下。2017-04-04
從0搭建Vue3組件庫(kù)之如何使用Vite打包組件庫(kù)
這篇文章主要介紹了從0搭建Vue3組件庫(kù)之如何使用Vite打包組件庫(kù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實(shí)現(xiàn)代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
vue3?身份證校驗(yàn)、識(shí)別性別/生日/年齡的操作代碼
這篇文章主要介紹了vue3?身份證校驗(yàn)、識(shí)別性別/生日/年齡的操作代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),表單項(xiàng)綁定 @change 事件,?定義身份驗(yàn)證規(guī)則規(guī)則,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程，這個(gè)又是一個(gè)編程語(yǔ)言，?模版語(yǔ)法里面必不可少的一個(gè)，?也是使用業(yè)務(wù)場(chǎng)景使用最多的一個(gè)環(huán)節(jié)。所以學(xué)會(huì)使用循環(huán)也是重中之重了2023-04-04