Echarts 双侧双表头柱状图折线图

最新推荐文章于 2024-07-17 08:19:08 发布

xiaoheisboy

最新推荐文章于 2024-07-17 08:19:08 发布

阅读量801

点赞数

分类专栏：画个 Echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/xiaoheisboy/article/details/127591788

版权

画个 Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Echarts 双侧双表头柱状图折线图带箭头区分颜色

成品图片（如需折线图自行更改）

在这里插入图片描述

废话不多say 上代码

👍记得点赞哦 😄

👇大佬请看👇

earchs() {
      var myChart = echarts.init(document.getElementById('asd'));
      var s = ['▲', '▼', ]
      var data = {
        title: ['表面', '组装', '机加设备', '表面设备', '组装设备',
          '技术制工', '生产管制', 'FAE', '周边'],

        currentNum: [85, 48, 83, 61, 42, 79, 41, 44, 35, 14, 17,],

        dept: ['部门1', '部门2', '部门3', '部门4', '部门5', '部门6', '部门7', '部门8', '部门9',],

        attRate: [40, 91, 9, 95, 12, 96, 92, 95, 94,],
      };
      function getTableLine(num) {
        var list = [];
        var bottom = 0;
        var height = 30;
        for (var i = 0; i < num; i++) {
          list.push({
            type: 'line',
            bottom: bottom - i * height,
            left: 0,
            style: {
              fill: '#333',
              stroke: 'transparent',
            },
            shape: {
              x1: 0,
              y1: 0,
              x2: 1087,
              y2: 0
            }

          });
        }
        return list;
      }
      var lineList = getTableLine(5);


      let option = {
        title: [{
          text: '部门名称',
          left: '1%',
          top: '4%',
          textStyle: {
            fontSize: 16,
            color: '#c0c0c0',
          }
        },
        {
          text: '占比',
          left: '8.5%',
          top: '4%',
          textStyle: {
            fontSize: 16,
            color: '#c0c0c0',
          }
        }, {
          text: '次数',
          right: 200,
          top: '4%',
          textStyle: {
            fontSize: 16,
            color: '#c0c0c0',
          }
        }, {
          text: '次数',
          right: 200,
          top: '4%',
          textStyle: {
            fontSize: 16,
            color: '#c0c0c0',
          }
        }, {
          text: '环比',
          right: 150,
          top: '4%',
          textStyle: {
            fontSize: 16,
            color: '#c0c0c0',
          }
        }, {
          text: '环比',
          right: 70,
          top: '4%',
          textStyle: {
            fontSize: 16,
            color: '#c0c0c0',
          }
        }],
        legend: {
          show: false,
        },
        grid: {
          left: '12%',
          right: '20%'
        },
        yAxis: [{
          type: 'category',
          boundaryGap: true,
          data: data.title,
          axisLine: {//y轴线的颜色以及宽度
                show: false,
                lineStyle: {
                    color: "rgba(219,225,255,1)",
                    width: 1,
                    type: "solid"
                },
            },
          axisLine: {
            lineStyle: {
              color: '#c0c0c0', // 更改坐标轴颜色
            }
          },
          axisTick: {
            length: 160, // 竖线的长度
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#333',
            },
            formatter: function (value, index) {
              var indexNum = 0;
              for (var i = 0; i < data.title.length; i++) {
                if (value == data.title[i]) {
                  indexNum = i;
                }
              }
              return '{table|' + data.dept[index] + '}' + '{table|' + '  ' + '}' + '{div|' + data.currentNum[indexNum] + '%}';
            },
            rich: {
              table: {
                width: 30,
                lineHeight: 14,
                align: 'left',
                fontSize: 14, // table里文字字体大小
              },
              div:{
                width: 50,
                lineHeight: 14,
                align: 'right',
                fontSize: 14, // table里文字字体大小
              }
            }
          }
        }, {
          type: 'category',
          boundaryGap: true,
          data: data.title,
          axisLine: {
            lineStyle: {
              color: '#d5d5d5', // 更改坐标轴颜色
            }
          },
          axisTick: {
            length: 180, // 竖线的长度
          },
          splitLine:{
            show:true,
            color:'d5d5d5',
          },
          axisLabel: {
            interval: 0,

           
            formatter: function (value, index) {
              var indexNum = 0;
              for (var i = 0; i < data.title.length; i++) {
                if (value == data.title[i]) {
                  indexNum = i;
                }
              }
               var a = '{table|' + data.currentNum[indexNum] + '}'
               var b ='', c =''
               if(data.attRate[indexNum]<95){
                b = '{div|' + data.attRate[indexNum] + '%'+s[0]+'}' 
               }else{
                b = '{span|' + data.attRate[indexNum] + '%'+s[1]+'}' 
               }
               if(data.attRate[indexNum]>92){
                c = '{div|' + data.attRate[indexNum] + '%'+s[0]+'}' 
               }else{
                c = '{span|' + data.attRate[indexNum] + '%'+s[1]+'}' 
               }

              return   a+b+c;
            },
         
            rich: {
              table: {
                width: 50,
                lineHeight: 14,
                align: 'left',
                fontSize: 14, // table里文字字体大小
                color:'#000000'
              },
              div:{
                width: 80,
                lineHeight: 14,
                align: 'left',
                fontSize: 14, // table里文字字体大
                color:'blue'
              },
              span:{
                width: 80,
                lineHeight: 14,
                align: 'left',
                fontSize: 14, // table里文字字体大
                color:'red'
              },
             
            }
          }
        }],
        xAxis: { show: false },
        series: [
          {
            show:false,
            name: '实际',
            type: 'bar',
            barWidth: 36,
            itemStyle: {
              normal: {
                color: '#1ec6a3'
              },
            },
            label: {
              show: false,
              position: 'top',
              formatter: '{c} %',
              textStyle: {  //数值样式
                color: '#1ec6a3',
                fontSize: 14,
              }
            },
            yAxisIndex: 0,
            data: [80,70,10,15,20,60,35,99,60]
          }],
        graphic: lineList
      };


      // 绘制图表
      myChart.setOption(option);

    },