JSFiddle - React, Tailwind, and code Playground

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript

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

var data = [{
  'name': 'Pending in 7 Days',
  'value': 10
}, {
  'name': 'Over Due',
  'value': 20
}]

const defaultTitle = {
  text: '16',
  subtext: "Total Outstanding",
  padding: [-10,0,0,0],
  textStyle: {
    color: 'black',
    fontSize: 65
  },
  subtextStyle: {
    color: 'grey',
    fontSize: 20
  },
  itemGap: -20,
  left: 'center',
  top: 'center',
}

option = {
  title: defaultTitle,
  "tooltip": {
    "trigger": "item"
  },
  "colorBy": "data",
  "series": {
    "type": "pie",
    "radius": [
      "65%",
      "90%"
    ],
    "avoidLabelOverlap": false,
    "legend": {
      "show": false
    },
    "tooltip": {
      "show": false
    },
    "itemStyle": {
      "borderColor": "#fff",
      "borderWidth": 2
    },
    "label": {
      "show": false,
      "position": "center"
    },
    "emphasis": {
      "label": {
        "show": false,
      }
    },
    "data": [
      {
        "value": 12,
        "name": "Due in 7 days",
        "itemStyle": {
          color: "#FEAA2C"
        }
      },
      {
        "value": 3,
        "name": "Overdue",
        "itemStyle": {
          color: "#EC2B00"
        }
      }
    ]
  }
};


myChart.setOption(option);

myChart.on('mouseover', (e) => {
  option.series.data.map((data, index)=>{
    if (index !== e.dataIndex) {
      option.series.data[index].itemStyle.color = "grey"
    }
  })
  option.title.text = e.data.value
  option.title.subtext = e.data.name
  myChart.setOption(option);
});
myChart.on('mouseout', (e) => {
  option.title.text = "16"
  option.title.subtext = "Total Outstanding"
  option.series.data = [
    {
      "value": 12,
      "name": "Due in 7 days",
      "itemStyle": {
        color: "#FEAA2C"
      }
    },
    {
      "value": 3,
      "name": "Overdue",
      "itemStyle": {
        color: "#EC2B00"
      }
    }
  ]
  myChart.setOption(option);
});