Echarts在线免费图表

 
            var container = echarts.init(document.getElementById('container'));
var pieData = [
   {
      name: '一级教师',
      value: 5,
      itemStyle: {
         normal: {
            // borderWidth: 0,
            shadowBlur: 15,
            // borderRadius: 1,
            // borderColor: colorList[i],
            shadowColor: '#DF3AB9',
         },
      },
   },
   {
      name: '二级教师',
      value: 4,
      itemStyle: {
         normal: {
            // borderWidth: 0,
            shadowBlur: 15,
            // borderRadius: 1,
            // borderColor: colorList[i],
            shadowColor: '#18C79C',
         },
      },
   },
   {
      name: '三级教师',
      value: 3,
      itemStyle: {
         normal: {
            // borderWidth: 0,
            shadowBlur: 15,
            // borderRadius: 1,
            // borderColor: colorList[i],
            shadowColor: '#8555F9'
         },
      },
   },
   {
      name: '高级教师',
      value: 2,
      itemStyle: {
         normal: {
            // borderWidth: 0,
            shadowBlur: 15,
            // borderRadius: 1,
            // borderColor: colorList[i],
            shadowColor: '#F09228'
         },
      },
   },

]
option = {
   backgroundColor: "#123756",
   color: [
      '#DF3AB9', '#18C79C', '#8555F9', '#F09228'
   ],
   tooltip: {
      transitionDuration: 1,
      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',
         animationDurationUpdate: 400,
         animation: true,
         radius: ['45%', '60%'],
         center: ['40%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
            // borderRadius: 10,
            borderWidth: 5
         },
         label: {
            show: false,
            position: 'center',
            formatter: '{c_style|{c}}{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()
   }
}