关于echarts的配置项的一些解释

<template>
  <div>
    <!-- 图表存放的显示容器，必须设置宽度和高度，否则图表无法显示出来 -->
    <div class="saleEcharts" :style="{ height: echartsHeight }" ref="saleEcharts"
      v-show="saleData.length"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: ['saleData', "istitle", "lenged", 'echartsHeight'],
  data() {
    return {

    }
  },
  watch: {
    saleData: function (newval, oldval) {
      this.getSaleCondition()
    },
  },
  mounted() { this.getSaleCondition() },
  methods: {
    getSaleCondition() {
      if (!this.saleData.length) return;
      this.$nextTick(() => {
        // 不建议使用id选择器，如果是组件复用的情况下会导致其他页面的图表无法显示
        // 1.初始化图表，这里是在项目里面进行全局配置echarts，如果没有进行配置，官网上面有具体的写法https://echarts.apache.org/handbook/zh/get-started/
        //安装echatrs，需要注意版本兼容问题，有些可能会报错，具体原因具体分析吧、npm install echarts 
        //import * as echarts from 'echarts';
        let saleEcharts  = echarts.init( this.$refs.saleEcharts);
        // let saleEcharts = this.$echarts.init(
        //   this.$refs.saleEcharts
        // );
        // 获取到x轴
        let xAxisData = [];
        let seriesData = [];
        //x轴和serise里面的数据进行处理
        this.saleData.forEach((item) => {
          xAxisData.push(item.date);
          seriesData.push(item.sell_amout);
        });
        //设置标题，一写图表需要，一些图表则不需要
        let title = this.istitle ? '销售额趋势分析图' : ''
        // 配置图例， legend.data里面有数组，数组里面是每一个图例的配置
        let legend = ''
        if (this.lenged) {
          legend = {
            data: [
              {
                name: "销售额",
                icon: "triangle",//图例显示的图案形状，可以取值，none 无形状,circle 圆形,rect 矩形,roundRect 圆角矩形,triangle 三角形,diamond 菱形,arrow 箭头
                color: "#2dc079",
              },
            ],
            left: 'center',//位置top left bottom right
            bottom: 0,
          }
        } else {
          legend = ''
        }
        let saleEchartsOption = {
         grid: {
          left: '10%',
          top: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: true
        },
          title: {
            text: title,
          },
          color: ["#2dc079", "#2F80ED"],
          tooltip: {
            trigger: "axis",
          },
          legend,
          xAxis: {
            type: "category",
            data: xAxisData,
            axisTick: {
              show: false,
            },
            axisLine: {
              onZero: true,//刻度是否从零开始
              lineStyle: {
                color: "#999", //刻度线的颜色
              },
            },
            axisLabel: {//刻度标签的设置，设置间隔，文字旋转度数，文字颜色等
              // interval: intervalData,
              // rotate:30
              // textStyle: {
              //   color: "#999",
              // },
            },
            offset: 10,
            textStyle: {
              color: "#ccch", //文字颜色
              fontSize: "6", //文字大小
            },
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "#999", //刻度线的颜色
              },
            },
            name: "单位",//最上面显示单位
          },
          series: [
            {
              name: "销售额",
              data: seriesData,
              type: "line",//图表类型
              smooth: true,//是否是光滑的曲线
              symbol: "none",//每一个数值的点是否显示，如果设置不显示这无法在该点处显示具体的值
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#2dc079",
                  },
                },
              },
            },
          ],
        };

        saleEcharts.setOption(saleEchartsOption);
        // 实现自适应大小
        window.addEventListener("load", function () {
          saleEcharts.resize();
        });
        window.addEventListener("resize", function () {
          saleEcharts.resize();
        });
      });
    },
  },

}
</script>

<style lang="scss" scoped>
.noData {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  img {
    width: 160px;
    height: 160px;
    display: block;
  }

  p {
    display: block;
    color: #666666;
  }
}

.saleEcharts {
  // width: 200px;
  height: 300px;
  padding-right: 20px;
  box-sizing: border-box;
}</style>

双轴线设置

关键点在于y轴设置为数组，配置项为对象，增加属性 position: ‘left’, position: ‘right’,
series也需要设置的点在于yAxisIndex: 1 // 与第二个 Y 轴关联 ， yAxisIndex: 0 // 与第一个 Y 轴关联
顺便解释一下yAxis里面type类型value 和log value 就是具体的数值，不做处理，log是对数据取对数10，适用于数据变化比较大的数据

  yAxis: [
                    {
                        type: 'value',
                        position: 'left',
                        max:maxy0,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666'
                            },
                            // formatter: function(v) {
                            //     return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数
                            // },
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#F3F6FA'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#F3F6FA'
                            }
                        }
                    },
                    {
                        type: 'value',
                        position: 'right',
                        max:this.maxShowData,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#F3F6FA'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#F3F6FA'
                            }
                        }
                    },
                    ],

 this.allSeries = [
                        {
                            name: '展现次数',
                            type: 'line',
                            data: this.changeData(potentialCustomersArr),
                            smooth: true,
                            symbolSize: 0,
                            itemStyle: {
                                normal: {
                                    color: "#E43A3C",
                                }
                            },
                            yAxisIndex: 1 // 与第二个 Y 轴关联
                        },
                        {
                            name: '点击率',
                            type: 'line',
                            data: this.changeData(clickRateArr),
                            smooth: true,
                            symbolSize: 0,
                            itemStyle: {
                                normal: {
                                    color: "#26C6DA",
                                }
                            },
                            yAxisIndex: 0 // 与第一个 Y 轴关联
                        },
                        {
                            name: '转化率',
                            type: 'line',
                            data: this.changeData(conversionRateArr),
                            smooth: true,
                            symbolSize: 0,
                            itemStyle: {
                                normal: {
                                    color: "#1E88E5",
                                }
                            },
                            yAxisIndex: 0 // 与第一个 Y 轴关联
                        }
                    ];