Display an interactive pie chart showing website referrers using ECharts library

by YeongCY

HTML

<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <button onclick="updateChart()">Update</button> 
    <div id="main"></div>
  </body>
</html>

CSS

#main {
  width: 600px;
  height: 400px;
  border: 1px solid red;
}

JavaScript

// import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var data = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
];

var data2 = [
  { value: 484, name: 'Union Ads' },
  { value: 735, name: 'Direct' },
  { value: 1048, name: 'Search Engine' },
  { value: 580, name: 'Email' },
  { value: 300, name: 'Video Ads' }
];

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  dataset: {
    dimensions: ['name', 'value'],
    source: data
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      // data: data,
      encode: {
        itemName: ['name'],
        value: 'value'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ],
  color: [
    'red',
    'blue',
    'purple',
    'green',
    'yellow',
    'orange'
  ]
};

option && myChart.setOption(option);

function updateChart() {
  // for(i=0; i < option.series.length; i++) {
  //   console.log(i);
  //   option.series[i].data = data2;
  // };
  option.dataset.source = data2;
  option.color = [
    'orange',
    'red',
    'blue',
    'purple',
    'green',
    'yellow'
  ]

  console.log(option)
  myChart.setOption(option, true)
}