Echarts
关注
分享
扫一扫
文章平均质量分 54
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
徊忆羽菲
追求健康的人
展开
-
学习如何使用echarts设置series的自定义参数方法
学习如何使用echarts设置series的自定义参数方法原创 2024-08-22 11:35:31 · 603 阅读 · 0 评论 -
学习设置echarts 折线图使用相关参数的方法整理
学习设置echarts 折线图使用相关参数的方法整理,折线图堆叠设置为不堆叠的方法原创 2024-08-21 17:27:30 · 346 阅读 · 0 评论 -
学习使用echarts因xAxis值过多，可以滚动的柱状图解决方案
学习使用echats因xAxis值过多展示不全，实现可以滚动的柱状图解决方案原创 2024-04-01 16:55:16 · 1066 阅读 · 0 评论 -
echart柱状图series属性设置label显示字体大小及字体样式
echart柱状图series属性设置label显示字体大小及字体样式原创 2024-03-22 17:55:09 · 4579 阅读 · 0 评论 -
学习调整echarts中toolbox位置toolBox工具栏属性
学习调整echarts中toolbox位置toolBox工具栏属性原创 2024-01-03 14:21:35 · 3243 阅读 · 0 评论 -
学习使用echarts实现双刻度echarts双Y轴，左右Y轴数据的方法
学习使用echats实现双刻度echarts双Y轴，左右Y轴数据的方法原创 2023-12-28 17:03:41 · 3595 阅读 · 0 评论 -
学习使用echarts图表中formatter的用法，格式化数字金额，控制x轴、y轴展示长度
学习使用echarts图表中formatter的用法，格式化数字金额，控制x轴、y轴展示长度原创 2023-12-20 17:15:00 · 3577 阅读 · 0 评论 -
echart饼状图文字大小位置颜色调整属性
echart饼状图文字大小位置颜色调整属性原创 2023-12-19 17:41:36 · 3089 阅读 · 0 评论 -
Echarts自定义样式实现3D柱状图-长方体-圆柱体，两种样式
Echarts自定义样式实现3D柱状图-长方体-圆柱体，两种样式原创 2023-12-18 18:16:20 · 2258 阅读 · 0 评论 -
Echarts实现3D柱状图
学习使用echats实现3D柱状图原创 2023-12-18 18:00:23 · 1569 阅读 · 0 评论 -
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙原创 2023-12-18 10:25:34 · 1547 阅读 · 0 评论 -
echarts 柱形图、折线图点击事件
echarts 柱形图、折线图点击事件。原创 2023-12-15 13:56:00 · 1528 阅读 · 0 评论 -
学习使用echarts漏斗图的参数配置和应用场景
在数据分析和可视化中，我们经常需要比较不同阶段的数据比例或流程的渐进筛选过程。漏斗图作为一种专门用于展示这种渐进筛选过程的图表类型，可以清晰地呈现不同阶段的数据，并帮助我们理解转化率、用户流失等关键指标。今天我们就来深入认识下漏斗图漏斗图（Funnel chart）是一种用于显示不同阶段的数据比例或流程的渐进筛选过程的图表。它的形状类似于一个倒置的漏斗，上面较宽，下面较窄。漏斗图通常用于展示销售、转化率、用户流失等数据的分析和比较。转载 2023-12-15 09:39:17 · 4232 阅读 · 0 评论 -
学习在echarts中优化数据视图dataView样式带表格样式，支持复制功能
学习在echarts中优化数据视图dataView样式带表格样式，支持复制功能原创 2023-11-07 17:43:53 · 1709 阅读 · 0 评论 -
学习使用JS实现Echarts的图表保存为图片功能：saveAsImage和getDataURL
实际项目开发过程中经常会有图表展示功能，同时为了满足用户需要，会附带着图表导出功能，主要形式就是保存为图片。在Echarts中本身就提供这种配置项，使用起来简单方便。但是，需求分析师要求必须有一个图表导出功能按钮，以便与整体样式风格相搭，对于这种要求。另外Echarts提供一个接口getDataURL,通过它可以导出图表图片，返回一个 base64 的 URL。//base64转blob。原创 2023-11-07 17:36:30 · 2619 阅读 · 1 评论 -
echarts图表截图保存成图片的两种方法saveAsImage
echarts图表截图保存成图片的两种方法saveAsImage原创 2023-11-07 17:31:38 · 2403 阅读 · 0 评论 -
echart文字大小和柱状图宽度自适应浏览器页面宽度，根据比例自适应文字大小和柱状图宽度
echart文字大小和柱状图宽度自适应浏览器页面宽度，根据比例自适应文字大小和柱状图宽度原创 2022-11-28 17:12:19 · 928 阅读 · 0 评论 -
echarts折线图设置tooltip属性实现鼠标滑过显示提示框内容
echarts折线图tooltip属性设置显示提示框内容效果图具体代码效果图具体代码<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%">&l原创 2021-08-06 16:32:08 · 4169 阅读 · 0 评论 -
echarts横向柱状图超出文字用省略号代替
echarts横向柱状图超出文字用省略号代替解决方案解决方案最终实现效果图关键性代码var maxLength = 25;//判断长度，超出使用...代替if (params && params.length > maxLength) { return params.substring(0, maxLength - 1) + '...';} else { return params;}全部代码 ，传入不同的id和数据，生成对应的横向柱状图// 横原创 2021-08-06 16:08:51 · 2290 阅读 · 0 评论 -
学习使用echarts设置xAxis轴和yAxis轴属性实现隐藏x轴，y轴，刻度线，网格
学习使用echarts设置xAxis轴和yAxis轴属性实现隐藏x轴，y轴，刻度线，网格未设置隐藏属性效果图设置隐藏后效果图关键性代码未设置隐藏属性效果图设置隐藏后效果图关键性代码xAxis: { type: 'value', boundaryGap: [0, 0.01], show: false, splitLine: { show: false,原创 2021-06-10 15:56:24 · 1834 阅读 · 0 评论 -
学习echarts设置series.itemStyle.color属性修改柱状图柱体不同颜色
学习echarts设置series.itemStyle.color属性修改柱状图柱体不同颜色原始效果图修改后效果图条形图设置不同颜色原始效果图修改后效果图关键代码 series: [ { name: '浏览次数', type: 'bar', data: [18203, 23489, 29034, 104970, 131744, 630230],原创 2021-06-08 15:14:35 · 2482 阅读 · 0 评论 -
echarts条形图横向显示数据且设置label属性Echarts条形图右侧显示数据
echarts条形图横向显示数据且设置label属性Echarts条形图顶端显示数据默认不显示数据修改label属性控制数据显示位置默认不显示数据<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="contain原创 2021-06-08 14:53:43 · 2798 阅读 · 0 评论 -
针对echarts饼图设置显示百分比、内容、字体及大小、位置
针对echarts饼图设置显示百分比、内容、字体及大小关键属性代码关键属性代码series: [ { name: '访问来源', type: 'pie', radius: '50%', label: { //饼图图形上的文本标签 normal: {原创 2021-05-14 18:30:10 · 4105 阅读 · 0 评论 -
学习使用echarts 去掉y轴分割线
学习使用echarts实现隐藏x轴，y轴，刻度线，网格修改yAxis的splitLine属性修改yAxis的splitLine属性修改前有分割线效果图 yAxis: { type: 'value', splitLine: { show: false, //去掉Y轴分割线 lineStyle: { color: "#57617B"原创 2021-05-14 09:35:01 · 1432 阅读 · 0 评论 -
学习使用echart设置visualMap各个属性的值
学习使用echart设置visualMap各个属性的值visualMap属性值介绍visualMap属性值介绍visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlph原创 2021-05-13 16:18:19 · 2049 阅读 · 0 评论 -
如何设置echart图例legend的位置
如何设置echart图例legend的位置常见legend位置底部居中底部右侧改变颜色改变间隔改变图例宽度高度边框颜色改变图例内边距常见legend位置底部居中legend: { orient: 'vertical', left: 'center', bottom:'bottom', textStyle: { color: "#FFFF00" },原创 2021-05-13 13:27:24 · 2751 阅读 · 0 评论 -
学习整理使用echarts自定义图表内文字series、坐标轴xAxis-yAxis、图例legend的字体颜色属性
学习整理使用echarts自定义图表内文字和坐标轴的字体颜色属性学习背景修改折线图坐标轴字体颜色修改图例字体颜色全部代码学习背景无背景颜色折线图，可以看清楚折线图的文字信息加上深颜色的背景之后，很多文字都看不清楚了修改折线图坐标轴字体颜色 xAxis: { type: 'category', boundaryGap: false, axisLabel: { textStyle: {原创 2021-05-13 11:19:55 · 1518 阅读 · 0 评论 -
如何设置echarts背景图的颜色
如何设置echarts背景图的颜色设置背景颜色属性折线图代码设置背景颜色属性var option={ backgroundColor: '#0A214A',}折线图代码<!-- THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-stack--><!DOCTYPE html><html style="height:原创 2021-05-13 10:47:53 · 2745 阅读 · 0 评论 -
echart饼状图设置legend属性隐藏标题
echart饼状图隐藏标题的属性设置左侧显示隐藏标题左侧显示option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left',原创 2021-03-12 16:51:23 · 5133 阅读 · 0 评论 -
echarts饼状图指定颜色
为每个饼图的扇面指定不同的颜色指定PIE饼图扇形每个扇面的颜指定PIE饼图扇形每个扇面的颜指定PIE饼图扇形每个扇面的颜色，修改每个data的ItemStyle对象的color属性即可。{value:235, name:‘买衣服’,itemStyle: {color: ‘#9966ff’}}最终完整代码和效果如图所示...原创 2021-03-11 15:05:14 · 912 阅读 · 0 评论 -
echarts柱形图x轴y轴的字体大小颜色调整
echarts柱形图x轴y轴的字体大小颜色调整y轴字体颜色设置y轴字体颜色设置 yAxis: { type: "category", data: this.right_top_name, axisTick: { show: false },原创 2021-03-10 14:58:38 · 12445 阅读 · 0 评论 -
使用echarts生成饼图时在数值后面加上单位显示
使用echarts生成饼图时在数值后面加上单位显示通过echarts制作饼图，鼠标移动到对应的扇形看到数值和百分比，怎样在数值后面加上单位呢，例如 任务分配：15.498155分钟(34.23%)，series.data 数组里只有value和name，这个“分钟”单位怎样加呢？tooltip有手动formatter的方法，你想变成啥样就啥样...原创 2021-02-26 10:42:51 · 7475 阅读 · 2 评论 -
echarts 柱状图 鼠标滑过显示 图标+数字每三位打千分号+单位
echarts 柱状图 鼠标悬浮显示 图标+数字每三位打千分号+单位千分号+单位全部代码示例代码千分号+单位1.图标：params[i].marker2.数字每三位打千分号：params[i].value.toLocaleString()3.加单位：如下 formatter:function(params) { var relVal = params[0].name; for (var i = 0, l = params.length原创 2021-02-25 19:25:49 · 2104 阅读 · 0 评论 -
如何使用echarts给y轴x轴添加单位
如何使用echarts给Y轴添加单位Y轴每个单位刻度加单位使用Y轴顶部设置单位Y轴每个单位刻度加单位使用 yAxis: [ { type: 'value', axisLabel: {formatter: '{value} 单'}, } ],Y轴顶部设置单位使用title来说明y轴的含义数据的就原创 2021-02-25 18:52:09 · 27522 阅读 · 0 评论 -
echarts中横坐标值显示不全(自动隐藏)解决方案
echarts中横坐标值显示不全自动隐藏解决方案echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。如下图，当横轴数据过多时，echarts会自动隔天显示如果我们想显示全，则需要在xAxis 属性加上axisLabel:{interval: 0} xAxis: [ { type: 'category', data: ['北京','上海1'原创 2021-02-09 17:03:37 · 6318 阅读 · 0 评论 -
echart柱状图统计带标题，滑过显示数量的效果代码
echart柱状图统计带标题，滑过显示数量的效果代码import * as echarts from 'echarts';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = { title: { text: '已报名门店行政分布', x: 'center'原创 2021-02-07 18:50:01 · 661 阅读 · 0 评论 -
修改使用echarts保存图片文件名称的方法
修改使用echarts保存图片文件名称的方法设置title属性设置title属性var chart2 = echarts.init(document.getElementById('chart2')); var chart2_option = { title: { text: 'qipa250', x: 'center' }, tooltip: {原创 2020-11-25 18:23:12 · 2593 阅读 · 0 评论 -
如何给echarts图表添加下载图表成图片的功能
如何给echarts图表添加下载图表成图片的功能1、先打开一个现成的图表效果图，注意图中圈出的地方，如图2、打开源码找到option，如下： var chart2 = echarts.init(document.getElementById('chart2')); var chart2_option = { tooltip: { trigger: 'axis' }, legend: {原创 2020-11-25 18:10:08 · 4164 阅读 · 0 评论 -
yii2框架切换tab页时，tab页中的echart变形问题解决方案
yii2框架切换tab页时，tab页中的echart变形问题解决方案在两个tab页中，分别展现了两个echart图表，同样的格式与写法，但只有在默认选中的tab页中的图表显示的是正常的，但进入另一个tab页中时，图表则产生了变形的问题，如下图所示：html代码 <div id="chart2" style="width: 100%; height:400px;"></...原创 2020-04-20 17:05:16 · 273 阅读 · 0 评论 -
echarts报错：echarts is not defined解决方案
echarts报错：echarts is not defined解决方案问题原因解决方案问题原因关于这个问题，调用网络上js，后来网上的js域名网址变了，找不到了，我就下载了一份到本地，我在引入js文件的时候，china.js没有问题了，但是echarts.js总是有问题，因为下载下来的jar包中有很多地方都有这个echarts所以我一直怀疑是这个问题。之前引入代码<script t...原创 2019-12-18 13:57:43 · 22985 阅读 · 1 评论