Vue繪制雙Y軸折線柱狀圖

更新時間：2023年03月27日 16:00:32 作者：半度納

這篇文章主要介紹了Vue繪制雙Y軸折線柱狀圖實(shí)例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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,
							}, //隱藏對稱線
							axisLabel: {
								margin: 13,
								textStyle: {
									color: '#657584'
								}
							},
							splitNumber: 5
							// min: 0,
							// max: 100
						},
						{ //右y軸
							type: 'value',
							name: '比例',
							position: "right",//定位右y軸
							formatter: "{value}%",
							splitLine: {
								show: false,
							}, //隱藏對稱線
							axisLabel: {
								margin: 10,
								textStyle: {
									color: '#657584'
								}
							},
							splitNumber: 5,
							// min: 0,
							// max: 4000,
							// interval: 800,
							nameTextStyle: {
								// padding: 4,
								padding: [4, 30, 4, 4] //對字體調(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, [{ //只要修改前四個參數(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>