Echart——饼图和堆叠区域图

最新推荐文章于 2024-07-29 17:40:36 发布
最新推荐文章于 2024-07-29 17:40:36 发布
阅读量6.8k 收藏 3
点赞数
分类专栏： Chart 文章标签： echart 饼图 堆叠区域图 修改颜色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/revitalizing/article/details/78570019
版权

主要记录下饼图和堆叠区域图的使用，方便工作中快速生成图表

代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
</head>
<body>
  <div id="pieChart" style="wide:250px;height:400px">
  </div>
  <div id="lineChart" style="wide:250px;height:400px">
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      pieChart();
      lineChart();
    });

    function pieChart() {
      var myChart = echarts.init(document.getElementById('pieChart'));
      var option = {
        //这里可以添加 color 属性，修改饼图的颜色
        //color: ['#24AB14', '#335EFF', '#FF8D33', 'blueviolet'],
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [{
              value: 335,
              name: '直接访问'
            },
            {
              value: 310,
              name: '邮件营销'
            },
            {
              value: 234,
              name: '联盟广告'
            },
            {
              value: 135,
              name: '视频广告'
            },
            {
              value: 1548,
              name: '搜索引擎'
            }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };


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

    function lineChart() {
      var myChart1 = echarts.init(document.getElementById('lineChart'));
      var option = {
        title: {
          text: '堆叠区域图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {
              normal: {}
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {
              normal: {}
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            areaStyle: {
              normal: {}
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            areaStyle: {
              normal: {}
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            areaStyle: {
              normal: {}
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表
      myChart1.setOption(option);
    }
  </script>
</body>
</html>

效果

这里写图片描述

注意

饼图中调色，如果没有设置，默认使用下面颜色列表：

['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

可以在 option 中增加 color 属性设置饼图的颜色，比如：

color: ['#24AB14', '#335EFF', '#FF8D33', 'blueviolet'],

参考资料

Echart官网

gary-liu
关注
专栏目录
echarts饼图pie应用之一--多个环形图叠加
欢迎大家交流前端开发技术、经验及各种知识沉淀
09-21 2185
echarts中饼图主要用于表现不同类目的数据在总和中的占比。每个弧度表示数据数量的比例。
echarts复合饼图，堆叠柱状图
12-08
echarts复合饼图（没有边线），堆叠柱状图，柱状图
Vue echarts（饼状图、堆叠柱状图）
weixin_47268011的博客
04-26 1011
1、定义div <template> <el-row style="margin-top: 50px"> <div id="firstMain" style="width: 600px;height:400px;margin-top:20px;"></div> </el-row> <el-row style="margin-top: 50px"> <div id="secondMa
echarts标记区域markArea
最新发布
m0_61075213的博客
07-29 302
【代码】echarts标记区域markArea。
echarts饼图label堆叠问题
RubyLinT的博客
12-17 761
设置最小扇区角度，minAngle（最小的扇区角度（0 ~ 360）
echart饼图
weixin_41916639的博客
05-25 724
var myChart = echarts.init(document.getElementById('ipstop5')); var option = { tooltip : { trigger: 'item', formatter: "{b} : {c}次 ({d}%)" //悬浮信息格式 }, legend: { ...
echarts饼图
chen2745213271的博客
02-25 2039
如何在页面制作一个简易的饼图，首先找到一个制作饼图的插件，这里我使用的是echarts ，然后使用插件添加各种参数就可以很快制作一个简易的饼图，下面将简单的制作一个饼图演示。 首先肯定是先引入插件，关于插件可以到echarts官网下载。 然后在HTML里写一个容器并初始化，这个容器需要一开始赋予高度和宽度，使得初始化的时候将数据带入节点，除非后面在script里使用高度与宽度的参数。如下图 然后使用组件配置饼图的各种数据，使用一个对象将组件包括在一起最后将这个配置好的对象添加初始化好的容器中，下面
Echarts笔记——饼图（2）南丁格尔饼图
XIATWO
03-30 1227
Echarts笔记——饼图（2）南丁格尔饼图 1. 设置为南丁格尔饼图（圆心角相同）：roseType:'area'。 2.表示是否支持多个选中（'single'表示单选，或者'multiple'表示多选）：selectedMode <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
前端数据可视化—Echart——笔记整理
Thaley的博客
02-03 3301
前端数据可视化Echart——笔记整理（黑马课程）
pyecharts——绘制柱形图折线图
fyd4777leo的博客
12-08 1486
自2013年6月百度 EFE ( Excellent FrontEnd ）数据可视化团队研发的 ECharts 1.0发布到 GitHub 网站以来， ECharts 一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python 作为数据分析领域最受欢迎的语言，也加入 ECharts 的使用行列，并研发出方便 Python 开发者使用的数据可视化工具，由此便诞生了 pyecharts 库。
echarts 多饼图
10-23
Echarts 多饼图
ECharts 学习笔计——折线图
08-12
通过深入学习ECharts的文档和API，你可以掌握更多高级功能，如堆叠折线图、面积图、动态数据加载、自定义组件等，进一步提升你的数据可视化能力。ECharts不仅是一个工具，也是一个强大的平台，能够帮助你构建出专业...
echarts 饼图
热门推荐
weixin_43931625的博客
10-31 2万+
echarts 饼图
Echarts之饼图
m0_55173487的博客
07-29 3488
Echarts之饼图 环形图大小、图例、延长线等配置
echart饼状图
成长笔记
07-26 594
<template> <div> <div id="leftCenter" style="width:6.75rem;height:4.375rem;"></div> </div> </template> <script> const echarts = require("echarts"); export default { data() { return {}; }, mounted() .
echart——饼图
ass_ace
11-21 319
exportconstechartoption1=(yAxisdata:string[],seriesData:string[])=>{ return{ grid:{ top:"0%", left:"3%", right:"4%", bottom:"2%", containLabel:true }, xAxis:[ { type:...
echarts——饼图
xiaoququ的博客
12-17 1781
需求：三级分类的饼图 1、一级分类通过左右箭头切换的方式展现 2、二级分类通过饼图的形式展现(默认不显示每块区域name，高亮时候显示name) 3、三级分类通过鼠标放在饼图某一区域上时以文字的形式呈现(自定义提示文字) <template> <div class="w100 h100"> <!-- 左右切换箭头及一级分类名字 --> <div> <div class="title">{{ pieData[in.
echart日历饼图
06-27
ECharts是一个强大的JavaScript数据可视化库，它提供了丰富的图表类型，包括日历饼图（Calendar Pie Chart）。日历饼图可以清晰地展示数据在时间维度上的分布情况，尤其适合展示周期性的数据变化。 要创建一个ECharts的日历饼图，首先你需要在HTML中引入ECharts库，然后使用JavaScript配置一个日历组件和饼图的数据。以下是一个简单的步骤： 1. **设置环境**：在HTML中引入ECharts库和CSS样式文件： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@latest/theme/macarons.min.css"> ``` 2. **初始化图表**： ```javascript let myChart = echarts.init(document.getElementById('calendar-pie-chart')); ``` 3. **定义数据**： ```javascript const data = { year: '2023', month: 'January', value: [30, 20, 15, 10, 15, 20, 18, 22, 25, 28, 30, 32] }; ``` 4. **配置日历饼图**： ```javascript const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [{ type: 'calendar', calendarType: 'month', // 或者 'year', 'custom' 自定义 data: data, radius: '55%', center: ['50%', '60%'], roseType: 'area', itemStyle: { normal: { color: function (params) { return 'hsl(0, 100%, ' + params.value * 10 + '%)'; } } } }] }; ``` 5. **设置并显示图表**： ```javascript myChart.setOption(option); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值