鍍金池/ 問答/HTML5  HTML/ 關于插件echarts的一個問題

關于插件echarts的一個問題

圖片描述

這個是鼠標移進去的效果，但是我想打開頁面的時候，就有一個默認為這樣的！

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="echarts.js"></script>
</head>

<body>
  <!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
  <div id="main" style="width: 335px;height:325px;"></div>
  <script type="text/javascript">
    // 基于準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項和數據

    option = {
      tooltip: {
        trigger: 'item'
      },
      series: [{
          name: '學校錄取信息',
          type: 'pie',
          radius: ['45%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '14',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: [{
              value: 335,
              name: '直接訪問'
            },
            {
              value: 310,
              name: '郵件營銷'
            },
            {
              value: 234,
              name: '聯盟廣告'
            },
            {
              value: 135,
              name: '視頻廣告'
            },
            {
              value: 1548,
              name: '搜索引擎'
            }
          ]
        },
        {
          name: 'radial gradient',
          type: 'pie',
          radius: '70%',
          avoidLabelOverlap: false,
          itemStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)'
                }, {
                  offset: 0.55,
                  color: 'rgba(255,255,255,0.5)'
                }, {
                  offset: 0.65,
                  color: 'rgba(255,255,255,0.5)'
                }, {
                  offset: 0.95,
                  color: 'rgba(255,255,255,0)'
                }],
                globalCoord: false
              }
            }
          },
          silent: true,
          z: 999,
        }
      ]
    };

    var index = 0;//數據的第幾個顯示
//高亮圖形
myChart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: index
});
// 顯示 tooltip
myChart.dispatchAction({
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: index
});
    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);


  </script>
</body>

</html>
回答
編輯回答
無標題

不知道作者是否有嘗試監(jiān)聽事件來進行操作。
不知道是想一直保持顯示聯盟廣告還是其他交互，建議嘗試在事件中進行相關處理。

myChart.on('mouseover', function (params,e) {
  if (params.name == '聯盟廣告') {
    console.log(params);
  }
});

可參考官方文檔ECharts 中的事件和行為

2017年5月27日 16:07
編輯回答
壞脾滊

通過 highlight 指定高亮：http://echarts.baidu.com/api....

myChart.dispatchAction({
    type: 'highlight',
    name: '聯盟廣告'
});
2018年6月23日 13:38