柱图+折线图例换行,分别显示

最新推荐文章于 2024-10-01 18:51:18 发布

Shi_haoliu

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量117

点赞数

文章标签： javascript 前端 echarts

本文链接：https://blog.csdn.net/Shi_haoliu/article/details/134413589

版权

柱图+折线图例换行,分别显示

在这里插入图片描述

var seriesDatas = [
  {
    name: '城市1',
    dataBar: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3],
    dataLine: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3]
  },
  {
    name: '城市2',
    dataBar: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3],
    dataLine: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3]
  },
  {
    name: '城市3',
    dataBar: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3],
    dataLine: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3]
  },
  {
    name: '城市4',
    dataBar: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3],
    dataLine: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3]
  },
  {
    name: '城市5',
    dataBar: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3],
    dataLine: [122, 125, 80, 15, 89, 17, 135, 162, 32, 20, 6, 3]
  }
];
var xData =  ['2016', '2017', '2018', '2019', '2020', '2021', '2022']
var tites = '2016年至（T-1）年各地区企业数量及增速对比'
option = {
  color: ['#7ecf69', '#373c97', '#93beff', '#ffc63a', '#1d4edf'],
  title: [
    {
      text: tites,
      left: 'center',
      textStyle: { color: '#373c97' }
    }
  ],
  legend: {
    data: ['城市1', '城市2'],
    itemGap: 15,
    itemWidth: 10, // 设置宽度
    itemHeight: 10,
    bottom: 0,
    textStyle: {
      color: '#373c97'
    }
  },
  xAxis: [
    {
      type: 'category',
      data:xData
    }
  ],
  yAxis: [
    {
      type: 'value'
    },
    {
      type: 'value',
      splitLine: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        margin: 2,
        interval: 10,
        color: '#595959',
        formatter: function (name) {
          console.log(name);
          return name + '%';
        }
      }
    }
  ],
  series: []
};


option.legend.data = [];
option.series = [];

option.legend = {
  itemGap: 15,
  itemWidth: 20,
  itemHeight: 10,
  textStyle: {
    color: '#373c97'
  },
  bottom: 0,
  formatter: function (name) {
    console.log(name);
    return name.replace(/( 柱图| 折线图 )/g, '       ');
  },

  tooltip: {
    show: true
  },
  data: []
};

var barLegendData = [];
var lineLegendData = [];
var color = ['#7ecf69', '#373c97', '#93beff', '#ffc63a', '#1d4edf'];
for (var i = 0; i < seriesDatas.length; i++) {
  // 柱图系列
  option.series.push({
    color: color[i],
    name: seriesDatas[i].name + ' 柱图',
    type: 'bar',
    data: seriesDatas[i].dataBar
  });

  // 折线图系列
  option.series.push({
    color: color[i],
    name: seriesDatas[i].name + '增速',
    type: 'line',
    data: seriesDatas[i].dataLine,
    showSymbol: false,
    symbol:
      'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDEwIDEiIHZpZXdCb3g9IjAgMCAxMCAxIj4KICA8cGF0aCBkPSJNMCAwaDEwVjFIMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIi8+Cjwvc3ZnPgo=',
    symbolSize: [1], // 控制线条的长度和宽度
    yAxisIndex: 1
  });

  barLegendData.push(seriesDatas[i].name + ' 柱图');
  lineLegendData.push(seriesDatas[i].name + '增速');
}

option.legend.data = barLegendData.concat([''], lineLegendData);