56Echarts - 饼图(Customized Pie)

简介: 56Echarts - 饼图(Customized Pie)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      option = {
        backgroundColor: '#2c343c',
        title: {
          text: 'Customized Pie',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: [{
              value: 335,
              name: '直接访问'
            },
            {
              value: 310,
              name: '邮件营销'
            },
            {
              value: 274,
              name: '联盟广告'
            },
            {
              value: 235,
              name: '视频广告'
            },
            {
              value: 400,
              name: '搜索引擎'
            }
          ].sort(function(a, b) {
            return a.value - b.value;
          }),
          roseType: 'radius',
          label: {
            normal: {
              textStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            }
          },
          itemStyle: {
            normal: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function(idx) {
            return Math.random() * 200;
          }
        }]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
|
2月前
|
数据格式
ECharts 饼图
本章节我们将绘制饼图。
55 15
|
30天前
|
XML 前端开发 数据库
echarts饼图前后端代码SpringCloud+Vue3
echarts饼图前后端代码SpringCloud+Vue3
31 0
|
3月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
130 0
|
5月前
|
开发者 容器
Echarts饼图实现-今日进度-动态图
构建一个动态旋转的ECharts饼图,包括渐变色和动画效果。初始化ECharts实例,设置图表尺寸和背景,配置标题、颜色、系列数据及自定义渲染。利用`renderItem`绘制弧线和圆点,`getCirlPoint`计算坐标。通过`setInterval`和`draw`函数实现旋转动画。完整代码可在链接下载。
114 0
Echarts饼图实现-今日进度-动态图
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
350 0
|
5月前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
5月前
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
5月前
|
Serverless 开发者 容器
Echarts饼图-今日进度-动态图
构建一个动态饼图,采用ECharts,背景为蓝色科技风,有星球转动效果。通过`echarts.init`初始化,设置图表尺寸和背景色,配置`option`对象含标题、颜色等。利用`series`定义渐变色并自定义渲染,通过`renderItem`绘制弧线和圆点。`getCirlPoint`函数计算坐标,`draw`函数更新角度实现动画。代码包括图表初始化、系列配置、动画逻辑等关键部分。完整代码可在链接处下载。
66 0
|
12月前
Echarts饼图之-玫瑰图数据交互
Echarts饼图之-玫瑰图数据交互
110 0
|
12月前
echarts饼图点击区块事件
echarts饼图点击区块事件
85 0