echarts配置项记录

polarisya

已于 2023-11-10 16:24:55 修改

阅读量51

点赞数

文章标签： echarts javascript 前端

于 2023-11-01 16:44:22 首次发布

本文链接：https://blog.csdn.net/polarisya/article/details/133130751

版权

文章详细描述了如何在ECharts图表中使用stack属性进行堆叠显示，以及如何实现markline和x轴与y轴的逆向设置。实例代码展示了如何配置tooltipformatter和系列数据以达到所需效果。

摘要由CSDN通过智能技术生成

一、stack

1.单独在tooltip中拿到stack的值

tooltip: {
    trigger: 'item',
    formatter: function(params) {
        return "stack: " + option.series[params.seriesIndex].stack;
    }
}

二、markline

三、inverse

将x轴与y轴数据颠倒

var obj = {
  ydata: ['幼儿园', '小学', '初中', '高中', '职校'],
  legend: ['2015', '2016', '2017', '2018', '2019','2020'],
  barData: [
    {
      name: '2015',
      data: [7, 3, 9, 5, 3],
    },
    {
      name: '2016',
      data: [4, 8, 6, 6, 5],
    },
    {
      name: '2017',
      data: [5, 2, 2, 3, 1],
    },
    {
      name: '2018',
      data: [5, 5, 5, 3, 1],
    },
    {
      name: '2019',
      data: [2, 2, 4, 8, 1],
    },
    {
      name: '2020',
      data: [4, 1, 1, 3, 1],
    },
  ]
};
let serData = [];
obj.barData.forEach((item) => {
  serData.push({
    name: item.name,
    type: 'bar',
    stack: 'all',
    color: item.color,
    barWidth: 32,
    data: item.data,
    showBackground: false,
    backgroundStyle: {
      color: '#134579'
    },
  })
})

option = {
  //你的代码
  backgroundColor: "#123756",
  tooltip: {
    trigger: 'axis',
    axisPointer: {
    
      type: 'shadow',
    },
    formatter: (params) => {
      let arr = [...params];
      let str = '';
      arr.forEach((item) => {
        str += item.marker + item.seriesName + '  ' + item.data + '<br />';
      });
      str = arr[0].name + '<br />' + str;
      return str;
    },
  },
     color: [
      '#159AFF',
      '#66E1DF',
      '#66E193',
      '#E3F170',
      '#FFAD6A',
      '#9A70FD',
      '#ffe0ab',
      '#6bc5f4',
      '#c08ef2',
      '#ffda49'
   ],
  //图表选择栏
  legend: {
    show:false,
    icon: 'circle',
    top: '5%',
    left: 'center',
    orient: 'horizontal', //图例方向【horizontal/vertical】
    itemHeight: 18, //修改icon图形大小
    itemWidth: 18, //修改icon图形大小
    selectedMode: false, //不允许点击图例
    itemGap: 30,
    textStyle: {
      fontSize: 16,
      color: '#fff',
    },
    data: obj.legend,
  },
  //图标离容器的距离
  grid: {
    left: '10%',
    right: '3%',
    bottom: '10%',
    top: '10%',
    //是否包含坐标轴
    containLabel: true,
  },
  //x坐标轴
  xAxis: [
    {
      type: 'value',
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255,255,255,.3'
        }
      },
      boundaryGap: false,
      axisLine: {
        show: false,
        lineStyle: {
          // 属性lineStyle控制线条样式
          color: '#5d85a0',
          width: 1,
          type: 'solid',
        },
      },
      axisLabel: {
        show:false,
        color: '#fff',
        fontSize: 16,
      },
    },
  ],
  //y坐标轴
  yAxis: [
    {
      type: 'category',
      name: '',
      data: obj.ydata,
      splitLine: {
        show: false,
      },
      inverse: true,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          // 属性lineStyle控制线条样式
          color: '#5d85a0',
          width: 1,
          type: 'solid',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
      },
    },
           {
            type: 'category',
            inverse: true,
            axisTick:{
                show:false,
            },
            axisLine: {
              show:false,
            },
            show: true,
            axisLabel: {
                textStyle: {
                    color: 'red',
                    fontSize: '24',
                },
                formatter: function (value) {
                    let val = 'asas';
                    return val + ' %';
                },
            },
            data:['幼儿园', '小学', '初中', '高中', '职校'] ,
        },
  ],
  // 数据展示区域
  series: serData
};

四、markArea

 {
//                         name: '邮件营销',
//                         type: 'line',
//                         smooth: true,
//                         color: 'yellow',
//                         data: [200, 152, 111, 184, 190, 130, 210],
// //                         markArea: {
// //                             label:{
// // show:false
// //                             },
// //                             itemStyle: {
// //                                 color: 'blue',
// //                             },
// //                             data: [[{ name: '周一', xAxis: '周一', yAxis: 100 }, { xAxis: '周五', yAxis: 150 }]]
// //                         }
//                     },