vue3使用echarts繪制折線圖的代碼示例
更新時間：2023年07月31日 11:11:58 作者：大聰明2_0
這篇文章主要為大家學習介紹了Vue3如何使用echarts實現(xià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: { //坐標軸軸線相關(guān)設置。數(shù)學上的x軸
show: false, //不顯示X軸
lineStyle: {//X軸樣式
color: "rgba(100,100,100,1)" //X軸字體顏色
}
},
axisPointer: { //坐標軸指示器配置項
type: 'shadow'
},
boundaryGap: false,//坐標軸兩邊留白
axisTick: { // 是否顯示坐標軸刻度
show: false, //不顯示刻度
alignWithLabel: true //刻度與標簽對齊
},
axisLabel: { // 坐標軸刻度標簽的相關(guān)設置
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', //設置網(wǎng)格線類型 dotted：虛線 solid:實線
width: 1 //設置網(wǎng)格線寬度
}
},
axisLine: { //坐標軸軸線相關(guān)設置。數(shù)學上的x軸
show: false //不顯示X軸
},
axisTick: { // 是否顯示坐標軸刻度
show: false //不顯示刻度
},
splitArea: { //網(wǎng)格區(qū)域
show: false //不顯示網(wǎng)格區(qū)域
}
},
grid: { //圖表位置
top: '30px',
left: '0px',
right: '10px',
bottom: '0px',
containLabel: true, // 是否預留坐標軸寬度
},
series: [ //數(shù)據(jù)
{
// q: 如何讓x軸也共享y軸上的0
// a: 1.設置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' //線條顏色
}
}
]
}
)
}效果圖：
稍微復雜折線圖
封裝成了一個組件，和上面的簡單折線圖多了一些配置，直接上代碼：
``` <script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
const brokenLine = () => {
//獲取對應的dom元素
const el = document.querySelector('.chart-box1')
// 初始化
const myLine = echarts.init(el)
// 設置option
let option = ref({})
myLine.setOption(
option.value = {
tooltip: { //類似于hover效果鼠標放上顯示彈框
borderColor: '#EBEEF5',
borderWidth: 1,
padding: [5, 16, 5, 14],
trigger: 'axis', //觸發(fā)類型為坐標軸
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 // 是否預留坐標軸寬度
},
xAxis: {
type: 'category', //x軸類型
boundaryGap: true, // 坐標軸兩邊留白
data: ['2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04'], //x軸數(shù)據(jù)折線圖下面數(shù)據(jù)
axisLabel: { // 坐標軸刻度標簽的相關(guān)設置。
show: true, //顯示x軸
interval: 0, // 設置為 1，表示『隔一個標簽顯示一個標簽』
textStyle: {
color: '#20232A',
fontStyle: 'normal',
fontFamily: '微軟雅黑',
fontSize: 12
},
margin: 17
},
axisTick: {
// 坐標軸刻度相關(guān)設置。
show: false , //不顯示刻度
alignWithLabel:true // 刻度與標簽對齊
},
axisLine: { //坐標軸軸線相關(guān)設置 --x軸
// 坐標軸軸線相關(guān)設置
lineStyle: { // x軸樣式
color: '#E5E9ED' // x軸字體顏色
// opacity:0.2
}
},
splitLine: {//splitLine的作用是將坐標軸上的數(shù)值分隔開來，splitLine通常是水平或垂直的，
// 坐標軸在 grid 區(qū)域中的分隔線。
show: false, // 不顯示x軸
lineStyle: { //x軸樣式
color: '#E5E9ED'
// opacity:0.1
}
}
},
yAxis: [
{
type: 'value', //y軸類型
// splitNumber: 5, //刻度的數(shù)量
axisLabel: { //axisLabel指的是坐標軸上的標簽，用于標識坐標軸上每個刻度所代表的具體數(shù)值。axisLabel通常包括數(shù)值的單位和數(shù)值的格式等信息，以幫助讀者更好地理解數(shù)據(jù)。
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微軟雅黑',
fontSize: 12
}
},
axisLine: { //坐標抽軸線相關(guān)設置
show: false //不顯示
},
axisTick: { //是否顯示坐標軸刻度
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),
// 當窗口或者大小發(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使用Vue Elements實現(xiàn)文件預覽功能
在現(xiàn)代 web 開發(fā)中,用戶與系統(tǒng)的交互體驗越來越重要,而文件上傳和文件預覽是最常見的交互場景之一,本文將詳細介紹如何在 Vue 項目中使用 Vue Elements 來實現(xiàn)文件預覽的功能,包括基本使用方法、常見實例、性能優(yōu)化以及樣式自定義等內(nèi)容,需要的朋友可以參考下2025-01-01
vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能,結(jié)合實例形式分析了vue.js針對本地json數(shù)據(jù)的讀取、遍歷輸出相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
在vue項目中我們經(jīng)常遇到圖標,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue實現(xiàn)自定義組件的方式引入圖標的相關(guān)資料,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了使用el-form-item設置標簽長度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vuejs數(shù)據(jù)超出單行顯示更多，點擊展開剩余數(shù)據(jù)實例
這篇文章主要介紹了vuejs數(shù)據(jù)超出單行顯示更多，點擊展開剩余數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Vue.js實現(xiàn)模擬微信朋友圈開發(fā)demo
本篇文章主要介紹了Vue.js實現(xiàn)模擬微信朋友圈開發(fā)demo，實現(xiàn)展示朋友圈，評論，點贊等功能，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了從0搭建Vue3組件庫之如何使用Vite打包組件庫,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue3 ElementUI 日期禁選當日前當日后三天后的實現(xiàn)代碼
這篇文章主要介紹了vue3 ElementUI 日期禁選當日前當日后三天后的實現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了vue3?身份證校驗、識別性別/生日/年齡的操作代碼,本文通過實例代碼給大家介紹的非常詳細,表單項綁定 @change 事件,?定義身份驗證規(guī)則規(guī)則,感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程，這個又是一個編程語言，?模版語法里面必不可少的一個，?也是使用業(yè)務場景使用最多的一個環(huán)節(jié)。所以學會使用循環(huán)也是重中之重了2023-04-04