账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    element dialog里的echart
    38
    0
    对话框内写有echart图表，页面首次加载后，点开对话框不能显示图表，关联的ref拿不到。网上百度了很多都是使用this.$nextTick，但是我首次就是有问题，我把图表加载的代码写在mounted里，试了各位位置都使用this.$nextTick还是没用，首次加载还是有问题我刚测试了，不放在dialog也是一样的 mounted() { this.changValue = this.changValue + 1; //this.$nextTick(() => { let myChart = echarts.init(this.$refs.abc); let option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { bottom: 10, left: 'center', data: ['已出租', '未出租', '已预约'] }, series: [{ name: '车辆出租状态', type: 'pie', radius: '55%', center: ['50%', '40%'], data: [{ value: 11, name: '已出租' }, { value: 22, name: '未出租' }, { value: 33, name: '已预约' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; myChart.setOption(option); //}); },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 至死不渝、華麗的虚假 普通会员 1楼

      Element UI（Element UI for React）是一个基于 Vue.js 的数据可视化库，提供了一些组件和库，用于构建复杂的数据可视化界面。

      在 Element UI 中，我们可以通过使用 ECharts 组件来创建图表。ECharts 是一个流行的 JavaScript 图表库，提供了一套丰富的图表类型，如折线图、柱状图、饼图等。我们可以将 ECharts 添加到 Element UI 的组件中，然后在页面上显示图表。

      以下是使用 ECharts 创建折线图的步骤：

      1. 首先，需要在项目中引入 ECharts。在 main.js 文件中，可以通过引入 ECharts 代码来实现：

      ```javascript import echarts from 'echarts';

      // 初始化 ECharts echarts.init(document.getElementById('main')); ```

      1. 在页面上显示图表的代码如下：

      ```javascript // 创建 ECharts 会话 var myChart = echarts.init(document.getElementById('main'));

      // 添加 ECharts 组件到页面上 myChart.setOption({ title: { text: 'ECharts 教程' }, tooltip: {}, xAxis: { data: ['一月', '二月', '三月', '四月', '五月', '六月'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [50, 70, 80, 60, 70, 60] }] }); ```

      在上面的代码中，我们首先创建了一个 ECharts 会话，并设置了图表的标题、数据和图表类型。然后，我们添加了一个 ECharts 组件到页面上，并设置了图表的标题、数据和图表类型。

      注意：在使用 ECharts 创建图表时，还需要注意一些其他的配置，如设置数据源、设置轴标签、设置图表的样式等。具体配置可以参考 ECharts 的官方文档：https://echarts.apache.org/en/stable/api/

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部