2021前端校招直通车实现Offer零距离

118 阅读1分钟

2021前端校招直通车实现Offer零距离vue+ECharts画图时的常用配置

有时分,运用 ECharts 画图时,官方提供的一些根本配置并不能满足实践项目的需求,这时就需求我们自定义一些配置,这些配置包括以下几个方面。

1、多轴配置

依据官方文档所说的,先配置两个y轴如下:

  yAxis: [
      {
         type: 'value',
         name: '1111',
         position: 'left',
         axisLine: {
            show: true,
            lineStyle: {
              color: 'blue'
            }
         },
         axisLabel: {
            formatter: '{value}'
         }
      },
      {
         type: 'value',
         name: '2222',
         position: 'right',
         axisLine: {
           show: true,
           lineStyle: {
             color: '#91cc75'
         }
      },
      axisLabel: {
         formatter: '{value}'
      }
    }
]
复制代码

下面重点是,当单个图表中存在多个y轴时,需求在 series 中运用 yAxisIndex 配置与之对应的y轴:

series: [
   {
       name: '销量1',
       type: 'bar',
       yAxisIndex: 0, // 指定第一个y轴
       data: [5, 20, 36, 10, 10, 20]
   },
   {
       name: '销量2',
       type: 'bar',
       yAxisIndex: 1, // 指定第二个y轴
       data: [150, 250, 400, 50, 150, 300]
   }
]

download