vue+echarts ② echarts两个图表在同一行、echarts图表放在el-dialog里面展示

一、echarts两个图表展示在同一行

① 效果图

② div样式设置:用一个div包住图表,样式设置为 float: left; overflow: hidden;

    <div style="width: 50%; float: left; overflow: hidden">
      <div id="echart" style="width: 100%; height: 300px"></div>
    </div>
    <div style="width: 50%; float: left; overflow: hidden">
      <div id="echart1" style="width: 100%; height: 300px"></div>
    </div>

二、在el-dialog中展示echarts图表

① 效果图

 ② el-dialog代码设置

    <el-dialog title="弹窗展示" :visible.sync="isShow" @open="open()">
      <div id="echart" style="width: 100%; height: 300px"></div>
    </el-dialog>

③ open函数设置

    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.drawChart();
      });
    },

     drawChart() {
      const myChart = this.$echarts.init(document.getElementById("echart"));
      myChart.setOption(this.option);
    },

这里写个定时器也可以达到同样的效果

    open() {
      setTimeout(() => {
        this.drawChart();
      }, 0);
    },

④ 完整代码展示

<template>
  <div>
    <el-button @click="isShow = true">展示</el-button>
    <el-dialog title="弹窗展示" :visible.sync="isShow" @open="open()">
      <div id="echart" style="width: 100%; height: 300px"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: "测试用例",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "测试用例1" },
              { value: 735, name: "测试用例2" },
              { value: 580, name: "测试用例3" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      isShow: false,
    };
  },
  methods: {
    drawChart() {
      const myChart = this.$echarts.init(document.getElementById("echart"));
      myChart.setOption(this.option);
    },
    open() {
      this.$nextTick(() => {
        //  执行echarts方法
        this.drawChart();
      });
    },
  },
};
</script>

<style scoped lang="less">
</style>

  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这里提供一个简单的方案供你参考。 首先,你需要在 Vue 项目中引入 echarts 库,可以通过 npm 安装,也可以通过引入 CDN 资源的方式。 然后,在 Vue 组件中,你可以使用 echarts 来绘制图表,并使用 Vue 的数据绑定功能将输入框的值与图表的数据关联起来。当输入框的值发生变化时,你可以通过监听 input 事件来更新图表的数据,并通过 echarts 的 setOption 方法来重新渲染图表。 最后,你可以通过 Web Audio API 来实现发声效果,当图表的数据发生变化时,你可以根据数据的变化来控制音频的播放效果。 下面是一个简单的示例代码: ```vue <template> <div> <input v-model="value" @input="updateChart"> <div ref="chart" style="width: 400px; height: 400px;"></div> </div> </template> <script> import * as echarts from 'echarts' export default { data() { return { value: '', chartData: [] } }, mounted() { this.chart = echarts.init(this.$refs.chart) this.updateChart() }, methods: { updateChart() { // 更新图表数据 this.chartData = this.value.split('').map((c, i) => ({ value: c.charCodeAt(0), symbolSize: 20 })) // 重新渲染图表 this.chart.setOption({ series: [{ type: 'scatter', data: this.chartData }] }) // 播放音频 const audioCtx = new (window.AudioContext || window.webkitAudioContext)() const gainNode = audioCtx.createGain() gainNode.gain.value = 0.5 const oscillator = audioCtx.createOscillator() oscillator.connect(gainNode) gainNode.connect(audioCtx.destination) oscillator.type = 'sine' oscillator.frequency.setValueAtTime(1000, audioCtx.currentTime) oscillator.frequency.linearRampToValueAtTime(2000, audioCtx.currentTime + 1) oscillator.start() oscillator.stop(audioCtx.currentTime + 1) } } } </script> ``` 这个示例中,我们使用了 echarts 的散点图来展示输入框中的字符,每个字符对应一个散点,其大小和颜色都可以自定义。当输入框中的值发生变化时,我们通过 map 方法将其转换为 echarts 的数据格式,并使用 setOption 方法重新渲染图表。 同时,我们使用 Web Audio API 来实现发声效果,当图表的数据发生变化时,会播放一个音频,其频率从 1000Hz 线性地变化到 2000Hz。你可以根据自己的需求来调整音频的参数和效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值