echarts制作两个柱状图

最新推荐文章于 2024-03-06 17:30:08 发布

是程序喵呀

最新推荐文章于 2024-03-06 17:30:08 发布

阅读量622

点赞数 8

文章标签： javascript 前端 angular.js

本文链接：https://blog.csdn.net/weixin_68522070/article/details/136139142

版权

let colorList=['#02ce8b','#ffbe62','#f17373'];
let data1 = [90,80,70,50]
option = {
title:[
  
          { // 第一个标题
            text: '环保检测', // 主标题
            textStyle: { // 主标题样式
              color: '#333',
              fontWeight: 'bold',
              fontSize: 16
            },
            left: '20%', // 定位到适合的位置
            top: '10%', // 定位到适合的位置

          },
         { // 第一个标题
            text: '水保三色评价得分表', // 主标题
            textStyle: { // 主标题样式
              color: '#333',
              fontWeight: 'bold',
              fontSize: 16
            },
            left: '70%', // 定位到适合的位置
            top: '10%', // 定位到适合的位置

          },
  ],
  legend: [{
    show:true,
    x:'20%',
    y:'20%',
   
  },
  
],


  tooltip: {},
   grid: [
    { left: '5%', top: '25%', width: '40%', height: '50%' },
    { right: '5%', top: '25%', width: '40%', height: '50%' },
    
  ],
 xAxis: [
    { 
      gridIndex: 0,
      type: 'category',
      data: ['第一季度', '第二季度', '第三季度', '第四季度']
      },
    { 
      gridIndex: 1,
       type: 'category',
      data: ['第一季度', '第二季度', '第三季度', '第四季度']
    },
   
  ],
  yAxis: [
    { 
      gridIndex: 0,  
      type: 'value'
      },
    {
      gridIndex: 1, 
      type: 'value' 
      
    },
    
  ],
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
      name: '合格',
      type: 'bar',
      barWidth:20,
      xAxisIndex: 0,
      yAxisIndex: 0,
      stack: 'Ad',
       color:'#02ce8b',
       label: {
                normal: {
                    show: true,
                    position: 'inside',
                    color:'#000000'
                }
            },
      emphasis: {
        focus: 'series'
      },
      data: [11, 9, 7, 6]
    },
    {
      name: '不合格',
      type: 'bar',
      barWidth:20,
      
      xAxisIndex: 0,
      yAxisIndex: 0,
      stack: 'Ad',
      color:'#f17373',
       label: {
                normal: {
                    show: true,
                    position: 'top',
                    color:'#000000'
                }
            },
      emphasis: {
        focus: 'series'
      },
      data: [4, 0, 2, 2]
    },
    
     {

      data: data1,
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      name:'',
      barWidth:20,
      label: {
          normal: {
                    show: true,
                    position: 'top',
                    color:'#000000'
                },
            show: true,
            formatter: function(params) {
                if (params.data < 20) {
                    return '低';
                } else if (params.data < 40) {
                    return '中';
                } else {
                    return '高';
                }
            }
        },
   
       itemStyle: {    
                    color: (param) => {    
                    let num = param.data; 
                    if (num >= 80) {
                        return colorList[0];
                    }else if(num > 60 && num < 80){
                        return colorList[1];
                    }else if(num < 60){
                       return colorList[2];
                    }
                   
                    }

    }
    }
    
    ]
};