快捷導(dǎo)航

vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖

更新時(shí)間：2023年10月07日 09:33:56 作者：這是提莫大人

這篇文章主要介紹了vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用echarts實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖

1.引入

cnpm i echarts -S

2.main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.echarts.vue文件中

實(shí)現(xiàn)多個(gè)柱形圖就用series

雙y軸就用yAxis多放一個(gè)參數(shù)

<template>
? <div class="MonthsCon">
? ? <div id="MonthsConChart" style=" height: 230px"></div>
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? xData: [1,3, 3],
? ? ? yetData: [10, 20, 30], // 已辦結(jié)
? ? ? inData: [11, 12 , 14], // 受理中
? ? ? rateData: [1, 2, 3], // 辦結(jié)率
? ? };
? },
? mounted() {
? ? this.initMap()?
? },
? methods: {
? ? initMap() {
? ? ? var myChart = this.$echarts.init(document.getElementById('MonthsConChart'));
? ? ? const option = {
? ? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? ? trigger: 'axis',
? ? ? ? ? ? ? ? axisPointer: {
? ? ? ? ? ? ? ? ? type: 'cross',
? ? ? ? ? ? ? ? ? crossStyle: {
? ? ? ? ? ? ? ? ? ? color: '#999'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? legend: {
? ? ? ? ? ? ? ? icon: 'rect',//形狀 ?類型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
? ? ? ? ? ? ? ? itemWidth: 10, ?// 設(shè)置寬度
? ? ? ? ? ? ? ? itemHeight: 4, // 設(shè)置高度
? ? ? ? ? ? ? ? itemGap: 24, // 設(shè)置間距
? ? ? ? ? ? ? ? data: ['夏天的銷量', '冬天的銷量'],
? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? //文字樣式
? ? ? ? ? ? ? ? ? ? color: '#c1dafc',
? ? ? ? ? ? ? ? ? ? fontSize: '12'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? right: '30%'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? xAxis: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? type: 'category',
? ? ? ? ? ? ? ? ? data: ['春天', '夏天', '秋天','冬天'],
? ? ? ? ? ? ? ? ? axisPointer: {
? ? ? ? ? ? ? ? ? ? type: 'shadow'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? yAxis: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? type: 'value',
? ? ? ? ? ? ? ? ? name: '單位個(gè)',
? ? ? ? ? ? ? ? ? min: 0,
? ? ? ? ? ? ? ? ? max: 50,
? ? ? ? ? ? ? ? ? interval: 10,
? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? formatter: '{value}'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? type: 'value',
? ? ? ? ? ? ? ? ? name: '單位個(gè)',
? ? ? ? ? ? ? ? ? min: 0,
? ? ? ? ? ? ? ? ? max: 50,
? ? ? ? ? ? ? ? ? interval: 10,
? ? ? ? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? ? ? ? formatter: '{value}'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? series: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? name: '夏天的銷量',
? ? ? ? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? ? ? ? barWidth: '5%',
? ? ? ? ? ? ? ? ? data: [20, 20, 30, 40]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: '冬天的銷量',
? ? ? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? ? ? barWidth: '5%',
? ? ? ? ? ? ? ? data: [10,20, 11, 1]
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? color: ['#b1de6a', '#4ab0ee']
? ? ? ? ? ? };
? ? ? myChart.setOption(option);
? ? }
? },
};
</script>