echarts 各种特效图
饼图标签展示数值
配置项：
option = {
title: {
text: '项目时间分布',
left: '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%'],
label: {
normal: {
formatter: "{per|{d}%} \n{hr|}\n {b|{b}}",
align: "right",
rich: {
hr: {
borderColor: "#aaa",
width: "100%",
borderWidth: 1,
height: 0
},
b: {
fontSize: 14,
color: "#000",
lineHeight: 20
},
per: {
color: "#000",
fontSize: 16,
lineHeight: 20
}
}
}
},
data: [
{value: 5, name: '智能化项目'},
{value: 12, name: '智能化集成'},
{value: 169, name: '空调控制系统'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
运行效果：
坐标轴显示箭头，刻度标签超出显示省略号
配置项：
const alarmRankOptions = {
color: ['rgba(184,114,58,1)'], //['#A96932'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '0',
containLabel: true,
borderColor: 'red'
},
xAxis: [
{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
},
// nameLocation:'end',//坐标轴名称显示位置。
// x轴的字体样式
axisLabel: {
show: true,
textStyle: {
color: '#E6EFFF'
},
interval: 0 //横轴信息全部显示
},
// x轴的颜色和宽度
axisLine: {
lineStyle: {
color: '#3C6581',
width: 1 //这里是坐标轴的宽度,可以去掉
}
}
}
],
yAxis: [
{
minInterval: 1,
type: 'value',
name: '数量：个',
nameTextStyle: {
color: '#E6EFFF'
},
axisLabel: {
show: true,
textStyle: {
color: '#E6EFFF'
}
},
// y轴的颜色和宽度
axisLine: {
show: true,
lineStyle: {
color: '#3C6581',
width: 1 //这里是坐标轴的宽度
},
symbol: ['none', 'arrow'],
symbolSize: [6, 10] //第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。
},
//背景网格线
splitLine: {
show: false,
lineStyle: {
// 使用深浅的间隔色
color: '#ccc',
type: 'dashed',
shadowBlur: 10
}
}
}
],
series: [
{
name: '待解决报警数',
type: 'bar',
barWidth: '20',
label: {
normal: {
show: true,
position: 'top' //'inside'
}
},
data: [10, 52, 200, 334, 390, 330, 220, 40]
}
]
};
export { alarmRankOptions };
运行结果：
环形图标签显示值
配置项：
export const PieOption = {
grid: {
left: 50,
right: 0,
top: 0,
containLabel: true,
zlevel: 99999
},
tooltip: {
trigger: "item",
formatter: "{b}: {c}次 ({d}%)"
},
color: ["#ee6e6d", "#f19469", "#e7bf5f", "#74b8dd", "#67cb82"],
title: {
text: 0,
textStyle: {
color: "#3A3A3A",
fontSize: 30,
fontWeight: "normal"
},
subtext: "",
subtextStyle: {
color: "#3A3A3A",
fontSize: 14
},
x: "center",
y: "49%"
// y: "46%"
},
series: [
{
name: "",
type: "pie",
// minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
avoidLabelOverlap: true, //是否启用防止标签重叠策略
// radius: ["37%", "55%"],
radius: ["32%", "46%"],
center: ["50%", "54%"],
// center: ["50%", "60%"],
// radius: ["50%", "50%"],
itemStyle: {
borderColor: "rgba(255,255,255,1)",
borderWidth: 8
},
label: {
normal: {
formatter: "{per|{d}%} \n{hr|}\n {b|{b}}",
align: "right",
rich: {
hr: {
borderColor: "#aaa",
width: "100%",
borderWidth: 1,
height: 0
},
b: {
fontSize: 14,
color: "#000",
lineHeight: 20
},
per: {
color: "#000",
fontSize: 16,
lineHeight: 20
}
}
}
},
labelLine: {},
data: [
{
value: 150,
name: "一级告警"
// itemStyle: {
// color: '#ee6e6d'
// }
},
{
value: 50,
name: "二级告警"
// itemStyle: {
// color: '#f19469'
// }
},
{
value: 300,
name: "三级告警"
// itemStyle: {
// color: '#e7bf5f'
// }
},
{
value: 500,
name: "四级告警"
// itemStyle: {
// color: '#74b8dd'
// }
},
{
value: 350,
name: "五级告警"
// itemStyle: {
// color: '#67cb82'
// }
}
]
}
]
};
运行结果：
柱状图水平滚动条
配置项：
export const BarOption = {
color: ["#F1726b", "#f58e6b", "#e7c156", "#73b9dd", "#65ca84"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
dataZoom: ConstDataZoom,
legend: {
data: ["一级", "二级", "三级", "四级", "五级"],
itemWidth: 9,
itemHeight: 9,
itemGap: 20,
right: 45
},
grid: {
left: 50,
right: 0,
top: 30,
containLabel: true
},
xAxis: [
{
type: "category",
silent: false,
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
axisTick: {
alignWithLabel: true
},
splitLine: {
show: true,
lineStyle: {
// 网格颜色
color: ["#E5EFF5"]
}
},
axisLine: {
lineStyle: {
color: "#ccc"
}
},
axisLabel: {
color: "#3A3A3A",
interval: "auto"
},
splitArea: {
show: false
}
}
],
yAxis: [
{
type: "value",
name: "次数",
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
nameTextStyle: {
color: "#838383"
},
splitLine: {
show: true,
lineStyle: {
// 网格颜色
color: ["#E5EFF5"]
}
},
axisLine: {
lineStyle: {
color: "#E5EFF5"
}
},
axisLabel: {
color: "#3A3A3A",
interval: 0
}
}
],
series: [
{
name: "一级",
type: "bar",
data: [320, 332, 301, 334, 390, 320, 332, 301, 334, 390]
},
{
name: "二级",
type: "bar",
data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290]
},
{
name: "三级",
type: "bar",
data: [150, 232, 201, 154, 190, 150, 232, 201, 154, 190]
},
{
name: "四级",
type: "bar",
data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290]
},
{
name: "五级",
barGap: 0,
type: "bar",
data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290]
}
]
};
运行结果：
tooltip.formatter保留默认图标
//tooltip start
option.tooltip.formatter = function(param) {
// console.log("param :>> ", param);
let str = param.length > 0 ? `${param[0].name}<br/>` : "";
param.forEach((item, idx) => {
str +=
renderSpan(item.color) +
item.seriesName +
"：" +
item.value +
units[idx] +
"<br/>";
});
return str;
};
function renderSpan(color) {
return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
}
//tooltip end
.............
echarts 各种特效图的更多相关文章
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
- Echarts中太阳图（Sunburst）的实例
Echarts中太阳图(Sunburst)的实例 目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下: var mapData = [ ...
- echarts实现环形图
前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...
- 用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- echarts BAR堆叠图显示百分比
在使用echarts的堆叠图时,我们鼠标悬停的浮窗里的信息可能并不是我们想要的信息,这个时候需要我们配置一下,因为堆叠图的trigger的类型是坐标轴触发的,数据是多组数据,所以我们需要遍历一下数据, ...
- echarts绘制甘特图
在setoption之后添加这段代码: window.addEventListener('resize', function () { myChart.resize(); }); 图表就能随着 ...
- Echarts 页面多图自适应的解决办法 （转）
项目中用到了echarts的多图表的 问题,如果设置了 window.onresize = option.chart.resize() 只能控制 某个图表的 自适应,如果要是页面上的图表都要自适应. ...
- echarts版本折线图
1.效果如下: 绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...
- Echarts line折线图使用(vue)
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
- ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
随机推荐
- [FE] uViewUI u-navbar 曲线解决 uni onNavigationBarButtonTap 的限制与失效
uni 自带的 navigation bar 对于普通的导航需求是够用的,也允许 onNavigationBarButtonTap 加点击事件. 但是会出现异常Bug,表现为在内部页面一番操作后,再返 ...
- [Go] 浅谈 gorm 执行 AutoMigrate 的两种时机
第一种就是直接在操作 model 的逻辑中,执行 db.AutoMigrate,模型没有更新时不会有 schema 相关的 sql 被执行. 第二种就是单独定义一个属于 main 包的 go 文件,专 ...
- ES_CCS/R(三)：跨集群复制 Cross-cluster replication（CCR)
跨集群复制(CCR)功能支持将远程集群中的索引复制到本地集群. 可以在一些常见的生产用例中使用此功能: 灾难恢复(DR)/高可用性(HA):如果主群集发生故障,则进行灾难恢复. 辅助群集可以用作热备份 ...
- Git基本操作命令大全
一.全局配置命令 ## 配置级别: –local(默认,高级优先):只影响本地仓库 –global(中优先级):只影响所有当前用户的git仓库 –system(低优先级):影响到全系统的git仓库 # ...
- 【问题解决】java.lang.NoSuchMethodError错误
问题现象 近期本人负责的一个SpringBoot模块出现了java.lang.NoSuchMethodError报错,问题情况如下: A类提供了setJumpType(String type),B类调 ...
- 用 C 语言开发一门编程语言 — Q-表达式
目录 文章目录 目录 前文列表 Q-表达式 读取并存储输入 实现 Q-Expression 语法解析器 读取 Q-Expression 实现 Q-Expression 的函数 Head & T ...
- 因为我的一次疏忽而带来的golang1.23新特性
距离golang 1.23发布还有两个月不到,按照惯例很快要进入1.23的功能冻结期了.在冻结期间不会再添加新功能,已经添加的功能不出大的意外一般也不会被移除.这正好可以让我们提前尝鲜这些即将到来的新 ...
- 在线电子表格编辑器 Luckysheet
下载地址 不知道地址正不正经,我先用着,网上找的地址,不知道是不是可信任的,疑似官网的两个地址都打不开, https://github.com/dream-num/Luckysheet zip包 h ...
- C# 调用 qrencode的动态库
自己根据qrencode的源码导了一个dll动态库,见: https://www.cnblogs.com/HelloQLQ/p/16364825.html 自己希望能用C#语言调用以下. 首先构建需要 ...
- SpringMVC在处理Ajax请求后返回void导致前台Ajax回调函数不执行
问题简述 在一次SpringMVC项目中,前台通过Ajax请求,准备修改数据库中的数据.因为Ajax请求只是让后台更改数据,所以Controller方法根本不需要返回给前台任何数据,所以我们将Cont ...