hustcc / echarts-for-react

⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
https://git.hust.cc/echarts-for-react
MIT License
4.56k stars 633 forks source link

设置饼图默认高亮 #303

Closed codinglilong closed 5 years ago

codinglilong commented 5 years ago
import React from 'react'
import ReactEcharts from 'echarts-for-react';

export default class EChartsDemo extends React.Component {
  constructor(props) {
    super(props);
    this.chart = null
  }
  onChartReadyCallback = (chart) => {
    // console.log(chart)
   //这种方法也是失败的
    //chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
  }
  onChartClick = (e) => {
    console.log(e)
    this.chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 1, 
      dataIndex: 2
    })
    this.chart.dispatchAction({ type: 'highlight', seriesIndex: e.seriesIndex, dataIndex: e.dataIndex });
  }
  componentDidMount() {
    // console.log(this.chart)
   //这种方法也是失败的
    this.chart.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: 2 });
  }
  render() {
    const options = {
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ]
        }
      ]
    };

    return (
      <ReactEcharts
        option={options}
        ref={(e) => {
          this.chart = e.getEchartsInstance()
        }}
        onChartReady={this.onChartReadyCallback}
        onEvents={{
          click: this.onChartClick,
        }}
      />
    )
  }
}`

不管我怎么设置为什么不能做到打开页面默认饼图高亮一块地方。每次进入页面高亮凸起一块就一闪而过。不能停留。这是为什么呀?难道我用的不对吗?

xwlaix commented 5 years ago

请问解决了吗,我也遇到了

xwlaix commented 5 years ago

好吧,设置一个定时器,应该是叠加渲染出现问题了,初始化之后覆盖了。。