v-charts环图问题

[淘气包bck]

<template>
  <ve-ring :data="chartData" :extend="chartExtend"></ve-ring>
</template>

<script>
  export default {
    data () {
      this.chartExtend ={
        series:{
          radius: ['50%', '70%'],
          label:{
            normal: {
            show: false,
            formatter:"{d}%",
            position: 'center'
            },
            emphasis:{
              show: true,
              textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
            }
          }
        },
        legend:{
          data:[],
        },
        color:['#3399FF', '#B8B8B8'],
      }
      return {
        chartData: {
          columns: ['状态', '完成量'],
          rows: [
            { '状态': '已完成', '完成量': 80 },
            { '状态': '未完成', '完成量': 20 },
          ]
        }
      }
    }
  }
</script>

vue结合echarts制作的环图，我想默认环图中间默认显示第一个数值，即图2

[Hello World,]

思路：获取v-charts的echarts对象，执行highlight动作，使其高亮：
1、增加ref属性，后期好引用

<div id="app3">
    <ve-ring :data="chartData" :extend="chartExtend" ref="chart_ring"></ve-ring>
</div>

2、在mounted事件中获取echarts对象并处理

    mounted() {
        this.$nextTick(() => {
            chart = this.$refs['chart_ring'].echarts;
            setTimeout(function () {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: 0
                });
            }, 0);
        });
    }

[淘气包bck]

引用 6 楼 Hello World, 的回复:

思路：获取v-charts的echarts对象，执行highlight动作，使其高亮： 1、增加ref属性，后期好引用

<div id="app3">
    <ve-ring :data="chartData" :extend="chartExtend" ref="chart_ring"></ve-ring>
</div>

2、在mounted事件中获取echarts对象并处理

    mounted() {
        this.$nextTick(() => {
            chart = this.$refs['chart_ring'].echarts;
            setTimeout(function () {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: 0
                });
            }, 0);
        });
    }

版主你好实现到是能实现了，可是选第二个时，没有替换第一个数值，就相当于一直选定第一个数值了呀，小弟刚学vue不久，还请版主赐教

[Hello World,]

试下这样：

    mounted() {
        this.$nextTick(() => {
            chart = this.$refs['chart_ring'].echarts;
            setTimeout(function () {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: 0
                });
            }, 0);
            //鼠标放置时高亮，移开后取消高亮
            chart.on('mouseover', function (params) {
                var options = this.getOption();
                var data = options.series[params.seriesIndex].data;
                for (var i = 0; i < data.length; i++) {
                    if (i !== params.dataIndex) {
                        this.dispatchAction({
                            type: 'downplay',
                            dataIndex: i
                        });
                    }
                }
            });
            //鼠标单击时选中
            chart.on('click', function (params) {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: params.dataIndex
                });
            });
        });
    }

[淘气包bck]

引用 8 楼 Hello World, 的回复:

试下这样：

    mounted() {
        this.$nextTick(() => {
            chart = this.$refs['chart_ring'].echarts;
            setTimeout(function () {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: 0
                });
            }, 0);
            //鼠标放置时高亮，移开后取消高亮
            chart.on('mouseover', function (params) {
                var options = this.getOption();
                var data = options.series[params.seriesIndex].data;
                for (var i = 0; i < data.length; i++) {
                    if (i !== params.dataIndex) {
                        this.dispatchAction({
                            type: 'downplay',
                            dataIndex: i
                        });
                    }
                }
            });
            //鼠标单击时选中
            chart.on('click', function (params) {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: params.dataIndex
                });
            });
        });
    }

有点尴尬，鼠标移开后它又不显示第一个数值了，或者换种思路，中间默认显示第一个数值，鼠标点击才显示点击的数值，鼠标移开后又默认显示第一个数值，不知这样可行不？

[淘气包bck]

引用 8 楼 Hello World, 的回复:

试下这样：

    mounted() {
        this.$nextTick(() => {
            chart = this.$refs['chart_ring'].echarts;
            setTimeout(function () {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: 0
                });
            }, 0);
            //鼠标放置时高亮，移开后取消高亮
            chart.on('mouseover', function (params) {
                var options = this.getOption();
                var data = options.series[params.seriesIndex].data;
                for (var i = 0; i < data.length; i++) {
                    if (i !== params.dataIndex) {
                        this.dispatchAction({
                            type: 'downplay',
                            dataIndex: i
                        });
                    }
                }
            });
            //鼠标单击时选中
            chart.on('click', function (params) {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: params.dataIndex
                });
            });
        });
    }

默认状态，只需要中间显示第一个数值，并不需要真正的点击事件

[淘气包bck]

有人能来回答一下吗？

[JiexC0la]

参考下这篇文章， https://www.jianshu.com/p/e24381d32753

[淘气包bck]

引用 2 楼 JiexC0la 的回复:

参考下这篇文章， https://www.jianshu.com/p/e24381d32753

这是原生的echart要操作dom的，原生的我知道怎么做，v-charts是vue封装的,我需要传参，用不了原生的。

[JiexC0la]

引用 3 楼 淘气包bck 的回复：

[quote=引用 2 楼 JiexC0la 的回复:] 参考下这篇文章， https://www.jianshu.com/p/e24381d32753

这是原生的echart要操作dom的，原生的我知道怎么做，v-charts是vue封装的,我需要传参，用不了原生的。[/quote]刚去看了下v-charts官网，可以在组件上绑定，你可以试下，https://v-charts.js.org/#/event

[JiexC0la]

引用 4 楼 JiexC0la 的回复：

[quote=引用 3 楼 淘气包bck 的回复：][quote=引用 2 楼 JiexC0la 的回复:] 参考下这篇文章， https://www.jianshu.com/p/e24381d32753

这是原生的echart要操作dom的，原生的我知道怎么做，v-charts是vue封装的,我需要传参，用不了原生的。[/quote]刚去看了下v-charts官网，可以在组件上绑定，你可以试下，https://v-charts.js.org/#/event[/quote]我觉得原理还是通过这些事件去改它的配置项，没用过v-charts，不要喷我

[zhtoad]

echart 挺好。我都用。需要花店工作。

[淘气包bck]

引用 14 楼 Hello World, 的回复:

可以把hoverOffset设置为0

ref是不是不可以同名？如果

chartData: {
          columns: ['状态', '完成量'],
          rows: [
            { '状态': '已完成', '完成量': 80 },
            { '状态': '未完成', '完成量': 20 },
          ]
        }

改为

chartData(number) {
        return {
          columns: ["状态", "完成量"],
          rows: [
            { 状态: "已完成", 完成量: number },
            { 状态: "未完成", 完成量: 100 - number }
          ]
        };
      },

v-for循环输入不同的number值，环图能刷出来，this.$refs['chart_ring'].echarts只对最后一环图起作用？

<ve-ring :data="chartData(number)" :extend="chartExtend" ref="chart_ring"></ve-ring>

[任小栗]

为啥我复制代码，一点效果都没有

[Hello World,]

    mounted() {
        this.$nextTick(() => {
            chart = this.$refs['chart_ring'].echarts;
            setTimeout(function () {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: 0
                });
                chart.selected = 0;//记录选中的项目
            }, 0);
            //鼠标放置时高亮，移开后取消高亮
            chart.on('mouseover', function (params) {
                var options = this.getOption();
                var data = options.series[params.seriesIndex].data;
                for (var i = 0; i < data.length; i++) {
                    if (i !== params.dataIndex) {
                        this.dispatchAction({
                            type: 'downplay',
                            dataIndex: i
                        });
                    }
                }
            });
            //鼠标单击时选中
            chart.on('click', function (params) {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: params.dataIndex
                });
                this.selected = params.dataIndex;//选中的项目
            });
            //当鼠标移出时恢复默认或者单击选中的项目
            chart.on('mouseout', function (params) {
                this.dispatchAction({
                    type: 'highlight',
                    dataIndex: this.selected
                });
            });
        });
    }

[淘气包bck]

引用 12 楼 Hello World, 的回复:

    mounted() {
        this.$nextTick(() => {
            chart = this.$refs['chart_ring'].echarts;
            setTimeout(function () {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: 0
                });
                chart.selected = 0;//记录选中的项目
            }, 0);
            //鼠标放置时高亮，移开后取消高亮
            chart.on('mouseover', function (params) {
                var options = this.getOption();
                var data = options.series[params.seriesIndex].data;
                for (var i = 0; i < data.length; i++) {
                    if (i !== params.dataIndex) {
                        this.dispatchAction({
                            type: 'downplay',
                            dataIndex: i
                        });
                    }
                }
            });
            //鼠标单击时选中
            chart.on('click', function (params) {
                chart.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    seriesIndex: 0,
                    dataIndex: params.dataIndex
                });
                this.selected = params.dataIndex;//选中的项目
            });
            //当鼠标移出时恢复默认或者单击选中的项目
            chart.on('mouseout', function (params) {
                this.dispatchAction({
                    type: 'highlight',
                    dataIndex: this.selected
                });
            });
        });
    }

版主大大不知是否默认情况下，中间只显示数值，圆框没有放大效果，不行也没关系啦

[Hello World,]

可以把hoverOffset设置为0

[淘气包bck]

引用 14 楼 Hello World, 的回复:

可以把hoverOffset设置为0

不用改了，就这样就行了，我在v-charts官网导入代码就可以实现，可是在自己的项目就实现不了，好像chart = this.$refs['chart_ring'].echarts;这个没起作用。

[淘气包bck]

引用 14 楼 Hello World, 的回复:

可以把hoverOffset设置为0

我知道了要初始化chart,改var chart = this.$refs['chart_ring'].echarts;