echarts圆环图

110 阅读1分钟

image.png

<div class="reagent_class_count">
                    <div class="warning-list">试剂分类统计</div>
                    <div id="reagentClassCount" style="width: 100%;height:100%;top: -40px !important;"></div>
                </div>
                
                
                
                <script>
    var myChart = echarts.init(document.getElementById('reagentClassCount'));
    option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: -8,
    left: 'center',
    itemWidth:6,//设置'.'字体大小
    itemHeight:6,
    itemGap: 25,//字体间距
    formatter: function (name) {
                // 获取legend显示内容
                let data = option.series[0].data;
                let tarValue = '';
                for (let i = 0, l = data.length; i < l; i++) {
                    if (data[i].name == name) {
                        tarValue = data[i].value;
                    }
                }
                return name + ' ' + ' ' + tarValue;
            },
  },
  title: {
    text: '',
    left: 'center',
    top: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 50,
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        show: true,
        position: 'center',
        formatter:()=>{
            let str='试剂分类总量'+'\n'+698
            return str
        },
        lineHeight:25,
        color:'#303133',
        fontSize:18
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      color:['#40BEFF','#37DEE1','#93E87E','#FCDC3C','#F56C6C'],
      data: [
        { value: 1048, name: '酸性' },
        { value: 735, name: '碱性' },
        { value: 580, name: '易燃物' },
        { value: 484, name: 'CMR' },
        { value: 300, name: '普通化学品' }
      ]
    }
  ]
};
myChart.setOption(option);
</script>