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文 ...
随机推荐
- WPF 解决 Skia 因为找不到字体而绘制不出中文字符
在 WPF 使用 Skia 做渲染工具,如果绘制的中文都是方块,也许是字体的问题.字体的问题是 Skia 没有找到字体,本文告诉大家如何修复 在 Skia 使用特定字体,可以使用 SkiaSharp ...
- Java中使用try代码块自动关闭各种流（IO流……）
推荐写在 try 的括号中 /** 方式一.方式二是等价的 * <li>推荐使用方式一</li> * @since 2023/5/18 0018 * @author CC ** ...
- 免费的visual studio智能代码插件——CodeGeeX
CodeGeeX是什么?什么是CodeGeeX? CodeGeeX是一款基于大模型的智能编程助手,它可以实现代码的生成与补全,自动为代码添加注释,不同编程语言的代码间实现互译,针对技术和代码问题的智能 ...
- windows10 64 解决 exec:"gcc" executable file not found in %PATH%报错问题
1.下载编译好的包 https://sourceforge.net/projects/mingw-w64/files/mingw-w64/ 这里我选择64位的 2.解压完之后,配置环境变量. 解压完到 ...
- 怎么样给Oracle数据库中的表添加列？
首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...
- Java中Future 用来做异步任务返回
我们在开发中会有这种场景,我们要调用远程服务的一个方法,并且拿到返回值去使用.笔者最近项目中出现了一个ANR,具体是调用了远程服务,发生异常一直没有返回值,然后导致ANR. 怎么解决呢?找了一圈,发现 ...
- TeamViewer 9 和 10 即将停用 尝试切换到 Splashtop
TeamViewer 9 和 TeamViewer 10 将于2021 年 6 月 1 日到期停用.当这两个版本的 TeamViewer 到期时,用户将无法再远程访问其计算机和设备. 这意味着要继续使 ...
- unity 新input system 鼠标点在ui上检测的两种方法
哪种有用就用哪种.EventSystem.current.IsPointerOverGameObject()有可能不好使. using System.Collections.Generic; usin ...
- c++ lambda学习举例
#include <iostream> #include<vector> #include<algorithm> #include<cmath> #in ...
- kubernetes的三种探针startupprobe,ReadinessProbe,LivenessProbe记录
kubernetes的三种探针 startupprobe: k8s1.16版本后新加的探测方式,用于判断容器内应用程序是否已经启动,如果配置了startuprobe,就会先禁用其他的探测,直到它成功为 ...