![](https://img-blog.csdnimg.cn/20210322095458651.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
图表库
文章平均质量分 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 · 2145 阅读 · 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 · 1108 阅读 · 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 · 5261 阅读 · 3 评论 -
JFreeChart 中文乱码问题解决
问题描述:问题分析:1、当前编码不支持中文。 /** * 生成饼图(返回JFreeChart) * * @param chartTitle 图表标题 * @param legendNameList 图例名称列表 * @param dataList 数据列表 * @return */ public static JFreeChart createPieChart(String cha.原创 2021-07-13 16:53:06 · 2276 阅读 · 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 · 9034 阅读 · 9 评论 -
ECharts 使用toolbox.feature.saveAsImage 添加下载图片功能
无下载图片功能效果图:实现代码:var option = { title: { text: '第一个 ECharts 实例' }, toolbox: { feature: { saveAsImage: {}//图片下载功能 }, }, tooltip: {}, legend: { data:['销量'] }, xAxis: { dat原创 2020-07-09 10:42:22 · 3931 阅读 · 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 · 3071 阅读 · 0 评论 -
ECharts 使用series.lineStyle.type设置虚线(两种)
原始效果图:实现代码:var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '原创 2020-07-10 17:37:19 · 29185 阅读 · 2 评论 -
ECharts 使用series.showAllSymbol显示所有数据点
原始效果图:实现代码:var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {原创 2020-07-14 10:44:01 · 5583 阅读 · 0 评论 -
ECharts 使用series.showSymbol隐藏所有数据点
原始效果图:实现代码:var option = { title: { text: '第一个 ECharts 实例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: .原创 2020-07-17 19:55:05 · 8444 阅读 · 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 · 9159 阅读 · 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 · 7631 阅读 · 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 · 11625 阅读 · 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 · 813 阅读 · 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 · 6677 阅读 · 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 · 37958 阅读 · 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 · 41683 阅读 · 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 · 33630 阅读 · 4 评论 -
ECharts 区域缩放组件使用详解
dataZoom说明:区域缩放组件,用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。1 toolbox.show说明:是否显示区域缩放组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。默认值:true。参数类型:boolean。可选值: (1)true,显示区域缩放组件。 (2)false,隐藏组区域缩放件。2 dataZoom.type说明:组件类型。默认值:'slider'。参...原创 2020-08-17 19:31:21 · 2219 阅读 · 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 · 3477 阅读 · 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 · 17361 阅读 · 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 · 3894 阅读 · 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 · 23189 阅读 · 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 · 5507 阅读 · 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 · 8278 阅读 · 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 · 11403 阅读 · 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 · 13785 阅读 · 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 · 1951 阅读 · 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 · 875 阅读 · 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 · 2561 阅读 · 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 · 2653 阅读 · 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 · 1426 阅读 · 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 · 1513 阅读 · 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 · 38877 阅读 · 1 评论 -
ECharts 图例(legend)分两行显示并且初始化设置不选中状态,需要点击两次不选中状态的图例才能变成选中状态问题解决
问题描述:图例(legend)分两行显示并且初始化设置不选中状态,需要点击两次不选中状态的图例才能变成选中状态问题分析:1、经过多次测试才发现,有多组图例的情况下,只有第一组图例初始化时设置不选中状态,才不会出现只有点击两次不选中状态的图例才会变成选中状态情况。解决办法:(1)将设置不选中状态的那组图例放于legend数组的第一个,具体步骤请查看以下博客。ECharts 图例(legend)分两行显示并且初始化设置不选中状态(2)将多组图例变成一组图例。...原创 2021-01-09 12:47:07 · 1596 阅读 · 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 · 2165 阅读 · 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 · 7571 阅读 · 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 · 19466 阅读 · 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 · 31500 阅读 · 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 · 10285 阅读 · 0 评论