图表库
关注
分享
扫一扫
文章平均质量分 56
Echarts、Highcharts、JFreeChart
旭东怪
这个作者很懒，什么都没留下…
展开
-
JFreeChart 生成饼图（标准饼图、3D饼图）
1 Maven依赖 <!-- Hutool工具包 --> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.6.2</version> </dependency原创 2021-11-09 18:54:40 · 2426 阅读 · 0 评论 -
Highcharts 实现自定义导出图片
1 实现代码<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="../jquery-3.2.1.js"></scr原创 2020-10-18 21:56:30 · 1244 阅读 · 0 评论 -
JFreeChart 生成5种图表（饼图、柱状图、堆叠柱状图、折线图、散点图）
1 Maven依赖 <!-- Hutool工具包 --> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.6.2</version> </d原创 2021-07-14 10:28:32 · 5820 阅读 · 3 评论 -
JFreeChart 中文乱码问题解决
问题描述：问题分析：1、当前编码不支持中文。 /** * 生成饼图(返回JFreeChart) * * @param chartTitle 图表标题 * @param legendNameList 图例名称列表 * @param dataList 数据列表 * @return */ public static JFreeChart createPieChart(String cha.原创 2021-07-13 16:53:06 · 2635 阅读 · 2 评论 -
ECharts 使用toolbox.feature.magicType.type设置图表类型切换（柱形图和折线图相互切换）
原始效果图：实现代码：var option = { title: { text: '第一个 ECharts 实例' }, toolbox: { feature: { magicType: { type: ['line', 'bar'] },//图表类型切换 }, }, tooltip: {}, legend: { data:['销量'] }, xAx原创 2020-07-09 10:58:54 · 9582 阅读 · 9 评论 -
ECharts 使用toolbox.feature.saveAsImage 添加下载图片功能
无下载图片功能效果图：实现代码：var option = { title: { text: '第一个 ECharts 实例' }, toolbox: { feature: { saveAsImage: {}//图片下载功能 }, }, tooltip: {}, legend: { data:['销量'] }, xAxis: { dat原创 2020-07-09 10:42:22 · 4194 阅读 · 3 评论 -
ECharts 使用toolbox.feature.saveAsImage.type设置图片导出格式
实现思路：toolbox.feature.saveAsImage.type作用：选择保存的图片格式。默认：'png' 。参数：支持'png'和'jpeg'。实现代码：var option = { title: { text: '第一个 ECharts 实例' }, toolbox: { feature: { saveAsImage: { type:'jpeg'}//图片下载功能 }, ...原创 2020-07-10 17:08:00 · 3207 阅读 · 0 评论 -
ECharts 使用series.lineStyle.type设置虚线（两种）
原始效果图：实现代码：var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '原创 2020-07-10 17:37:19 · 31416 阅读 · 2 评论 -
ECharts 使用series.showAllSymbol显示所有数据点
原始效果图：实现代码：var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {原创 2020-07-14 10:44:01 · 6067 阅读 · 0 评论 -
ECharts 使用series.showSymbol隐藏所有数据点
原始效果图：实现代码：var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: .原创 2020-07-17 19:55:05 · 8801 阅读 · 3 评论 -
ECharts 使用xAxis.boundaryGap使x轴两边不留空白
原始效果图：实现代码：var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], boundaryGap: false,//x轴两边不留空白 }, yA原创 2020-07-18 09:36:46 · 10058 阅读 · 1 评论 -
ECharts 使用series.smooth显示平滑曲线
1 使用详解series.smooth说明： 是否平滑曲线显示。如果是boolean类型，则表示是否开启平滑处理。如果是number类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为true时相当于设为0.5。默认值：false。参数类型：boolean，number。 （1）true，显示平滑曲线。 （2）false，不显示平滑曲线。 （3）0.5。2 原始效果图3 实现代码...原创 2020-07-18 10:12:03 · 8557 阅读 · 0 评论 -
ECharts toolbox.feature.saveAsImage（图片导出）使用详解
toolbox.feature.saveAsImage作用：使用 saveAsImage 工具可以把图表保存为图片。1、toolbox.feature.saveAsImage.type作用：选择保存的图片格式。默认：'png' 。参数： 'png' 、 'jpeg'。示例：ECharts toolbox.feature.saveAsImage设置图片导出格式2、toolbox.feature.saveAsImage.name作用：设置保存的文件的名称。默认：使用...原创 2020-07-10 17:24:35 · 12214 阅读 · 1 评论 -
旭东的ECharts宝典工具栏系列使用详解
toolbox工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。1 toolbox.show说明：是否显示工具栏。默认值：true。参数类型：boolean。可选值： （1）true，显示工具栏。 （2）false，隐藏工具栏。2 toolbox.feature说明：各工具配置项。2.1 toolbox.feature.saveAsImage说明：保存为图片。ECharts toolbox.featur...原创 2020-07-18 11:08:04 · 936 阅读 · 0 评论 -
ECharts 折线图(line)系列使用详解
1 Series说明：系列列表。1.1 series.lineStyle说明：线条样式。1.1.1 series.lineStyle.color说明：线条颜色。默认值："#000"1.1.2series.lineStyle.width说明：线条宽度。默认值：2。1.1.3series.lineStyle.type说明：线条类型。默认值：'solid'。可选值： (1) 'solid'，实线。 (2) 'dotted'...原创 2020-07-14 11:02:54 · 7152 阅读 · 0 评论 -
ECharts x坐标轴(xAxis)使用详解
xAxis说明：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置offset属性防止同个位置多个 x 轴的重叠。1 xAxis.show说明：是否显示 x 轴。默认值：true。参数类型：boolean。可选值： （1）true，显示x轴。 （2）false，隐藏x轴。1.2 xAxis.data说明：设置 x 轴上的值。默认值：[]。参数类型：Array...原创 2020-07-18 09:49:46 · 38911 阅读 · 0 评论 -
ECharts y坐标轴(yAxis)使用详解
yAxis说明：直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置offset属性防止同个位置多个 Y 轴的重叠。1 yAxis.id说明：组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。默认：无。参数类型：string。2 yAxis.show说明：是否显示 y 轴。默认：true。参数类型：boolean。可选值： （1）true，显示y轴...原创 2020-08-05 20:58:58 · 42677 阅读 · 4 评论 -
ECharts 使用yAxis.axisLabel.formatter自定义Y轴刻度标签--两种方法（字符串模板和函数模板）
1 使用详解yAxis.axisLabel.formatter说明：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。默认：'{value} '。参数类型：string，Function可选值： （1）'{value} 任意字符'，使用字符串模板，模板变量为刻度默认标签 {value}。 （2）function (value, index) {return value;}，使用函数模板，函数参数分别为刻度数值（类目），刻度的索引。2 原始效果...原创 2020-08-05 20:58:08 · 35254 阅读 · 4 评论 -
ECharts 区域缩放组件使用详解
dataZoom说明：区域缩放组件，用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。1 toolbox.show说明：是否显示区域缩放组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。默认值：true。参数类型：boolean。可选值： （1）true，显示区域缩放组件。 （2）false，隐藏组区域缩放件。2 dataZoom.type说明：组件类型。默认值：'slider'。参...原创 2020-08-17 19:31:21 · 2361 阅读 · 0 评论 -
ECharts 使用dataZoom.type给x坐标轴加滚动条
1 使用详解dataZoom.type说明：组件类型。默认值：'slider'。参数类型：string。可选值： （1）'slider'，滑动条型数据区域缩放组件，有单独的滑动条，用户在滑动条上进行缩放或漫游。 （2）'inside'，内置型数据区域缩放组件，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。2 原始效果图3 实现代码var option = { title: {...原创 2020-08-17 19:27:28 · 3770 阅读 · 3 评论 -
ECharts 图表标题(title)系列使用详解
title说明：图表标题1 title.show说明：是否显示标题组件。默认值：true。可选值： (1) true，显示标题。 (2) false，隐藏标题。2 title.text说明：主标题文本，支持使用\n换行。默认值：''3 title.textStyle说明：主标题样式。3.1 title.textStyle.color说明：主标题文字字体的颜色。默认值：'#333'。3.2 title.textSt...原创 2020-07-17 22:11:57 · 17889 阅读 · 1 评论 -
ECharts x坐标轴(xAxis)系列设置
aAxis:{ show:true,//false data:['1月','2月','3月'], boundaryGap:false,// true | ['30%', '20%']，x轴两边是否留白,true留白，false不留白}原创 2020-09-27 19:38:52 · 4126 阅读 · 0 评论 -
ECharts 图表标题(title)系列设置
title:{ show:true,//false text:"图表标题",//主标题文本 textStyle:{ color:#ccc,//red，字体颜色 fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格 fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细 fo.原创 2020-09-28 19:36:57 · 25859 阅读 · 4 评论 -
ECharts 使用series.areaStyle.color实现3种阴影效果（不透明阴影，透明阴影，线性渐变阴影）
1 使用详解（1）series.areaStyle.color说明：填充的颜色。默认值：’#000'。参数类型：Color。 （1）'#000'，十六进制。 （2）'rgb(128, 128, 128)'，RGB。 （3）'rgba(128, 128, 128, 0.5)'，RGB，同时支持透明度。 （4）'red'。（2）series.areaStyle.color（线性渐变）// 线性渐变，前四个参数分别是...原创 2020-09-29 21:00:18 · 5733 阅读 · 2 评论 -
ECharts 使用yAxis.splitLine.show不显示y坐标轴分隔线
1 使用详解yAxis.splitLine.show说明：是否显示分隔线。默认数值轴显示，类目轴不显示。默认：true。参数类型：boolean。可选值： （1）true，显示分割线。 （2）false，不显示分割线。2 原始效果图3实现代码（不显示y坐标轴分隔线）<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style...原创 2020-09-30 21:30:34 · 8734 阅读 · 0 评论 -
ECharts 使用xAxis.axisLabel. color设置x坐标轴刻度标签颜色
1 使用详解xAxis.axisLabel. color说明：刻度标签文字的颜色，支持回调函数。默认值：'#333'。参数类型：Color，Function。可选值： （1）'red','#ccc'。 （2）color: function (value, index) { return value >= 0 ? 'green' : 'red'; }。2 原始效果图3 实现代码（设置x坐标轴刻度标签颜色）<body>...原创 2020-10-04 11:16:25 · 11876 阅读 · 0 评论 -
ECharts 使用xAxis.axisLine.lineStyle.color设置x坐标轴轴线颜色
1 使用详解xAxis.axisLine.lineStyle.color说明：刻度标签文字的颜色，支持回调函数。默认值：'#333'。参数类型：Color。可选值：请参考以下博客。ECharts color属性设置（RGB，透明度，线性渐变，径向渐变，纹理填充）2 原始效果图3 实现代码（设置x坐标轴轴线颜色）<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main".原创 2020-10-04 11:52:20 · 14334 阅读 · 0 评论 -
Highcharts exporting属性实现图表导出为图片、PDF
实现代码：<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="http://cdn.hcharts.cn/highch原创 2020-07-10 10:27:59 · 2116 阅读 · 0 评论 -
Highcharts Cannot read property ‘parts/Globals.js‘ of undefined问题解决
问题描述：Cannot read property 'parts/Globals.js' of undefined使用exporting.js和highcharts.js版本不一致。问题解决：导入最新版本的highcharts.js和exporting.js<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><script src="http://cdn.hchart原创 2020-07-10 14:24:47 · 918 阅读 · 2 评论 -
Highcharts 将默认文字更改为中文
原始效果图：实现代码：<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="http://cdn.hcharts原创 2020-07-10 14:39:46 · 2724 阅读 · 0 评论 -
Highcharts 柱形图显示数值并设置数值格式
原始效果图：实现代码：<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="http://cdn.hcharts原创 2020-07-10 15:21:11 · 2797 阅读 · 0 评论 -
Highcharts 实现重叠柱状图
1 使用详解plotOptions.column.grouping说明：true代表对柱体进行分组并单独显示，false代表不分组则重叠在一起，默认为true。2 原始效果图3 实现代码<body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script src="https://apps.bdimg.c..原创 2020-10-23 20:43:28 · 1533 阅读 · 2 评论 -
Highcharts 柱状图设置柱体偏移量使柱体紧靠在一起
1 使用详解（1）plotOptions.column.grouping说明：true代表对柱体进行分组并单独显示，false代表不分组则重叠在一起，默认为true。（2）series.pointPlacement说明：设置柱体偏移量。参数>0柱体向右偏移，反之柱体向左偏移。当两个柱体的偏移量相同时，柱体会重叠在一起。2 原始效果图3 实现代码<body> <div id="container" style="width: 550px; hei..原创 2020-10-30 22:36:59 · 1628 阅读 · 0 评论 -
Echarts 更改图例(legend)颜色
1 原始效果图2 实现代码<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.原创 2021-01-17 21:14:22 · 39154 阅读 · 1 评论 -
ECharts 图例(legend)分两行显示并且初始化设置不选中状态，需要点击两次不选中状态的图例才能变成选中状态问题解决
问题描述：图例(legend)分两行显示并且初始化设置不选中状态，需要点击两次不选中状态的图例才能变成选中状态问题分析：1、经过多次测试才发现，有多组图例的情况下，只有第一组图例初始化时设置不选中状态，才不会出现只有点击两次不选中状态的图例才会变成选中状态情况。解决办法：（1）将设置不选中状态的那组图例放于legend数组的第一个，具体步骤请查看以下博客。ECharts 图例（legend）分两行显示并且初始化设置不选中状态（2）将多组图例变成一组图例。...原创 2021-01-09 12:47:07 · 1802 阅读 · 1 评论 -
ECharts 图例（legend）分两行显示并且初始化设置不选中状态
1 原始效果图2 实现代码<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.原创 2021-01-09 12:36:45 · 2355 阅读 · 2 评论 -
ECharts 使用legend.selected设置初始化时控制图例（legend）选中和不选中状态
1 原始效果图2 实现代码<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echart..原创 2021-01-08 20:19:11 · 7876 阅读 · 0 评论 -
ECharts 图例（legend）分两行显示
1 原始效果图2 实现代码<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.原创 2021-01-08 19:55:48 · 20284 阅读 · 3 评论 -
ECharts position属性设置（外部、内部、自定义位置）
1 外部1.1 top(外部正上方)可应用于：series.label.position。position:top1.2bottom(外部正下方)可应用于：series.label.position。position:bottom1.3 left(外部左边)可应用于：series.label.position。position:left1.4 right(外部右边)可应用于：series.label.position。position:right..原创 2021-01-04 21:13:41 · 33469 阅读 · 0 评论 -
ECharts 使用series.itemStyle.color给柱状图设置柱体不同颜色
1 原始效果图2 实现代码<body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.原创 2020-12-31 19:50:41 · 10501 阅读 · 0 评论