echart的双y轴且可选图例的图表组件

且听风呤dzq

已于 2022-02-08 10:22:23 修改

阅读量684

点赞数

分类专栏：笔记文章标签： echarts vue.js javascript

于 2022-02-07 17:56:13 首次发布

本文链接：https://blog.csdn.net/qq_47122636/article/details/122810959

版权

本文介绍了如何使用Echarts创建一个具备双Y轴且图例可选择的图表组件，特别地，该组件在Vue和Element UI环境中进行了展示，并限制了最多同时选择两个图例项。

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

echart的双y轴且可选图例的图表组件

一、效果图

在这里插入图片描述

二、构建组件

示例用的是vue和element ui演示的，对多选做了限制，只能同时选择2个

代码如下（示例）：

<template>
  <div style="background:#ffffff">
    <div id="income" style="height:80vh;width:100%"></div>
    <div style="height: 70px; margin-left: 18%">
      <!-- 选择图例 -->
      <el-checkbox-group
        v-model="lengendList"
        @change="lengendChange"
        size="mini"
        :min="0"
        :max="2"
      >
        <el-checkbox
          v-for="city in lengendData"
          border
          :label="city"
          :key="city"
          >{
   {
    city }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
//引入所需的echarts组件
import * as echarts from "echarts/core";
import {
    LineChart, BarChart } from "echarts/charts";
import {
    CanvasRenderer } from "echarts/renderers";
import {
   
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  ToolboxComponent,
} from "echarts/components";

echarts.use([
  CanvasRenderer,
  LineChart,
  BarChart,
  TooltipComponent,
  GridComponent,
  TitleComponent,
  LegendComponent,
  ToolboxComponent,
]);

export default {
   
    name: 'myEchart',
  props: ['listData','title'],//父组件传入的数据和表名

  data() {
   
    return {
   
      // 图表的数据
      incomeChartData: {
   
        xAxis: [],
        reqSmt: [],
        resSmt:[],
        uniShowSmt:[],
        uniClkSmt:[],
        auctionPrice:[],
        winPrice:[],
        profit:[],
      },
      //图例的选项
      lengendData: [
        "请求数",
        "填充数",
        "展示数",
        "点击数",
        "支出",
        "收入",
        "利润",
      ],
      //默认选择的图例
      lengendList: ["展示数"],

      //图例的显示与否
      lengendList2: {
   
        请求数: false,
        填充数: false,
        展示数: true,
        点击数: false,
        支出: false,
        收入: false,
        利润: false,
      },
      timer: undefined,