a543462378 2022-03-14 09:45 采纳率: 84.7%
浏览 115
已结题

怎么样让ECharts的y轴name根据按钮变化

项目里的ECharts图表根据红框按钮的不同,第一个按钮要显示单位t,第二个按钮要显示单位m³。怎么样才能显示不同的数呢?

img

boatpollTypeOption: {
        backgroundColor: "transparent",
        tooltip: { // 提示框,鼠标悬浮交互时的信息提示
          trigger: "axis",
          axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["数量", "次数", ],
          textStyle: {
            color: "#fff",
          },
          icon: "circle",
        },
        xAxis: [
          {
            type: "category",
            data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" ],
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              color: "#fff",
            },
            axisTick: { // x轴刻度线隐藏
              show: false,
            },
          },
        ],
        yAxis: {
          type: "value",
          name: "单位:t",
          nameTextStyle:{
            color:'#fff'
          },
          axisLabel: {
            formatter: "{value}",

          },
          splitLine: {
            lineStyle: { // y轴字体颜色
              type: "dashed",
              color: "#041746",
            },
          },
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "数量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: [220.0, 2.0, 9.3, 2.5, 2.3, 10.2, 9.3],
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0BF4FD",
                },
                {
                  offset: 1,
                  color: "#0BADFD",
                },
              ]),
              borderRadius: [50, 50, 0, 0],
            },
          },
          {
            name: "次数",
            type: "line",
            smooth: 0.5,
            tooltip: {
              valueFormatter: function (value) {
                return value + " °C";
              },
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 0.3],
            itemStyle: {
              color: "#C6BE44",
            },
          },
        ],
        grid: {
          top: 30,
          left: 40,
          right: 20,
          bottom: 30,
        },
      },

getData() {
      pollutionPreventionReceiveHistoricalTrend(this.listQuery).then((res) => {
        const arr_m = [];
        const arr_v = [];
        const arr_x = [];
        res.data.map((i) => {
          arr_m.push(i.time);
          arr_v.push(i.amount);
          arr_x.push(i.count);
        });
        this.boatpollTypeOption.xAxis[0].data = arr_m;
        this.boatpollTypeOption.series[0].data = arr_v;
        this.boatpollTypeOption.series[1].data = arr_x;
        console.log('this.boatpollTypeOption',this.boatpollTypeOption);
        this.polluation_type_chart_chart.setOption(this.boatpollTypeOption);
      });
    },

  • 写回答

2条回答 默认 最新

  • 你好!机器人 2022-03-14 10:10
    关注

    this.boatpollTypeOption.yAxis.name = type?'单位:t':'单位:m³'
    type是点击类型

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月22日
  • 已采纳回答 3月14日
  • 创建了问题 3月14日

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能!!有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘