Vue繪制雙Y軸折線柱狀圖
更新時(shí)間：2023年03月27日 16:00:32 作者：半度納
這篇文章主要介紹了Vue繪制雙Y軸折線柱狀圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue雙Y軸折線柱狀圖
通過設(shè)置Y軸坐標(biāo)位置和定位索引來實(shí)現(xiàn)雙Y軸的效果。
實(shí)現(xiàn)效果
代碼：
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '90%'
},
height: {
type: String,
default: '320px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
},
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({
expectedData,
actualData
} = {}) {
this.chart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
/*legend: {
data: ['維修數(shù)', '維修合格數(shù)'],
icon: 'roundRect',
right: '0',
top: '10',
textStyle: { //圖例文字的樣式
color: '#fff',
fontSize: 12,
//字體風(fēng)格,'normal','italic','oblique'
fontStyle: 'normal',
},
},*/
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true,
},
xAxis: {
type: 'category',
data: ['3月', '4月', '5月', '6月', '7月', '8月', '9月']，
axisLine: {
show: false,//隱藏刻度線
lineStyle: {//字體顏色
color: '#878787',
}，
},
},
yAxis: [
{ //左y軸
type: 'value',
name: '數(shù)量',
// nameLocation: 'middle',
splitLine: {
show: false,
}, //隱藏對(duì)稱線
axisLabel: {
margin: 13,
textStyle: {
color: '#657584'
}
},
splitNumber: 5
// min: 0,
// max: 100
},
{ //右y軸
type: 'value',
name: '比例',
position: "right",//定位右y軸
formatter: "{value}%",
splitLine: {
show: false,
}, //隱藏對(duì)稱線
axisLabel: {
margin: 10,
textStyle: {
color: '#657584'
}
},
splitNumber: 5,
// min: 0,
// max: 4000,
// interval: 800,
nameTextStyle: {
// padding: 4,
padding: [4, 30, 4, 4] //對(duì)字體調(diào)整
}
}
],
series: [{
data: [160, 230, 224, 218, 135, 147, 251],
type: 'bar',
barWidth: '40%',
showBackground: false,
label: {//顯示在頂部的數(shù)值
show: true,
position: "top",
},
itemStyle: {
borderRadius: [2, 2, 0, 0], //柱體圓角
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0, [{ //只要修改前四個(gè)參數(shù)就ok
offset: 0,
color: '#003f97'
}, //柱圖漸變色
{
offset: 1,
color: '#00C6FB'
}
]
),
},
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}, {
data: [70, 90, 90, 60, 90, 60, 70],
type: 'line',
smooth: false, //true是曲線 false是直線
symbol: 'circle', //拐點(diǎn)樣式
symbolSize: 12, //拐點(diǎn)大小
label: {//顯示在頂部的數(shù)值
show: true,
position: "top",
formatter: "{c}%"
},
itemStyle: {
normal: {
lineStyle: {
width: 2, //折線寬度
color: "#FFBF00" //折線顏色
},
color: '#FFBF00', //拐點(diǎn)顏色
borderColor: '#FFBF00', //拐點(diǎn)邊框顏色
borderWidth: 2 //拐點(diǎn)邊框大小
},
emphasis: {
color: '#ff9705' //hover拐點(diǎn)顏色定義
}
},
yAxisIndex: 1//定位右y軸
}
]
})
}
}
}
</script>vue中v-chart雙y軸折線圖的使用
效果圖：
雙y軸都有數(shù)據(jù)
代碼：
<template>
<ve-line :data="chartData" :extend="traderExtend" :seetings="chartSettings" :colors="colors"></ve-line>
</template>
<script>
export default{
data() {
return {
tableData: [],
chartData: {
columns: ['日期', '企業(yè)成本利潤率', '同比變化'],
rows: [{日期:'2019-01',企業(yè)成本利潤率:'40',同比變化:'50%'},
{日期:'2019-06',企業(yè)成本利潤率:'50',同比變化:'60%'},
{日期:'2019-09',企業(yè)成本利潤率:'70',同比變化:'80%'}],
},
chartSettings: {
},
traderExtend: {},
colors: ['#0E9CFF', '#FFA70D'],
}
},
}
methods:{
initChartData() {
this.tradeChartSettings = {
yAxisType: ['KMB', 'percent'],//數(shù)據(jù)類型
yAxisName: ['日均運(yùn)量', '同比變化'],//y軸坐標(biāo)軸的名稱，在下面可以更改樣式
}
this.initTraderExtend()
}
initTraderExtend() {
this.traderExtend = {
yAxis(item) {
/* 右軸 */
// 坐標(biāo)軸名稱的文字樣式
item[1].nameTextStyle = {
padding: [0, 50, 0, 0],
}
item[1].splitNumber = 5
return item
},
}
},
}
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue的子父組件傳值之小白必看篇，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-cli3.0使用及部分配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Element-UI中<el-cascader?/>回顯失敗問題的完美解決
我們?cè)谑褂胑l-cascader控件往數(shù)據(jù)庫保存的都是最后一級(jí)的數(shù)據(jù),那如果再次編輯此條數(shù)據(jù)時(shí),直接給el-cascader傳入最后一級(jí)的數(shù)據(jù),它是不會(huì)自動(dòng)勾選的,下面這篇文章主要給大家介紹了關(guān)于Element-UI中<el-cascader?/>回顯失敗問題的完美解決辦法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了詳解Vue2 添加對(duì)scss的支持，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
簡單方法實(shí)現(xiàn)Vue?無限滾動(dòng)組件示例
這篇文章主要為大家介紹了簡單方法實(shí)現(xiàn)Vue?無限滾動(dòng)組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項(xiàng)目為例給大家介紹了vue項(xiàng)目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
這篇文章主要介紹了詳解如何更好的使用module vuex，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了關(guān)于vue3中的reactive賦值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇讓axios發(fā)送表單請(qǐng)求形式的鍵值對(duì)post數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08