ECharts柱状图折线图备用

最新推荐文章于 2023-10-21 16:48:53 发布

永不满足的求知者

最新推荐文章于 2023-10-21 16:48:53 发布

阅读量234

点赞数

分类专栏：前端 echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_41154522/article/details/108226491

版权

前端同时被 2 个专栏收录

82 篇文章 2 订阅

订阅专栏

echarts

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

var getname = ['2015', '2016', '2017', '2018', '2019', '2020','2021'];
var getvalue = [92, 88, 78, 94, 137,34,120]; //柱状图数据
var getvalue1 = [92, 88, 93.5, 94, 96,34,78]; //折线图数据

//计算最大值  
function calMax(arr) {
    let max = 0;
    arr.forEach((el) => {
        el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
                if (max < el1) {
                    max = el1;
                }
            }
        })
    })
    return max;
}
//获取最大值向上取10的倍数的最小值  例如137 取140
const formatInt = (num, prec = 2, ceil = true) => {
  const len = String(num).length;
  if (len <= prec) { return num }; 

  const mult = Math.pow(10, prec);
  return ceil ? 
    Math.ceil(num / mult) * mult : 
    Math.floor(num / mult) * mult;
} 
var max =formatInt(calMax([getvalue]),1,true);

option = {
    title: {
        text: 'GDP变化情况',
        top:'20',
        left:'20',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: '#000'
        }
    },
    grid: {
        top: '90',
        right: '40',
        left: '60',
        bottom: '100'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
        formatter: '{b0}<br/>{a0}: {c0}门<br/>{a1}: {c1}%',
    },
    color: ['#70CEA1','#8595FF'],
	legend: {
        data: ['GDP', 'GDP增长率'],
        height: '88%',
        icon:'stack', //折线图图例改为方块
        left: 'center',
        bottom: '30',
        itemGap: 25,
        itemWidth: 16,
        itemHeight: 16,
        textStyle: {
            fontSize: '13',
        },
	 },
    xAxis: [{
        data: getname,
        axisTick: {
            show: false
        },
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        max: max, // 计算最大值
        interval: max / 5, //  平均分为5份
        splitNumber: 5,
        name: '亿元',
        nameTextStyle: {
            padding: [0, 0, 0, -50]    // 四个数字分别为上右下左与原位置距离
        },
        axisTick: {
            show: false //隐藏刻度线  
        },
        axisLine:{      //隐藏y轴
            show:false
        },
    }, {
        type: 'value',
        min: 0,
        max: 100, // 计算最大值
        interval: 20, //  平均分为5份
        splitNumber: 5,
        name: '%',
        nameTextStyle: {
            padding: [0, -50, 0, 0]    // 四个数字分别为上右下左与原位置距离
        },
        axisTick: {
            show: false //隐藏刻度线  
        },
        axisLine:{      //隐藏y轴
            show:false
        },
    }],
    series: [{
        name: "GDP",
        type: 'bar',
        data: getvalue,
        barWidth: '20px',//柱子宽度
        itemStyle: {
            normal: {
                barBorderRadius: [10, 10, 0, 0]//设置柱子弧度
            }
        },
    }, {
        name: "GDP增长率",
        type: 'line',
        data: getvalue1,
        yAxisIndex: 1,
        symbolSize: 8,//折线图圈 图中大小
        //smooth: true,
    }]
};

/**
 * 将数字取整为10的倍数
 * @param {Number} num 需要取整的值
 * @param {Boolean} ceil 是否向上取整
 * @param {Number} prec 需要用0占位的数量
 */
const formatInt = (num, prec = 2, ceil = true) => {
  const len = String(num).length;
  if (len <= prec) { return num }; 

  const mult = Math.pow(10, prec);
  return ceil ? 
    Math.ceil(num / mult) * mult : 
    Math.floor(num / mult) * mult;
} 

// formatInt(2345, 2, true)  -> 2400
// formatInt(2345, 2. false) -> 2300
// formatInt(2345, 3, true)  -> 3000
// formatInt(2345, 3, false) -> 2000
``