账号密码登录
微信安全登录
微信扫描二维码登录

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    echarts dispatchAction highlight无效果
    28
    0

    问题描述

    vue 项目 用echarts绘制饼图,需要有一个扇形是默认高亮的,但是我设置了dispatchAction,但是没有效果

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)
    数据的option: option: {

        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: {
          data: [
            {value: 1335, name: '直接访问', one: 1},
            {value: 310, name: '邮件营销', one: 2},
            {value: 234, name: '联盟广告', one: 3},
            {value: 135, name: '视频广告', one: 4},
            {value: 548, name: '搜索引擎', one: 5}
          ],
          name: 'visitedSource',
          type: 'pie',
          radius: '55%',
          silent: true,
          zlevel: 0,
          hoverAnimation: false,
          hoverOffset: 10,
          center: ['50%', '60%'],
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList
                colorList = ['#00ffff', '#00ff00', '#ffff00', '#FF8C00', '#FF0000']
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            normal: {
              position: 'inner',
              show: false
            }
          }
        }
      },
      

    绘制饼图和高亮的代码:mounted () {

    let myChart = this.$echarts.init(this.$refs.pieDemo)
    myChart.setOption(this.option)
    setTimeout(() => {
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })
    }, 500)

    },

    你期待的结果是什么?实际看到的错误信息又是什么?

    请帮忙看下,是哪里出现问题了吗??

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 都市少缘人 普通会员 1楼

      ECharts中的dispatchAction方法用于执行图例切换、图例颜色切换等操作。如果执行结果为null,可能是以下原因:

      1. 图例的路径没有正确设置。你需要确保图例路径正确,否则echarts无法正确显示图例。

      2. 图例的颜色没有正确设置。你需要确保图例的颜色正确,否则echarts无法正确显示图例。

      3. 图例的样式没有正确设置。你需要确保图例的样式正确,否则echarts无法正确显示图例。

      4. 图例的位置没有正确设置。你需要确保图例的位置正确,否则echarts无法正确显示图例。

      5. 图例的显示顺序没有正确设置。你需要确保图例的显示顺序正确,否则echarts无法正确显示图例。

      6. 图例的文字内容没有正确设置。你需要确保图例的文字内容正确,否则echarts无法正确显示图例。

      7. 图例的大小没有正确设置。你需要确保图例的大小正确,否则echarts无法正确显示图例。

      如果你确定以上原因没有问题,可以尝试增加dispatchAction的参数,例如:dispatchAction({ type: 'highlight', data: { name: 'yourValue' }, trigger: 'legend' });

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部