Echarts图表之带提示框的饼图

最新推荐文章于 2024-06-07 14:01:00 发布
最新推荐文章于 2024-06-07 14:01:00 发布
阅读量909 收藏 2
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gly_technology/article/details/122559366
版权

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                backgroundColor: 'rgba(1,202,217,.2)',
                color: ['#1AFEFD', '#2E7DFF', '#FECB89', '#055EA2', '#0AD5FE'],
                grid: {
                    left: 20,
                    right: 20,
                    top: 0,
                    bottom: 20
                },
                // 提示框
                tooltip: {
                    // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                    trigger: 'item',
                    formatter: '{a}<br/>{b}:{c}({d}%)'
                },
                // 图表标题
                title: {
                    x: 'center',
                    show: true,
                    text: '销售量组成',
                    textStyle: {
                        color: '#fff'
                    }
                },
                // 图例
                legend: {
                    top: 20,
                    left: 10,
                    orient: 'vertical',
                    textStyle: {
                        fontSize: 16,
                        color: 'rgba(255,255,255)'
                    },
                    data: ['套餐A', '套餐B', '套餐C', '套餐D', '套餐E'],
                    //circle圆形,rect长方形,roundRect圆角长方形,triangle三角形,diamond菱形,pin不规则圆,arrow不规则三角形,none没有图标
                    icon: 'rect'
                },
                series: [{
                    name: '销售量组成',
                    // 类型：饼图
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [{
                            value: 45,
                            name: '套餐A'
                        },
                        {
                            value: 45,
                            name: '套餐B'
                        },
                        {
                            value: 30,
                            name: '套餐C'
                        },
                        {
                            value: 20,
                            name: '套餐D'
                        },
                        {
                            value: 220,
                            name: '套餐E'
                        }
                    ]
                }]
            };
            myChart.setOption(option);
        </script>
    </body>
</html>

gly_technology
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts，每日一图——(平滑)折线面积图
four_three的博客
12-09 4581
昨天跟大家讲了平滑折线图，今天跟大家讲一下折线面积图。有平滑折线面积图和基础折线面积图两种效果： 其实二者只有一点点差别，接下来我们看下代码： //data.js mydata( { "data":[1,2,3,4,5], "zhi":[12,13,14,20,16] } ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na
echarts 应用示例 线图 柱状图饼图 地图 异步数据加载
12-09
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，包括线图、柱状图、饼图以及地图等，适用于各种数据展示需求。本示例集主要展示了 ECharts 如何在实际应用中实现这些图表，并且...
Echarts环形图添加指示文字
weixin_42064877的博客
10-11 1920
【代码】Echarts环形图添加指示文字。
echars中的饼图提示字根据饼图颜色一样
最新发布
weixin_49084077的博客
06-07 561
startAngle: 280,//旋转的角度。name: '饼图2',name: '饼图',
Echarts设置环形图中心文字
发渐稀的博客
11-21 9049
通过这种方式确实可以达到效果，但是，label的主要目的是用来配置环形图提示信息的，而不是用来配置环形图中心文字的，而且如果使用这种方式，那么，环形图中心文字和环形图各部分的提示信息是不能同时存在的，如果强行把label写成数组形式，把提示信息加上去，那么，提示信息就会和中心文字一起在环形图中心层叠显示。但是，如果环形图位置不是居中的，也就是相比于默认值而言发生了偏移，那么，graphic中也需要手动的进行配置才行；那么，使用该定位其位置也设置为center，中心文字和环形图都居中，效果很好。
Echarts面积折线图如何实现？
澜岚伊人的博客
10-29 1万+
摘要：项目开发中有个面积折线图的界面 实现：直接上代码吧，哈哈，简单明了 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;echarts面积折线图&lt;/title&gt; &lt;style&gt;
echarts多个饼图环图中间固定文字,鼠标移入后出现相应的提示
ju__ju的博客
01-10 1万+
项目中遇到这种需求,有两种解决方法, 一.在echarts的配置手册中搜graphic属性,并配置,可以在圈内显示固定的文字 graphic: [ { //环形图中间添加文字 type: 'text', //通过不同top值可以设置上下显示 left: 'center', top...
在Vue 中实现循环渲染多个相同echarts图表
10-15
// 这里配置你的图表选项，包括颜色、标题、提示框、图例、极坐标系、角度轴、半径轴等 // 使用传递的data和title参数 // ... }; }, }, ``` `createOption`是一个辅助方法，用于生成Echarts的配置选项。这个...
echarts图表存储
04-10
例如，你可以设置`series`来定义数据系列，`xAxis`和`yAxis`来定义坐标轴，`legend`来控制图例显示，以及`tooltip`来定制提示框内容。保存图表配置可以为后期的图表复用或更新提供便利。 2. **数据存储**：ECharts...
1小时快速学会Echarts图表
06-30
在这个"1小时快速学会Echarts图表"的课程中，你将学习如何在实际工作中高效地运用Echarts来呈现数据。 首先，我们要了解Echarts的基本结构和配置项。Echarts通过JSON格式的配置项来定制图表，包括数据、图表类型、...
JavaScript使用百度ECharts插件绘制饼图操作示例
10-15
使用ec.init()方法，传入之前创建的容器DOM元素，来创建一个新的ECharts图表实例： ```javascript var myChart = ec.init(document.getElementById('main')); ``` 为了绘制饼图，我们需要定义一个option对象，包含...
曲线图折线图面积图
03-25
曲线图，面积图，折线图模板，提供用法以及数据展示等信息。
echarts实现圆形进度条，圆环中心显示进度
圆圆的 JavaScript 博客
11-03 8800
用echarts画圆形进度条，圆环中心显示进度
Echarts饼图环形图中间添加文字、title、graphic
蓝胖子的博客
02-15 2512
Echarts饼图环形图中间添加文字、title、graphic
R语言数据可视化_科学统计图表绘制2.2——平滑面积图
qq_36711935的博客
08-20 1142
R语言数据可视化_科学统计图表绘制2.2——平滑面积图 接上回~ 客户提供了一组描述密度函数的数据，包括x轴的位置和该位置对应的概率密度，并要求绘制面积图。可问题是数据中的点的数量并不充足，如果按照正常的方式绘制，曲线、面积不平滑，非常难看。而经过平滑的图像就相对有观赏性一些。 平滑面积图如何绘制？ 首先，数据是标准正态分布下区间[-5,5]内的20个等距点 x = seq(from=-5,to=5,length.out = 20) y = dnorm(x,mean = 0,sd=1) data =
Qt/C++编写可视化大屏电子看板系统15-曲线面积图
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
08-13 2358
一、前言 曲线面积图其实就是在曲线图上增加了颜色填充，单纯的曲线可能就只有线条以及数据点，面积图则需要从坐标轴的左下角和右下角联合曲线形成完整的封闭区域路径，然后对这个路径进行颜色填充，为了更美观的效果，一般这个填充颜色采用曲线条颜色的透明度值150绘制，看起来更具科幻感，面积图和折线图类似都可以重叠绘制多条，每条都可以是不同的颜色，如果数据点不较少的情况下，还可以开启是否绘制数据值，开启的话直接居中区域绘制对应的数据值。 为了更方便的使用二次开发改造的QCustomPlot，重命名了一些数据类型，比如曲线
antv曲线面积图使用小总结
weixin_46032200的博客
05-21 965
1、下载安装 npm install @antv/g2 --save 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install @antv/g2 --save 2、页面使用 <template> <div id="container3" style="width:100%;height:93%"></div> </template&gt
C# Winform 使用GDI+ 绘制实时曲线图、面积曲线图
热门推荐
YouyoMei的博客
04-23 2万+
问题来源 最近为了公司界面的美化，想将原来的单纯曲线图绘制变成曲线面积图。功能需求 1.通过一系列的点，绘制出曲线面积图或者曲线图。 2.能够实现实时界面刷新。 3.曲线图里面的很多属性都能自定义。需求分析 功能实现分析 1.GDI+绘图可以实现点与点之间的连接，而且能够实现路径（Graphi...
echarts 曲线面积对比图
inprivacy的博客
10-17 1621
<div echarts [options]="option" class="echarts" id="main"></div> option = { /!*title: { text: '数据对比', // subtext: '纯属虚构' },*!/ ...
echarts年龄饼图_ECharts中饼图的操作
06-02
在 ECharts 中绘制饼图需要以下步骤： 1. 引入 ECharts 的 JavaScript 文件。 2. 在 HTML 中创建一个用于显示图表的 DOM 元素。 3. 使用 ECharts 的 API 初始化图表。 4. 配置图表的基本信息，如标题、提示框等。 5. 配置饼图的数据和样式，如饼图的半径、颜色、标签等。 下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>ECharts 饼图示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 配置基本信息 chart.setOption({ title: { text: '年龄分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['20岁以下', '20-30岁', '30-40岁', '40岁以上'] }, series: [{ name: '年龄分布', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 20, name: '20岁以下'}, {value: 35, name: '20-30岁'}, {value: 25, name: '30-40岁'}, {value: 20, name: '40岁以上'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }); </script> </body> </html> ``` 在上述代码中，我们使用 ECharts 的 `init` 方法初始化了一个图表，并使用 `setOption` 方法配置了饼图的基本信息和数据。其中，`series` 属性中的 `type` 属性指定了图表类型为饼图，`data` 属性指定了饼图的数据，`itemStyle` 属性指定了饼图的样式。 需要注意的是，上述代码中的 ECharts 版本为 5.1.2，如果你使用的是其他版本的 ECharts，可能会有些许差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值