echarts
关注
分享
扫一扫
图形图表工具库
杀猪刀-墨林
为了不懒，所以写点东西
展开
-
Echart柱形图条纹设置
Echart柱形图条纹设置。原创 2023-07-14 16:26:46 · 1828 阅读 · 0 评论 -
Echarts词云图字体颜色根据设置色系顺序展示
根据自定义设置色系的词云图，词云字体颜色根据你设置的色系数组顺序进行展示。原创 2022-03-10 11:42:11 · 6009 阅读 · 2 评论 -
Echarts类目轴改为时间轴控制坐标间距
Echarts类目轴改为时间轴控制坐标间距问题分析：类目轴数据较少时，左右间距过多，整体看起来不协调，这时想更改类目轴左右间距，但是发现无法自定义成自己想要的间距，只有默认间距和贴边两种方式，所以将类目轴换成时间轴取巧以下是第二张图的配置option = { title: { text: '动态数据 + 时间坐标轴' }, color: ['#03B5CF', '#C4C134'], xAxis: { type: 'tim原创 2021-06-08 13:54:07 · 1287 阅读 · 0 评论 -
Echarts柱状图采用不同色
效果图：echarts配置：option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130],原创 2020-12-24 14:12:36 · 162 阅读 · 0 评论 -
echarts双Y轴网格曲线（共用刻度线）
option = { tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '搜索引擎'], bottom:0, icon:'roundRect', }, grid: { left: '3%', right: '4%', bottom: '8%', ...原创 2020-12-15 15:19:42 · 1539 阅读 · 1 评论 -
echarts实现柱状图、折线图提示信息自动轮播
实现这个柱状图、折线图的头部信息自动轮播，一开始看到ui设计的这个图的时候，我第一个想到的就是echarts官网示例中的markpoint提示内容，因为这个实在看起来不像是tooltip的悬浮提示，但是markpoint是最大值、最小值与平均值，所以我把markpoint的选项pass掉了，采用label信息的定时来回显示，做完效果之后呢，官网label配置项没有对下方那个倒三角型的修饰，所以最后我又考虑起来了markpoint，是否真的只能设置最大值、最小值、平均值，还能不能设置其他值呢，网上查看了好..原创 2020-12-13 19:17:59 · 3821 阅读 · 0 评论 -
圆环环绕进度条
老规矩，echarts图形，先上效果图，后上代码UI设计的图形中有一个进度条，是环绕形式的，当时想的是这个深度可能是绘制图形时加的3D深度绘制，可是后来发现并不是。只用画一个二维的间断圆环，然后利用css3的3d场景，进行X轴偏转，就可以实现了。代码附上:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport"原创 2020-12-02 17:18:57 · 389 阅读 · 0 评论 -
echarts好看的折线图配置
Echarts效果图：(主要仿制layui官网的echarts图形示例)代码配置，直接放入echarts示例官网，即可查看效果option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { width: 3, color: '#019688', },原创 2020-11-27 15:30:40 · 3321 阅读 · 1 评论 -
echarts水球图内阴影与胶囊图制作
先贴代码后贴图，最后讲解水球图：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水泡图</title> <style> .原创 2020-10-30 08:47:44 · 2348 阅读 · 0 评论 -
数组根据内部对象特定字段进行分割成多个数组
引文:后台把所有数据对象信息放到一个数组中传回，已知数组内部对象有一个字段相同，根据这个相同字段进行数组拆分。 var TabArr = [ { id: 1, txt: '1' }, { id: 1, txt: '132' }, { id: 2, txt: '112' }, { id...原创 2020-04-15 11:47:06 · 2230 阅读 · 0 评论 -
Echarts时间轴补刻度
有时候我们Echarts图表可能数据不够，只有一两条时，呈现效果不是很好,比如这样所以我们需要填充数据，让图表就算没有数据看起来横轴也可以接受// 补时间轴数值，数据不足10条时，补足10条,把时间轴刻度往后推 var addTime,y,m,d,Xdata=['2020/04/12'],Ydata=[1500]; if(Xdata.length<...原创 2020-04-12 11:44:14 · 2314 阅读 · 0 评论 -
echarts折柱混合，倒序对立展示
app.title = '折柱混合';option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } ...原创 2019-03-28 14:36:27 · 578 阅读 · 0 评论 -
echarts横坐标歪斜
有些时候，横坐标字段太长，而且数据较多时，可以采用这种横坐标倾斜展示xAxis: {type: 'category',axisLabel: {interval:'auto',rotate:50},data: []},// rotate就是偏移量...原创 2019-04-26 19:19:00 · 3141 阅读 · 0 评论 -
ECharts x轴设置成时间间隔,实现X轴字段间距不一致
option = { title: { text: '动态数据 + 时间坐标轴' }, tooltip: { trigger: 'axis', formatter: function (params) { params = params[0]; var date = new D...原创 2019-04-28 10:17:32 · 12981 阅读 · 0 评论 -
echarts3在Y轴上做基准线
应用场景，有时候需要使用echarts在图形上绘制一条平行于Y轴的平行线用来分割x轴的前后数据，在查文档时遇到一些问题，特意在这里记录下来，也是分享一下所得其中基准线使用配置项markline，而markline配置项是在options的series数组对象数据中，配置项层级结构是这样的options=>series=>markLine: {itemStyle: ...原创 2019-04-24 11:37:03 · 4234 阅读 · 0 评论 -
Echarts图形曲线Y轴名称居中，且设置距离Y轴位置
app.title = '折柱混合';option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}...原创 2019-08-30 10:05:19 · 7016 阅读 · 0 评论 -
echartx图形x轴换行
option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, grid: { left: '3%...原创 2019-09-12 11:52:34 · 745 阅读 · 0 评论 -
Echarts图例控制y轴显示隐藏
<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"></head><body style="height: 100%; margin: 0"> <div id="container" style="heig...原创 2020-08-11 15:39:35 · 4432 阅读 · 1 评论 -
单页面快速渲染多个echarts图形，适用于大屏显示
建议：前端本地设置多个变量，暂存多个图形echarts的option配置对象，例如:option1: { grid: { // 图标距离容器的边距 left: '10%', right: '5%', bottom: '20%', top: '10%', scontainLabel: true }...原创 2019-03-27 21:26:08 · 2225 阅读 · 0 评论