Echarts 常用各类图表模板配置

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

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

图标模板目录

Echarts 常用各类图表模板配置
一、折线图 + 柱状图
二、环形图
三、k 线图
四、折线图
五、横向柱状图
六、3D 柱状图

一、折线图 + 柱状图

option = {color: ['rgba(50, 229, 255, 1)', 'rgba(250, 207, 18, 1)'],tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},grid: {top: '30%',left: '10%',right: '10%',bottom: '20%',containLabel: true},xAxis: [{type: 'category',data: ['2017', '2018', '2019', '2020', '2021', '2022'],axisLine: {show: true,lineStyle: {color: '#7B68EE'}},splitLine: {show: false,lineStyle: {color: 'blue',width: 1,type: 'solid'}},axisPointer: {type: 'shadow'},}],yAxis: [{type: 'value',name: `                {legend|}  {value|柱状图}`,axisLabel: {color: '#FF6347'},axisLine: {show: true,lineStyle: {color: '#FFDEAD'}},splitLine: {show: false,lineStyle: {color: 'blue',width: 1,type: 'solid'}},nameTextStyle: {rich: {legend: {width: 12,height: 4,backgroundColor: '#EE82EE'},value: {color: '#FF8C00'}}}},{type: 'value',name: `{legend|}  {value|折线图}           `,axisLabel: {color: '#00BFFF'},axisLine: {show: true,lineStyle: {color: '#66CDAA'}},splitLine: {lineStyle: {color: '#E6E6FA',width: 1,type: 'solid'}},nameTextStyle: {rich: {legend: {width: 12,height: 4,backgroundColor: '#87CEFA'},value: {color: '#CD853F'}}}}],series: [{name: '柱状图',type: 'bar',data: [80, 120, 110, 130, 120, 110],barWidth: 14, // 柱状图的宽度itemStyle: {borderRadius: 8,color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: 'rgba(50, 229, 255, 1)' },{ offset: 1, color: 'rgba(50, 229, 255, 0.8)' }])}},{name: '折线图',type: 'line',yAxisIndex: 1,data: [80, 120, 110, 130, 120, 110],itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: 'rgba(183, 75, 238)'},{offset: 1,color: 'rgba(250, 207, 18)'}])},areaStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: 'rgba(183, 75, 238,0.2)'},{offset: 1,color: 'rgba(250, 207, 18)'}])},showSymbol: false}]
};

二、环形图

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

五、横向柱状图

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

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

六、3D 柱状图

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

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

echarts 折线图 + 柱状图相关推荐

ECharts 折线图柱状图混合双Y轴利用ajax动态获取后台数据
效果图示如下后台代码用的框架是SSM 双Y轴根据后台数据展示大致代码如下: List<Map> findqushi(@Param("date_id") String ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...
Echarts折线图和地图（个人总结）
Echarts折线图和地图(个人总结) Echarts折线图和地图 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
Echarts折线图案例
问题:重置echarts折线图时,总会出现多个数据的拐点,与实际渲染的数据拐点不符合. 解决: 在实例化echarts后 clear 上一次的图. myEcharts.clear() 案例 impor ...
d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...

echarts 折线图 + 柱状图