利用Echarts实现图例显示百分比效果
目录
- 效果图
- 主要代码
- 全部代码
echarts图例显示百分比
效果图
主要代码
全部代码
secondChart = () => {
//datas的数据是接口拿到的数据
const { texture } = this.state;
const datas = texture;
var option = {
color: [
"#3774e5",
"#4ea9d9",
"#b041ef",
"#a25fea",
"#1b50b3",
"#8a40ef",
"#5a8be8",
],
legend: {
selectedMode: false, // 取消图例上的点击事件
type: "plain",
icon: "square",
orient: "vertical",
left: "55%",
top: "0",
align: "left",
itemGap: 4,
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
symbolKeepAspect: false,
textStyle: {
rich: {
name: {
verticalAlign: "right",
align: "left",
width: 75,
fontSize: 12,
},
value: {
align: "left",
width: 35,
fontSize: 12,
},
count: {
align: "left",
width: 20,
fontSize: 12,
},
upRate: {
align: "left",
fontSize: 12,
color: "#54bef9",
},
downRate: {
align: "left",
fontSize: 12,
color: "#54bef9",
},
},
color: "#54bef9",
},
data: datas.map((item) => item.name),
formatter: function (name) {
var total = 0;
var tarValue;
for (var i = 0; i < datas.length; i++) {
total += datas[i].value;
if (name === datas[i].name) {
tarValue = datas[i].value;
}
}
var p = Math.round((tarValue / total) * 100);
return "{name| " + name + "} " + "{value| " + p + "%}";
},
},
series: [
{
name: "数量",
type: "pie",
hoverAnimation: false,
clockwise: false,
radius: ["45%", "70%"],
center: ["30%", "50%"],
data: datas,
itemStyle: {
normal: {
borderColor: "#021336",
borderWidth: 4,
},
},
label: {
normal: {
show: false,
position: "center",
formatter: "{text|{c}}\n{b}",
rich: {
text: {
align: "center",
verticalAlign: "middle",
padding: 8,
fontSize: 12,
},
value: {
align: "center",
verticalAlign: "middle",
fontSize: 12,
},
},
},
emphasis: {
show: true,
textStyle: {
fontSize: "12",
},
},
},
labelLine: {
normal: {
show: true,
},
},
},
],
};
this.Chart_init2 = echarts.init(this.Chart_dom2.current);
this.Chart_init2.setOption(option);
};
到此这篇关于利用Echarts实现图例显示百分比效果的文章就介绍到这了,更多相关Echarts图例显示百分比内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
echarts如何实现带百分比的横向柱状图
目录 实例代码 效果图 代码解析 总结 实例代码 var data = [220, 182, 191, 234, 290, 120, 65, 444]; var barWidth = 20; var maxNum = 0; for (var i = 0; i < data.length; i++) { if (data[i] > maxNum) { maxNum = data[i]; } } option = { backgroundColor: 'black', grid: { top: '
-
Javascript Echarts空气质量地图效果详解
我们要先把空气质量数据和地图数据结合起来: 地图数据有name这个属性 我们的不同城市空气质量也有name这个属性,这两个属性是一样的,都叫name,所以我们可以把他们关联起来: var airData = [ { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 }, { name: '重庆', value: 66 }, { name: '河北', value: 147 },
-
利用Echarts如何实现多段圆环图
目录 前言 原型示例 完美实现 效果图 总结 前言 开发某款app时,产品给的UI原型图上有个分为三段的圆环图,本来以为使用echarts应该会很好做的,主要考虑移动端echarts的兼容问题就好了,但是实际操作后发现还是没法做到完美的还原,最终找了很多类似的案例,加上自己的一些调整实现了. 原型示例 第一眼看的时候以为用echarts里的饼图做一些修改可以达到,但是效果都不太好,首先是每段弧段的边缘有一个圆角的处理,其次是弧度的宽度是不同,灰色最细,红色次之,绿色是最宽的. 第二时间又看到了一
-
JavaScript数据可视化:ECharts制作地图
目录 概述 注意事项 一. 使用方式 二. 实现步骤 初步实现代码 效果: geo常见配置 添加上面配置之后的效果图: 显示某一个省份(河南省) 效果 不同区域显示不同颜色 地图和散点图的结合 总结 概述 地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气.尤其是在大屏展示中更是扮演着必不可缺的角色 注意事项 一. 使用方式 1.百度地图API(高德地图API) 需要申请百度API 2.矢量地图 需要准备矢量地图数据 二. 实现步骤 1.ECharts最基本的代码结构 引
-
echarts实现折线图的拖拽效果
使用echarts实现折线图的拖拽,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./echarts.js"></script> </head> <body> <div id="main" style="width: 600p
-
利用Echarts实现图例显示百分比效果
目录 效果图 主要代码 全部代码 echarts图例显示百分比 效果图 主要代码 全部代码 secondChart = () => { //datas的数据是接口拿到的数据 const { texture } = this.state; const datas = texture; var option = { color: [ "#3774e5", "#4ea9d9", "#b041ef", "#a25fea", &q
-
Python利用matplotlib生成图片背景及图例透明的效果
前言 最近工作中遇到一个需求,在使用matplotlib生成图片,想要背景透明,而且图例部分也显示透明效果,通过查找相关资料找到了大概的设置方法,特此记录,方便自己或者有需要的朋友们参考学习. 示例代码 # coding=utf-8 # matplotlib背景透明示例图 # python 3.5 import numpy as np import matplotlib.pyplot as plt from pylab import mpl import scipy.stats as stats
-
vue2 利用echarts 单独绘制省份的步骤
第一步:先引入所需的第三方模块 import echarts from "echarts"; // 引入所需要的echarts模块 import "echarts/map/js/province/shanxi"; // 引入省份的js文件 import "echarts/map/json/province/shanxi.json"; // 引入省份的json文件 第二步:开始绘制 // 基于准备好的dom,初始化echarts实例 var myC
-
如何利用echarts画雷达图和折柱混合
目录 导语 雷达图 效果 折柱图 效果 总结 导语 通常在根据设计图写echarts的时候,很多效果是官方实例里没有的,我在代码里加上了一些常用的效果,并做了注释. 雷达图 var option = { radar: [{ //数据名称 indicator: [{ text: 'AIS未登记' }, { text: '巡逻发现' }, { text: '群众举报' }, { text: '其他' }, { text: '雷达发现' } ], center: ['50%', '50%'], rad
-
如何利用Echarts根据经纬度给地图画点画线
目录 1.相关介绍 2.地图绘制 3.根据经纬度进行标点画线 总结 1.相关介绍 在使用Echar进行绘制地图对象,首先我们需要地图的json文件,Echarts依赖默认会引入这个相关的json文件,所以后续使用这个地图可以之间引用这里的json文件进行绘制Echarts地图. 但是在后续重新构建项目的时候发现了一个问题,Echarts的依赖包下没有这个map文件了,我心想这不人麻了,这json文件我要去哪找.后面再对比版本之后发现,在5.0版本之前Echarts会默认将这些Map的json文件
-
Flask框架利用Echarts实现绘制图形
目录 实现绘制饼状图 实现绘制柱状图 实现绘制折线图 echarts是百度推出的一款开源的基于JavaScript的可视化图表库,该开发库目前发展非常不错,且支持各类图形的绘制可定制程度高,Echarts绘图库同样可以与Flask结合,前台使用echart绘图库进行图形的生成与展示,后台则是Flask通过render_template方法返回一串JSON数据集,前台收到后将其应用到绘图库上,实现动态展示Web服务日志状态功能. 如下演示案例中,将分别展示运用该绘图库如何前后端交互绘制(饼状图,柱
-
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法.分享给大家供大家参考,具体如下: 这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上. 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大
-
jsp利用echarts实现报表统计的实例
echarts用来做数据报表的一个展示效果了,这里我们来给各位介绍一个java/jsp利用echarts实现报表统计的例子,例子非常的简单只是把数据调出来给echarts即可了. 开始上代码. 首先是tag,这个东西,大学之后,几乎不怎么用了,没想到现在又用到了. <%@ tag pageEncoding="UTF-8" isELIgnored="false" body-content="empty"%> <%--自定义div容
-
Android利用悬浮按钮实现翻页效果
今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在AndroidManifest.xml中添加权限: <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> 然后,我们要对WindowManager,WindowManager.Layout
-
基于 flexible 的 Vue 组件：Toast -- 显示框效果
基于flexible.js 的 Vue 组件 前言: 目前手头的移动端Vue项目是用手淘的 lib-flexible作适配的,并用px2rem 来自动转换成rem.关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible. 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷. 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中 常用的.简单的 组件