ECharts官网饼图教程注释

最新推荐文章于 2024-06-09 13:42:05 发布

小马裤

最新推荐文章于 2024-06-09 13:42:05 发布

阅读量1.3k

点赞数

分类专栏：图文章标签：前端 echarts 饼图

本文链接：https://blog.csdn.net/weixin_42698255/article/details/88942208

版权

图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（仅为个人笔记–没啥参考价值）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .content {
      width: 100%;
      height: 100%;
      background: #eeeeee;
      display: flex;
    }

    .left {
      width: 50%;
      height: 100%;
      background: pink;
    }

    .right {
      width: 50%;
      height: 100%;
      background: skyblue;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="left">

    </div>
    <div class="right">
      <div id="main" style="width: 600px;height:400px;"></div>
    </div>

  </div>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js"></script>
  <script>
    var myChart = echarts.init(document.getElementById('main'));

    option = {
      title: {
        text: '某站点用户访问来源',//主标题
        subtext: '纯属虚构',//副标题
        x: 'center'//位置
      },
      // 触摸出现蒙层信息
      tooltip: {
        trigger: 'item',//什么时候该触发；none表示不触发
        formatter: "{a} <br/>{b} : {c} ({d}%)"//表示显示的信息
      },
      // // 改文本样式
      textStyle: {
        color: 'red'
      },
      // 改背景
      backgroundColor: 'aqua',
      // 侧边栏小提示
      legend: {
        orient: 'vertical',//图例布局朝向'horizontal'
        left: 'left',
        data: ['完成', '未完成']
      },
      series: [
        {
          // name: '访问来源',
          type: 'pie',//表示饼图
          radius: '50%',//大小
          roseType: 'angle',//南丁格尔图
          center: ['50%', '50%'],//位置
          data: [
            {
              value: 0.8, name: '完成', itemStyle: {
                // 改每一扇的颜色
                color: 'pink'
              },
              // 改线的颜色
              labelLine: {
                lineStyle: {
                  color: '#000'
                }
              },
            },
            {
              value: 0.2, name: '未完成', itemStyle: {
                color: 'skyblue'
              },
              // 改线的颜色
              labelLine: {
                lineStyle: {
                  color: '#fff'
                }
              },
            },
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0)'
            },
            // 饼图外的阴影；
            normal: {
              // 阴影的大小
              shadowBlur: 200,
              // 阴影水平方向右的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: 'rgba(255, 0, 0, 0.5)'
            }
          }

        }
      ]
    };
    myChart.setOption(option);
  </script>
</body>

</html>

小马裤

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ECharts官网饼图教程注释

（仅为个人笔记–没啥参考价值）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫

专栏目录