Echarts 常用各类图表模板配置

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

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

---

---

一、雷达图

const datas = [100, 100, 100, 100, 100];
let i = -1;
option = {title: {text: '{a|96.34%}\n{b|Echarts}',x: 'center',y: 'center',textStyle: {fontSize: 12,rich: {a: {color: '#0066FF',fontSize: 18,align: 'center'},b: {color: '#00BBFF',fontSize: 12,height: 16,align: 'center'}}}},grid: {top: '10%'},tooltip: {show: false,trigger: 'item'},radar: {name: {// (圆外的标签)雷达图每个指示器名称的配置项。formatter: (a, b) => {i += 1;return '{a|' + datas[i] + '%}\n{b|' + a + '}';},textStyle: {fontSize: 15,color: '#000',rich: {a: {color: '#00BBFF',fontSize: 18,align: 'center'},b: {color: '#9999FF',fontSize: 12,height: 16,align: 'center'}}}},radius: '70%',splitArea: {areaStyle: {color: ['transparent']}},axisLine: {show: false,lineStyle: {color: '#000'}},splitLine: {show: false,lineStyle: {color: '#000'}},indicator: [{name: '专科1',max: 100},{name: '专科2',max: 100},{name: '专科3',max: 100},{name: '专科4',max: 100},{name: '专科5',max: 100}]},series: [{type: 'radar',name: '月度风险指数',symbol: 'circle',symbolSize: 1,areaStyle: {normal: {color: 'rgba(19, 173, 255, 0.1)'}},lineStyle: {normal: {color: '#ccc',width: 2,type: 'solid'}},data: [[100, 100, 100, 100, 100]]},{type: 'radar',name: '月度风险指数',symbol: 'circle',symbolSize: 1,itemStyle: {normal: {color: '#ccc',borderColor: '#ccc',borderWidth: 1}},areaStyle: {normal: {opacity: 1,color: 'rgba(19, 173, 255, 0.1)'}},lineStyle: {normal: {color: '#ccc',width: 2,type: 'solid'}},data: [[50, 50, 50, 50, 50]]},{type: 'radar',symbolSize: 8,symbol: 'circle',data: [{value: [80, 20, 80, 0, 50, 80, 60, 10],name: '服务类型占比',lineStyle: {normal: {color: '#5599FF',width: 2,type: 'solid'}},label: {show: true,formatter: function (params) {return params.value;}}}]}]
};

二、环形图

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/130289101?spm=1001.2014.3001.5501

十、环形占比图

echarts 环形占比图，环形图、仪表盘、刻度线，自定义提示框、颜色渐变、背景色等；

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

十一、圆环动画

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

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