Echarts在线免费图表

 
            var container = echarts.init(document.getElementById('container'));
var pieData = [
   {
      name: '一级教师',
      value: 5,
   },
   {
      name: '二级教师',
      value: 4,
   },
   {
      name: '三级教师',
      value: 3,
   },
   {
      name: '高级教师',
      value: 2,
   },
   {
      name: '正高级教师',
      value: 1,
   },
]
option = {
   backgroundColor: "#123756",
   graphic: {
      elements: [
         {
            type: 'image',
            // z: 3,
            style: {
               image: '//img.isqqw.com/profile/upload/2023/11/03/0e151b7a-a7e0-480d-a521-4dee811064e0.png',
               width: 630,
               height: 650,
            },
            left: '5%',
            top: 'center',
         },
      ],
   },
   color: [
      '#159AFF',
      '#66E1DF',
      '#66E193',
      '#E3F170',
      '#FFAD6A',
      '#ffe0ab',
      '#6bc5f4',
      '#c08ef2',
      '#ffda49'
   ],
   tooltip: {
      transitionDuration: 0,
      trigger: 'item'
   },
   legend: {
      show: true,
      orient: 'vertical',
      top: 'center',
      right: '5%',
      icon: 'rect',
      itemWidth: 20,
      itemHeight: 20,
      textStyle: {
         color: '#fff',
         fontSize: 20,
         lineHeight: 35,
      },
      data: pieData,
      formatter: (name) => {
         if (pieData.length) {
            const item = pieData.filter((item) => item.name === name)[0];
            return `  ${name}      ${item.value}`;
         }
      },
   },
   series: [
      {
         name: '',
         type: 'pie',
         radius: ['45%', '60%'],
         center: ['40%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
            // borderRadius: 10,
            borderWidth: 5
         },
         label: {
            show: false,
            position: 'center',
            formatter: '{c_style|{c}}\n{b_style|{b}}',
            rich: {
               b_style: {
                  fontSize: 28,
                  fontWeight: 400,
                  color: '#00C6FF',
               },
               c_style: {
                  padding: [5, 0, 15, 0],
                  fontSize: 56,
                  fontWeight: 'bold',
                  color: '#01F7FF',
               }
            }
         },
         emphasis: {
            label: {
               show: true,
               fontSize: '14',
               fontWeight: 'normal'
            }
         },
         labelLine: {
            show: false
         },
         data: pieData
      }
   ]

};
handleChartLoop(option, container);
// 饼图自动轮播
function handleChartLoop(option, myChart) {
   if (!myChart) {
      return
   }
   let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
   let changePieInterval = setInterval(selectPie, 1000) // 设置自动切换高亮图形的定时器

   // 取消所有高亮并高亮当前图形
   function highlightPie() {
      // 遍历饼图数据，取消所有图形的高亮效果
      for (var idx in option.series[0].data) {
         myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: idx
         })
      }
      // 高亮当前图形
      myChart.dispatchAction({
         type: 'highlight',
         seriesIndex: 0,
         dataIndex: currentIndex
      })
   }

   // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
   myChart.on('mouseover', (params) => {
      if (params.componentType == 'graphic') {
         return
      }
      clearInterval(changePieInterval)
      currentIndex = params.dataIndex
      highlightPie()
   })

   // 用户鼠标移出时，重新开始自动切换
   myChart.on('mouseout', (params) => {
      if (changePieInterval) {
         clearInterval(changePieInterval)
      }
      changePieInterval = setInterval(selectPie, 1000)
   })

   // 高亮效果切换到下一个图形
   function selectPie() {
      var dataLen = option.series[0].data.length
      currentIndex = (currentIndex + 1) % dataLen
      highlightPie()
   }
}