Echarts 常用各类图表模板配置

注意：这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；

以下代码都可以复制到 Echarts 官网，直接预览；

图标模板目录

Echarts 常用各类图表模板配置
一、环形图占比
二、环形图
三、k 线图
四、折线图
五、横向柱状图
六、折线图 + 柱状图
七、3D 柱状图
八、工程项目可视化
九、雷达图
十、象形柱图
十一、圆环动画

一、环形图占比

option = {backgroundColor: '#293042',title: {text: '88%',textStyle: {color: '#2A95F9',fontSize: 70},subtext: 'echarts占比',subtextStyle: {color: '#aaaaaa',fontSize: 30},itemGap: 20,left: 'center',top: '45%'},graphic: [{type: 'text',z: 100,left: 'center',top: '95%',style: {fill: '#fff',text: 'echarts',font: '18px Microsoft YaHei'}}],tooltip: {formatter: function (params) {return '<span style="color: blue;">echarts</span>';}},angleAxis: {max: 100,clockwise: false, // 逆时针// 隐藏刻度线show: false},radiusAxis: {type: 'category',show: true,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false}},polar: [{center: ['50%', '50%'],radius: '100%'}],series: [{type: 'gauge',min: 0,max: 60,splitNumber: 6,radius: '80%',startAngle: 0,endAngle: 360,axisLine: {lineStyle: {color: [[1, '#fff']],width: 0}},splitLine: {distance: -1,length: 25,lineStyle: {color: '#fff'}},axisTick: {distance: 10,length: 10,lineStyle: {color: 'fff'}},axisLabel: {show: false,distance: 10,fontSize: 25,color: '#fff'}},{type: 'bar',data: [88],showBackground: true,polarIndex: 0,backgroundStyle: {color: '#022546',borderWidth: 10},coordinateSystem: 'polar',roundCap: true,barWidth: 30,itemStyle: {normal: {opacity: 1,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#008BFF'},{offset: 1,color: '#0071FF'}]),shadowBlur: 5,shadowColor: '#2A95F9'}}}]
};

二、环形图

echarts 环形图：多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；

文字链接： https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501

三、k 线图

文章链接： https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501

四、折线图

echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接：https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501

五、横向柱状图

echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；

文章链接： https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501

六、折线图 + 柱状图

echarts 折线图 + 柱状图，左右两侧y轴线，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501

七、3D 柱状图

echarts 3D 柱状图，多个柱状图叠加，y轴内刻度线、隐藏横坐标，文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501

八、工程项目可视化

echarts 工程项目可视化，依据x轴时间坐标轴，叠加展示不同阶段的项目节点，y轴展示项目阶段名、文字颜色，网格线，坐标轴两侧留白、背景色等；

文章链接： https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501

九、雷达图

echarts 雷达图，自定义指示器名称，线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501

十、象形柱图

echarts 象形柱图，隐藏横纵坐标轴、网格线，坐标轴两侧留白，自定义矢量图，文字提示框、图形类型、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501

十一、圆环动画

echarts 圆环动画，饼图、环形图、图表动画、网格线，颜色渐变，图行矢量，文字提示框、图表层级、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501

echarts 环形图占比_环形图_仪表盘相关推荐

Java通过JFreeChart实现(饼图、柱状图、层叠柱状图、折线图、散点图、雷达图、环形图、仪表盘图、XY图)生成图片和下载
目录 1.添加依赖 2.工具类 2.1 JFreeChart工具类 2.2 GenerateChartUtil 图表生成工具类 2.3 GeneratePieChartUtil 饼图生成工具类 3. ...
python-matplotlib库绘制饼形图专题(从一般饼状图到内嵌环形图)
python-matplotlib库绘制饼形图专题(从一般饼状图到内嵌环形图) 文章目录 1.plt.pie() 2. 饼图基本 3. 饼状图进阶 4. 环形图 5. 内嵌环形图 ʚʕ̯• ...
echarts 折线图设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
Tableau画条形图、直方图、折线图、饼图、环形图、箱线图
Tableau画条形图.直方图.折线图.饼图.环形图.箱线图.雷达图一.条形图第一步,打开"豆瓣电影数据.xlsx": 第二步,画各国家电影评分直方图.选择"产地&q ...
双环形图表_excel两个环形图怎么画
excel两个环形图怎么画 Excel作为我们大众常用的办公软件之一,我们经常用它制作一些表格,可是一个商场,或者是一家商店,如何制作一个动态环形图呢?下面就让小编带你来看看吧! 具体如下: 1. 首 ...
SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
场景数据库中每个数据都有开始时间以及结束时间两个字段. 需要根据创建时间筛选出当天的四种类型的数据的平均执行时间. SpringBoot+Echarts实现请求后台数据显示饼状图: https:// ...
charts漏斗图表_漏斗图 | ECharts 数据可视化实验室
介绍漏斗图又叫倒三角图,漏斗图将数据呈现为几个阶段,每个阶段的数据都是整体的一部分,从一个阶段到另一个阶段数据自上而下逐渐下降,所有阶段的占比总计100%.与饼图一样,漏斗图呈现的也不是具体的数据, ...
echarts 横坐标显示一个月,excel折线图横坐标最后一个点选择数据选不上是什么原因？...
excel折线图横坐标最后一个点选择数据选不上是什么原因? 如果你说的是折线图横坐标选中的数据最后一个无法显示在横坐标上您可以尝试一下可以右击横坐标轴-设置坐标轴格式-选择大小与属性-对其方式-文 ...
ppt怎么做流程图饼图_环形流程图如何绘制？5分钟让你精通绘制技巧
环形流程图如何绘制?环形图是由两个及两个以上大小不一的饼图叠在一起,挖去中间所相交的部分所构成的图形.简单的饼图只能表现一个总数据所占的百分比,从多方面展示既不经济也不便利,而环形图恰恰相反,对于多方 ...

echarts 环形图占比_环形图_仪表盘