闭着眼睛写饼图之双饼图双饼图写法:1.引入echarts,2.准备一个有宽高的盒子,3.初始化,4.填入图表内容,5.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.引入echarts -->
  <script src="./echarts/echarts.min.js"></script>
</head>

<body>
  <!-- 2.准备一个有宽高的盒子 -->
  <div class="box" style="width:600px;height:600px"></div>

  <script>
    /* 3.初始化 */
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.box'));

    // 指定图表的配置项和数据
    const option = {
      // 0.标题
      title: {
        text: '班级薪资分布',
        left: 10,
        top: 10
      },
      // 1.鼠标移入提示
      tooltip: {
        trigger: 'item'
      },
      // 2.顶部提示
      legend: {
        bottom: '10',
        left: 'center'
      },
      // 3.颜色
      color: ['#00d69e', '#ff9c04', '#1798ff', '#00befc'],
      // 4.图表内容
      series: [
        {
          name: '班级薪资',
          type: 'pie',
          // 内圆 和 外圆直径
          radius: ['50%', '70%'],
          // 防止文字过多出现重叠
          avoidLabelOverlap: true,
          // 饼样式
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          // 文本样式
          label: {
            show: false,
            position: '10'
          },
          // 移入高亮样式
          emphasis: {
            label: {
              show: false,
              fontSize: '10',
              fontWeight: 'bold'
            }
          },
          // 提示线条样式
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '1万以下' },
            { value: 735, name: '1-1.5万' },
            { value: 580, name: '1.5-2万' },
            { value: 484, name: '2万以上' },
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

  </script>
</body>

</html>