Echarts 常用各类图表模板配置

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

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

图标模板目录

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

一、折线图

option = {color: ['#32E5FF'],tooltip: {trigger: 'axis'},grid: {top: '30%',left: '10%',right: '10%',bottom: '20%',containLabel: true},xAxis: {type: 'category',data: ['2021-05','2021-06','2021-07','2021-08','2021-09','2021-10','2021-11'],axisLine: {show: true,lineStyle: {color: 'rgba(20, 35, 87, 1)'}},boundaryGap: true, // 坐标两侧是否留白axisTick: {show: false  // 是否显示刻度线}},yAxis: [{type: 'value',axisLabel: {color: '#FF44AA', // y 轴文字颜色formatter: '{value}  °C'},axisLine: {show: true,lineStyle: {color: '#E6E6FA'  // y 轴轴线颜色}},splitLine: {lineStyle: {color: '#FFDEAD', //grid 区域中的分隔线颜色width: 1,type: 'solid'}}},{type: 'value',name: '(摄氏度)',position: 'left',alignTicks: true,nameGap: 8,axisLine: {show: false  // 是否显示 y 轴轴线},axisLabel: {formatter: '{value}'},nameTextStyle: {padding: [0, 10, 8, 0] // 单位位置}}],series: [{type: 'line',name: '折线图',data: ['74', '99', '84', '75', '86', '74', '53'],label: {show: true,position: 'top',formatter: '{c} °C',color: '#00DDAA',fontSize: '10px',fontFamily: 'ArialMT'},itemStyle: {color: '#FFE4E1', // 数据颜色gradientColorNum: 1},areaStyle: {color: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0.1,color: 'rgba(6, 252, 254, 0.1) ' // 0% 处的颜色},{offset: 0.5,color: 'rgba(6, 252, 254, 0.5)' // 0% 处的颜色},{offset: 0.7,color: 'rgba(6, 252, 254, 0.3)' // 0% 处的颜色},{offset: 0.9,color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色}]}}}]
};

二、环形图

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/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 折线图相关推荐

d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
echarts折线图填充颜色
Echarts折线图填充颜色 let chart = echarts.init(document.getElementById('main'));chart.setOption({title: {te ...

echarts 折线图