Vue3使用echarts繪制特殊樣式的折線圖和柱狀圖
更新時(shí)間：2024年02月05日 16:40:55 作者：coderSlow
這篇文章主要為大家詳細(xì)介紹了Vue3如何使用echarts實(shí)現(xiàn)繪制一些特殊樣式的折線圖和柱狀圖,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解下
案例1
（1）效果
（2）代碼
<div class="left-one-bottom">
<div id="left-echarts-one-id" />
</div>
<script lang="ts" setup>
import { defineComponent, ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { get10YearTrend } from '@/script/api/core'
let yearData: any = [] // 年份
let areaData: any = [] // 地區(qū)生產(chǎn)總值
let perCapitaData: any = [] // 人均地區(qū)生產(chǎn)總值
const getData = () => {
// 這個(gè)方法用于請(qǐng)求數(shù)據(jù)+渲染echarts
get10YearTrend({}).then((res: any) => {
if (res.code == 200) {
res.data.forEach((element: any) => {
yearData.push(element.year)
areaData.push(element.gdp)
perCapitaData.push(element.perCapitaRegionalGdp)
})
echartsRend()
}
})
}
// 獲取當(dāng)前組件實(shí)例
const { proxy }: any = getCurrentInstance()
const echartsRend = () => {
// 獲取echart掛載的DOM節(jié)點(diǎn)
const container = ref(document.querySelector('#left-echarts-one-id'))
// echarts初始化
let myChart = proxy.$echarts.init(container.value)
const option = {
legend: {
show: true,
left: 'right',
selectedMode: false,
textStyle: {
// 圖例文字樣式屬性
color: 'rgba(255, 255, 255, 0.9)', // 字體顏色
fontSize: 14, // 字體大小
align: 'left', // 水平對(duì)齊方式為左對(duì)齊
},
itemHeight: 2,
itemWidth: 12,
itemGap: 14,
data: [
{
name: '地區(qū)生產(chǎn)總值',
// 強(qiáng)制設(shè)置圖形為圓。
icon: 'rect',
itemStyle: {
color: 'rgba(51, 255, 221, 1)',
borderColor: 'rgba(51, 255, 221, 1)',
shadowColor: 'rgba(51, 255, 221, .8)',
shadowBlur: 10,
},
},
{
name: '人均地區(qū)生產(chǎn)總值',
// 強(qiáng)制設(shè)置圖形為圓。
icon: 'rect',
},
],
},
// 直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
grid: {
show: false, // 是否顯示直角坐標(biāo)系網(wǎng)格,外邊框
top: '40', // 離容器左側(cè)的距離
right: '10', // 離容器上側(cè)的距離
left: '10', // 離容器左側(cè)的距離
bottom: '0', // 離容器底部的距離
borderColor: '#ff0', // 外邊框顏色
containLabel: true, // 是否包含坐標(biāo)軸的刻度標(biāo)簽,默認(rèn)為false；true時(shí)防止標(biāo)簽溢出
},
// 提示框組件
tooltip: {
trigger: 'axis', // 觸發(fā)類型,axis:坐標(biāo)軸觸發(fā)
axisPointer: {
// 坐標(biāo)軸指示器配置項(xiàng)
type: 'shadow', // 指示器類型:line、shadow、none、cross
shadowStyle: {
color: 'rgba(216, 216, 216, 0.1)',
},
},
backgroundColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮層的背景顏色
borderColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮層的邊框顏色
textStyle: {
color: '#B1DEFF',
fontSize: '24',
fontFamily: 'PangMenZhengDao',
},
formatter: function (params: any) {
// 2.回調(diào)函數(shù),可return dom 自定義樣式
// console.log('params', params)
return (
params[0].name +
'年<br>' +
'<div style="display:flex;align-items: center;"><span style="background-color:rgba(51, 255, 221, 1);display: inline-block;width: 8px;height: 2px;margin-right: 4px;"></span>' +
params[0].seriesName +
'：<span style="color: #fff;margin-right:6px;">' +
params[0].value +
'</span>' +
'<span style="font-size:14px;color: #B1DEFF;">億元</span></div>' +
'<div style="display:flex;align-items: center;"><span style="background-color:rgba(255, 204, 0, 1);display: inline-block;width: 8px;height: 2px;margin-right: 4px;"></span>' +
params[1].seriesName +
'：<span style="color: #fff;margin-right:6px;">' +
params[1].value +
'</span>' +
'<span style="font-size:14px;color: #B1DEFF;">元/人</span></div>'
)
},
},
// 圖表背景色
backgroundColor: 'transparent',
// x 軸設(shè)置
xAxis: [
{
type: 'category',
nameLocation: 'end', // X軸名稱位置
nameTextStyle: {
// X軸名稱樣式
color: '#fff',
fontWeight: 'bold',
},
nameGap: 10, // X軸名稱與軸線之間的距離
nameRotate: 0, // 坐標(biāo)軸名稱旋轉(zhuǎn)
axisLabel: {
// X軸類目名稱樣式
// interval: 'auto',
verticalAlign: 'middle',
lineHeight: 16,
margin: 20,
color: '#fff',
fontSize: 12,
fontFamily: 'PangMenZhengDao',
rotate: 0,
},
axisLine: {
// X軸軸線設(shè)置
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.5)',
width: 1,
},
},
axisTick: {
// X軸刻度相關(guān)設(shè)置
show: false,
},
splitLine: {
// 橫向分隔線
show: false,
},
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(216, 216, 216, 0.1)',
type: 'solid',
width: 37,
},
},
// 類目數(shù)據(jù)
data: yearData,
},
],
// y軸設(shè)置
yAxis: [
{
min: 0, // 坐標(biāo)軸刻度最小值
axisLine: {
// y軸軸線設(shè)置
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.5)',
width: 1,
},
},
axisLabel: {
// y軸刻度標(biāo)簽
formatter: '{value}',
inside: false, // 刻度標(biāo)簽是否朝內(nèi)，默認(rèn)朝外
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 12,
fontFamily: 'PangMenZhengDao',
},
},
axisTick: {
// 刻度設(shè)置
show: false,
},
splitLine: {
// 縱向分隔線
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.2)',
type: 'dashed',
},
},
},
{
type: 'value',
// min: 0,
// max: 100,
// splitNumber: 5,
// interval: 20,
splitLine: {
show: false,
lineStyle: {
type: 'solid',
color: 'rgba(216, 216, 216, .2)',
},
},
axisLine: {
// y軸軸線設(shè)置
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.5)',
width: 1,
},
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
color: 'rgba(255,255,255, 1)',
fontSize: 12,
fontFamily: 'PangMenZhengDao',
},
},
},
],
series: [
{
name: '地區(qū)生產(chǎn)總值',
type: 'line',
markPoint: 'arrow',
lineStyle: {
shadowColor: 'rgba(51, 255, 221, 1)', // 設(shè)置陰影顏色
shadowBlur: 10, // 設(shè)置陰影的模糊大小
},
itemStyle: {
normal: {
color: 'rgba(51, 255, 221, 1)',
},
},
symbolSize: 8,
data: areaData,
},
{
type: 'line',
yAxisIndex: 1,
name: '人均地區(qū)生產(chǎn)總值',
lineStyle: {
shadowColor: 'rgba(255, 204, 0, 1)', // 設(shè)置陰影顏色
shadowBlur: 10, // 設(shè)置陰影的模糊大小
// shadowOffsetX: 0, // 設(shè)置陰影沿X軸的偏移量
// shadowOffsetY: 3 // 設(shè)置陰影沿y軸的偏移量
},
itemStyle: {
normal: {
color: 'rgba(255, 204, 0, 1)',
},
},
symbolSize: 8,
data: perCapitaData,
},
],
}
myChart.setOption(option)
// 根據(jù)頁面大小自動(dòng)響應(yīng)圖表大小
window.addEventListener('resize', function () {
myChart.resize()
})
}
onMounted(() => {
getData() // 使用方法放在onMounted中
})
</script>
<style lang="scss" scoped>
.left-one-bottom {
width: 1005px;
height: 282px;
margin: 0 auto;
#left-echarts-one-id {
width: 100%;
height: 100%;
}
}
</style>
案例2
（1）效果
（2）代碼
<div class="left-two-bottom">
<div id="left-echarts-two-id" />
</div>
<script lang="ts" setup>
import { defineComponent, ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { getZjCityTrend } from '@/script/api/core'
let cityName:any = [] // 城市
let areaData:any = [] // 地區(qū)生產(chǎn)總值
let perCapitaData:any = [] // 人均地區(qū)生產(chǎn)總值
const getData = () => { // 這個(gè)方法用于請(qǐng)求數(shù)據(jù)+渲染echarts
getZjCityTrend({}).then((res:any) =>{
if(res.code == 200){
// console.log(res)
res.data.forEach((element:any) => {
cityName.push(element.city)
areaData.push(element.gdp)
perCapitaData.push(element.perCapitaRegionalGdp)
})
echartsRend()
}
})
}
// 獲取當(dāng)前組件實(shí)例
const { proxy }: any = getCurrentInstance();
const echartsRend = () => {
// 獲取echart掛載的DOM節(jié)點(diǎn)
const container = ref(document.querySelector('#left-echarts-two-id'));
// echarts初始化
let myChart = proxy.$echarts.init(container.value);
const option = {
legend: [{
show: true,
right: '15%',
selectedMode: false,
textStyle: { // 圖例文字樣式屬性
color: 'rgba(255, 255, 255, 0.9)', // 字體顏色
fontSize: 14, // 字體大小
align: 'left' // 水平對(duì)齊方式為左對(duì)齊
},
itemHeight: 12,
itemWidth: 12,
itemGap: 14,
data: [{
name: '地區(qū)生產(chǎn)總值',
// 強(qiáng)制設(shè)置圖形為圓。
icon: 'circle',
itemStyle: {
color: 'rgba(51, 255, 221, 1)',
borderColor: 'rgba(51, 255, 221, 1)',
shadowColor: 'rgba(51, 255, 221, .6)',
shadowBlur: 10
}
}]
},{
show: true,
right: '0%',
selectedMode: false,
textStyle: { // 圖例文字樣式屬性
color: 'rgba(255, 255, 255, 0.9)', // 字體顏色
fontSize: 14, // 字體大小
align: 'left' // 水平對(duì)齊方式為左對(duì)齊
},
itemHeight: 2,
itemWidth: 12,
itemGap: 14,
data: [{
name: '人均地區(qū)生產(chǎn)總值',
// 強(qiáng)制設(shè)置圖形為圓。
icon: 'rect'
}]
},],
// 直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
grid: {
show: false, // 是否顯示直角坐標(biāo)系網(wǎng)格,外邊框
top: '40', // 離容器左側(cè)的距離
right: '10', // 離容器上側(cè)的距離
left: '10', // 離容器左側(cè)的距離
bottom: '0', // 離容器底部的距離
borderColor: '#ff0', // 外邊框顏色
containLabel: true // 是否包含坐標(biāo)軸的刻度標(biāo)簽,默認(rèn)為false；true時(shí)防止標(biāo)簽溢出
},
// 提示框組件
tooltip: {
trigger: 'axis', // 觸發(fā)類型,axis:坐標(biāo)軸觸發(fā)
axisPointer: {
// 坐標(biāo)軸指示器配置項(xiàng)
type: 'shadow', // 指示器類型:line、shadow、none、cross
shadowStyle: {
color: 'rgba(216, 216, 216, 0.1)'
} // 指示器類型:line、shadow、none、cross
},
backgroundColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮層的背景顏色
borderColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮層的邊框顏色
textStyle: {
color: '#B1DEFF',
fontSize: '24',
fontFamily:'PangMenZhengDao',
},
formatter: function (params:any) {
// 2.回調(diào)函數(shù),可return dom 自定義樣式
// console.log('params', params)
return (
'<div style="font-family:Alibaba2;font-weight: 800; ">'+params[0].name + '</div>' +
'<div style="display:flex;align-items: center;"><span style="background-color:rgba(51, 255, 221, 1);display: inline-block;width: 8px;height: 8px;border-radius: 50%;margin-right: 4px;"></span>' + params[0].seriesName +'：<span style="color: #fff;margin-right:6px;">'+ params[0].value + '</span>' + '<span style="font-size:14px;color: #B1DEFF;">億元</span></div>'+
'<div style="display:flex;align-items: center;"><span style="background-color:rgba(255, 204, 0, 1);display: inline-block;width: 8px;height: 2px;margin-right: 4px;"></span>' + params[1].seriesName +'：<span style="color: #fff;margin-right:6px;">'+ params[1].value + '</span>' + '<span style="font-size:14px;color: #B1DEFF;">元/人</span></div>'
)
}
},
// 圖表背景色
backgroundColor: 'transparent',
// x 軸設(shè)置
xAxis: [
{
type: 'category',
nameLocation: 'end', // X軸名稱位置
nameTextStyle: {
// X軸名稱樣式
color: '#fff',
fontWeight: 'bold'
},
nameGap: 10, // X軸名稱與軸線之間的距離
nameRotate: 0, // 坐標(biāo)軸名稱旋轉(zhuǎn)
axisLabel: {
// X軸類目名稱樣式
// interval: 'auto',
verticalAlign: 'middle',
lineHeight: 16,
margin: 20,
color: '#fff',
fontSize: 12,
fontFamily:'Alibaba2',
fontWeight: '800',
rotate: 0,
},
axisLine: {
// X軸軸線設(shè)置
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.5)',
width: 1
}
},
axisTick: {
// X軸刻度相關(guān)設(shè)置
show: false
},
splitLine: {
// 橫向分隔線
show: false
},
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(216, 216, 216, 0.1)",
type: "solid",
width: 37,
},
},
// 類目數(shù)據(jù)
data: cityName
}
],
// y軸設(shè)置
yAxis: [
{
// type: 'value',
// position: 'left',
// name:'單位：億元',
// nameTextStyle: {
// color: 'rgba(255, 255, 255, 0.8)',
// fontSize: 14,
// fontWeight: 'bold'
// },
min: 0, // 坐標(biāo)軸刻度最小值
axisLine: {
// y軸軸線設(shè)置
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.5)',
width: 1
}
},
axisLabel: {
// y軸刻度標(biāo)簽
formatter: '{value}',
inside: false, // 刻度標(biāo)簽是否朝內(nèi)，默認(rèn)朝外
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 12,
fontFamily:'PangMenZhengDao'
}
},
axisTick: {
// 刻度設(shè)置
show: false
},
splitLine: {
// 縱向分隔線
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.2)',
type: 'dashed'
}
}
},
{
type: 'value',
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgba(216, 216, 216, .2)"
}
},
axisLine: {
// y軸軸線設(shè)置
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.5)',
width: 1
}
},
axisLabel: {
show: true,
formatter: '{value}',
textStyle: {
color: "rgba(255,255,255, 1)",
fontSize: 12,
fontFamily:'PangMenZhengDao'
}
}
}
],
series: [
{
name: '地區(qū)生產(chǎn)總值',
type: 'bar',
barWidth: 10,
markPoint: 'arrow',
itemStyle: {
color: new proxy.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(110, 230, 240, 1)'
},
{
offset: 1,
color: 'rgba(0, 131, 210, 1)'
}
],
false
)
},
data: areaData
},
{
type: 'line',
yAxisIndex: 1,
name: '人均地區(qū)生產(chǎn)總值',
lineStyle: {
shadowColor: 'rgba(255, 204, 0, 1)', // 設(shè)置陰影顏色
shadowBlur: 10 // 設(shè)置陰影的模糊大小
},
itemStyle: {
normal: {
color: 'rgba(255, 204, 0, 1)'
}
},
symbolSize: 8,
data: perCapitaData
}
]
}
myChart.setOption(option);
// 根據(jù)頁面大小自動(dòng)響應(yīng)圖表大小
window.addEventListener("resize", function () {
myChart.resize();
});
}
onMounted(() => {
getData()
});
</script>
<style lang="scss" scoped>
.left-two-bottom {
width: 1005px;
height: 296px;
margin: 0 auto;
#left-echarts-two-id {
width: 100%;
height: 100%;
}
}
</style>
案例3
（1）效果
（2）代碼
<div class="right-two-box">
<div id="right-echarts-two-id" />
</div>
<script lang="ts" setup>
import { defineComponent, ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { getPredictiveAnalysis } from '@/script/api/core'
let yearData: any = [] // 年份
let areaData: any = [] // 地區(qū)生產(chǎn)總值
let timeType:String = '' // 用于判斷是年還是季度
const getData = () => {
// 這個(gè)方法用于請(qǐng)求數(shù)據(jù)+渲染echarts
getPredictiveAnalysis({}).then((res: any) => {
if (res.code == 200) {
// console.log(res)
res.data.forEach((element: any) => {
yearData.push(element.time)
areaData.push(element.value)
timeType = element.unit
})
echartsRend()
}
})
}
// 獲取當(dāng)前組件實(shí)例
const { proxy }: any = getCurrentInstance();
const echartsRend = () => {
// 獲取echart掛載的DOM節(jié)點(diǎn)
const container = ref(document.querySelector('#right-echarts-two-id'));
// echarts初始化
let myChart = proxy.$echarts.init(container.value);
const option = {
legend: {
show: true,
left: 'right',
selectedMode: false,
textStyle: { // 圖例文字樣式屬性
color: 'rgba(255, 255, 255, 0.9)', // 字體顏色
fontSize: 14, // 字體大小
align: 'left' // 水平對(duì)齊方式為左對(duì)齊
},
itemHeight: 1,
itemWidth: 12,
itemGap: 14,
data: [{
name: '地區(qū)生產(chǎn)總值',
// 強(qiáng)制設(shè)置圖形為方。
icon: 'rect',
itemStyle: {
color: 'rgba(0, 152, 250, 1)',
borderColor: 'rgba(0, 152, 250, 1)'
}
}]
},
// 直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
grid: {
show: false, // 是否顯示直角坐標(biāo)系網(wǎng)格,外邊框
top: '30', // 離容器左側(cè)的距離
right: '10', // 離容器上側(cè)的距離
left: '10', // 離容器左側(cè)的距離
bottom: '0', // 離容器底部的距離
borderColor: '#ff0', // 外邊框顏色
containLabel: true // 是否包含坐標(biāo)軸的刻度標(biāo)簽,默認(rèn)為false；true時(shí)防止標(biāo)簽溢出
},
// 提示框組件
tooltip: {
trigger: 'axis', // 觸發(fā)類型,axis:坐標(biāo)軸觸發(fā)
axisPointer: {
// 坐標(biāo)軸指示器配置項(xiàng)
type: 'shadow', // 指示器類型:line、shadow、none、cross
shadowStyle: {
color: 'rgba(216, 216, 216, 0.1)'
}
},
backgroundColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮層的背景顏色
borderColor: 'rgba(216, 216, 216, 0.1)', // 提示框浮層的邊框顏色
textStyle: {
color: '#B1DEFF',
fontSize: '24',
fontFamily:'PangMenZhengDao',
},
formatter: function (params:any) {
// 2.回調(diào)函數(shù),可return dom 自定義樣式
return (
params[0].name +(timeType=='year'?'年<br>':'<br>') +
'<div style="display:flex;align-items: center;">' + params[0].seriesName +'：<span style="color: #fff;margin-right:6px;">'+ params[0].value + '</span>' + '<span style="font-size:14px;color: #B1DEFF;">億元</span></div>'
)
}
},
// 圖表背景色
backgroundColor: 'transparent',
// x 軸設(shè)置
xAxis: [
{
type: 'category',
nameLocation: 'end', // X軸名稱位置
nameTextStyle: {
// X軸名稱樣式
color: '#fff',
fontWeight: 'bold'
},
nameGap: 10, // X軸名稱與軸線之間的距離
nameRotate: 0, // 坐標(biāo)軸名稱旋轉(zhuǎn)
axisLabel: {
// X軸類目名稱樣式
// interval: 'auto',
verticalAlign: 'middle',
lineHeight: 16,
margin: 20,
color: '#fff',
fontSize: 12,
fontFamily:'PangMenZhengDao',
rotate: 0,
},
axisLine: {
// X軸軸線設(shè)置
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.5)',
width: 1
}
},
axisTick: {
// X軸刻度相關(guān)設(shè)置
show: false
},
splitLine: {
// 橫向分隔線
show: false
},
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(216, 216, 216, 0.1)",
type: "solid",
width: 37,
},
},
// 類目數(shù)據(jù)
data: yearData
}
],
// y軸設(shè)置
yAxis: [
{
min: 0, // 坐標(biāo)軸刻度最小值
axisLine: {
// y軸軸線設(shè)置
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.5)',
width: 1
}
},
axisLabel: {
// y軸刻度標(biāo)簽
formatter: '{value}',
inside: false, // 刻度標(biāo)簽是否朝內(nèi)，默認(rèn)朝外
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 12,
fontFamily:'PangMenZhengDao'
}
},
axisTick: {
// 刻度設(shè)置
show: false
},
splitLine: {
// 縱向分隔線
show: true,
lineStyle: {
color: 'rgba(216, 216, 216, 0.2)',
type: 'dashed'
}
}
}
],
series: [
{
name: '地區(qū)生產(chǎn)總值',
type: 'line',
markPoint: 'arrow',
lineStyle: {
color: 'rgba(0, 152, 250, 1)', // 線條顏色
shadowColor: 'rgba(0, 152, 250, 1)', // 設(shè)置陰影顏色
shadowBlur: 10 // 設(shè)置陰影的模糊大小
},
itemStyle: {
color: "rgba(30, 231, 231, 1)", //點(diǎn)的顏色
borderColor: "rgba(30, 231, 231, 0.4)",
borderWidth: 6,
shadowColor: "rgba(30, 231, 231, 0.2)",
shadowBlur: 0,
shadowOffsetY: 1,
shadowOffsetX: 1,
},
emphasis: {
itemStyle: {
// 鼠標(biāo)經(jīng)過時(shí)：
borderColor: "rgba(255, 255, 255, .4)",
shadowColor: "rgba(255, 255, 255, 0.2)",
color: "rgba(255, 255, 255, 1)",
borderWidth: 6,
shadowBlur: 0,
shadowOffsetY: 1,
shadowOffsetX: 1,
},
},
symbol: "circle", //將小圓點(diǎn)改成實(shí)心 不寫symbol默認(rèn)空心
symbolSize: 8,
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 94, 255, 0.36)' // 0% 處的顏色
}, {
offset: 1,
color: 'rgba(0, 94, 255, 0.03)' // 100% 處的顏色
}],
globalCoord: false // 缺省為 false
}
}
},
data: areaData
}
]
}
myChart.setOption(option);
// 根據(jù)頁面大小自動(dòng)響應(yīng)圖表大小
window.addEventListener("resize", function () {
myChart.resize();
});
}
onMounted(() => {
getData() // 使用方法放在onMounted中
});
</script>
<style lang="scss" scoped>
.right-two-box {
width: 1004px;
height: 192px;
margin: 0 auto;
#right-echarts-two-id {
width: 100%;
height: 100%;
}
}
</style>
以上就是Vue3使用echarts繪制特殊樣式的折線圖和柱狀圖的詳細(xì)內(nèi)容，更多關(guān)于Vue3 echarts繪制折線圖和柱狀圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例
下面小編就為大家?guī)硪黄獀ue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)實(shí)例代碼
輸入框是使用非常多的元素,用來輸入用戶名、密碼等等信息,Element提供了功能和樣式豐富的輸入框,下面這篇文章主要給大家介紹了關(guān)于Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)
在有些情況下需要使用不同的語言來完成一個(gè)項(xiàng)目,因此就有可能出現(xiàn)不同語言的程序之間的相互調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue.js調(diào)用python腳本并給腳本傳數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2024-03-03
Vuex-Persist 是一個(gè)用于在 Vuex 中實(shí)現(xiàn)持久化狀態(tài)的庫,它可以用來解決應(yīng)用程序在刷新瀏覽器或關(guān)閉頁面后丟失 Vuex store 中狀態(tài)的問題,本文給大家介紹vuex-persist 可以用來干什么,感興趣的朋友一起看看吧2023-11-11
vue mint-ui學(xué)習(xí)筆記之picker的使用
本篇文章主要介紹了vue mint-ui學(xué)習(xí)筆記之picker的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例
下面小編就為大家?guī)硪黄褂胿ue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue實(shí)現(xiàn)進(jìn)入某個(gè)頁面后替換地址欄路徑的操作方法
vue頁面在實(shí)際開發(fā)中,經(jīng)常會(huì)遇到改變url參數(shù),重新加載頁面數(shù)據(jù)的需求,但是只改變頁面url并不會(huì)觸發(fā)組件的生命周期,這就需要用其他方法來實(shí)現(xiàn)了,本文重點(diǎn)介紹vue實(shí)現(xiàn)進(jìn)入某個(gè)頁面后替換地址欄路徑的操作方法,感興趣的朋友跟隨小編一起看看吧2024-04-04
Vue 報(bào)錯(cuò)Error: No PostCSS Config foun
這篇文章主要介紹了Vue 報(bào)錯(cuò)Error: No PostCSS Config found問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞。下面這篇文章主要給大家介紹了關(guān)于vue中各組件之間傳遞數(shù)據(jù)的方法示例，需要的朋友可以參考學(xué)習(xí)。2017-07-07
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08