Echarts在线免费图表

 
            var container = echarts.init(document.getElementById('container'));
let ck_seriesData = [
   { name: '机构A', value: 10 },
   { name: '机构B', value: 42 },
   { name: '机构C', value: 50 },
   { name: '机构D', value: 60 },
   { name: '机构E', value: 30 },
   { name: '机构F', value: 50 },
];
option = {
   backgroundColor: "#012d65",
   color: [
      '#2FD402',
      '#FDB900',
      '#FDB900',
      '#15B5A8',
      '#9A30EB',
      '#22c4ff',
      '#1ee7d4',
      '#ffb743',
      '#ff7943',
      '#ffe0ab',
      '#6bc5f4',
      '#c08ef2',
      '#ffda49'
   ],
   tooltip: {
      transitionDuration: 0,
      trigger: 'item'
   },
   legend: {
      show: false,
      orient: 'vertical',
      top: 'center',
      right: '10%',
      icon: 'rect',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
         color: '#fff'
      },
      data: ck_seriesData,
      formatter: function (name) {
         var data = auto_option.series[0].data
         var total = 0
         var tarValue
         for (var i = 0; i < data.length; i++) {
            total += data[i].value
            if (data[i].name === name) {
               tarValue = data[i].value
            }
         }
         //var p = ((tarValue / total) * 100).toFixed(2)
         //${tarValue}%
         return `${name}`
      }
   },
   series: [
      {
         name: '',
         type: 'pie',
         radius: ['45%', '70%'],
         // 饼图位置参数
         center: ['50%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: {
            // 设置不生效
            borderRadius: 10,
            borderWidth: 5
         },
         label: {
            show: false,
            position: 'center',
            formatter: '{b_style|{b}}\n{c_style|{c}%}',//'{b_style|{b}}\n{c_style|{c}%}\n{b_style|{d}%}',
            rich: {
               b_style: {
                  fontSize: 28
               },
               c_style: {
                  color: '#fff',
                  fontSize: 32,
                  padding: [5, 0, 5, 0]
               }
            }
         },
         emphasis: {
            label: {
               show: true,
               fontSize: '14',
               fontWeight: 'normal'
            }
         },
         labelLine: {
            show: false
         },
         data: ck_seriesData
      }
   ]

};
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) => {
      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()
   }
}