const $ = require('jquery');
require("../css/reset.less")
require("../css/console.less")
require("../images/logo.png")
// import 'zrender/lib/svg/svg';
const echarts = require('echarts');
console.log(echarts)
$(function(){
  // var myChart = echarts.init(document.getElementById('echarts'));
  var myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  let app = {}
  let option = {
    title: {
        text: '饼图程序调用高亮示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
          {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                  {value: 335, name: '直接访问'},
                  {value: 310, name: '邮件营销'},
                  {value: 234, name: '联盟广告'},
                  {value: 135, name: '视频广告'},
                  {value: 1548, name: '搜索引擎'}
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };

  app.currentIndex = -1;

  setInterval(function () {
      var dataLen = option.series[0].data.length;
      // 取消之前高亮的图形
      myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
      });
      app.currentIndex = (app.currentIndex + 1) % dataLen;
      // 高亮当前图形
      myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex
      });
      // 显示 tooltip
      myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
      });
  }, 1000);
  myChart.setOption(option);
})