echarts 通用配置记录

最新推荐文章于 2023-07-31 14:24:49 发布
最新推荐文章于 2023-07-31 14:24:49 发布
阅读量516 收藏
点赞数
分类专栏： echarts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/back_jing/article/details/117419055
版权

echarts通用配置,可以用官网例子测试（随时补充，欢迎留言，其他类型也是会加的）

柱状图or折线图

轴的设置

在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       axisTick: {//刻度轴线，就是指向文字的线，一般不需要
            show: false
        },
        axisLine: {//坐标轴轴线相关设置,一般调整颜色和时候显示,如果有刻度线，建议width大一点
            show: true,
            lineStyle: {
                color: '#DCE2E8',
                width: 3
            }
        },
        axisLabel: {//坐标轴刻度标签的相关设置。口头就是轴边上的文字，一般调整颜色
            textStyle: {
                color: '#556677'
            }
        },
        splitLine: {//坐标轴在 grid 区域中的分隔线,通俗点就是折线图或者柱状图背景上的刻度线，我们ui一般追求不显示或者显示成虚线
            show: true,
            lineStyle:{
                color: 'blue',
                type: "dashed",
                width: 2,//设置虚线宽度，同理其他东西亦可以设置，详细看官网配置项
            }
        },
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        axisTick: {//刻度轴线，就是指向文字的线，一般不需要
            show: false
        },
        axisLine: {//坐标轴轴线相关设置,一般调整颜色和时候显示,如果有刻度线，建议width大一点
            show: true,
            lineStyle: {
                color: '#DCE2E8',
                width: 3
            }
        },
        axisLabel: {//坐标轴刻度标签的相关设置。口头就是轴边上的文字，一般调整颜色
            textStyle: {
                color: '#556677'
            }
        },
        splitLine: {//坐标轴在 grid 区域中的分隔线,通俗点就是折线图或者柱状图背景上的刻度线，我们ui一般追求不显示或者显示成虚线
            // show: false，
            lineStyle:{
                color: 'red',
                type: "dashed",
                width: 2,//设置虚线宽度，同理其他东西亦可以设置，详细看官网配置项
            }
            
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        lineStyle:{
            color:"orange"
        },
        smooth: true
    }]
};

拐点设置和折线下的背景色（渐变）

这里是有版本问题的，用的时候是4.7及以上版本
option = {
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’],

},
yAxis: {
    type: 'value'
},
series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    symbolSize: 24,//设置拐点大小
    itemStyle: {
        color: "red",//线条颜色
        borderColor: "blue",//外边框颜色
        borderWidth: 12,//外边框大小
        //阴影相关配置
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2,
    },
    areaStyle: {//距离顶部的颜色变换
        normal: {//设置渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,202,149,0.3)'
                },
                {
                    offset: 1,
                    color: 'rgba(0,202,149,0)'
                }
            ], false),
            shadowColor: 'rgba(0,202,149, 0.9)',
            shadowBlur: 20
        }
    },
    smooth: true
}]

};

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // boundaryGap: false//时候左右两边贴着轴线
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        symbolSize: 60,//设置拐点大小
        itemStyle: {
            color: "red",
            borderColor: "red",
            borderWidth: 80,
            //阴影相关配置
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
        },
        areaStyle: {//距离顶部的颜色变换
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,202,149,0.3)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(0,202,149,0)'
                    }
                ], false),
                shadowColor: 'rgba(0,202,149, 0.9)',
                shadowBlur: 20
            }
        },
        smooth: true
    }]
};

双y轴

在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [{
        type: 'value'
    },//下标为0的y轴
    {
        type: 'value'
    }//下标为1的y轴
    ],
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',//折线图改为line
        smooth: true,
        yAxisIndex:0,//属于第几个y轴，详细看文档信息
    },
    {
        data: [182, 193, 190, 193, 229, 233, 232],
        type: 'bar',//折线图改为line
        smooth: true,
        yAxisIndex:1,
    }]
};

值顶部有数值显示

在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [{
        type: 'value'
    }],
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        smooth: true,
        label: {//显示顶部样式的字段
              normal: {
                show: true,
                fontSize: 14,
                // fontWeight: 'bold',
                color: '#909399',
                position: 'top',
                formatter: function(params) {
                    return params.value + ' 测试字段'
                },
              }
            }
    }]
};

超过一定阈值颜色变色，渐变色例子， 柱状图带圆角

在这里插入图片描述

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [{
        type: 'value'
    }],
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        smooth: true,
        itemStyle: {//修改样式的主要地方
              normal: {
                barBorderRadius: [6, 6, 0, 0],//设置圆角
                color: function(params) {//改变颜色的判断
                  return params.value > 1000
                    ?  new echarts.graphic.LinearGradient(//渐变色
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#FACC14' // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: '#ffffff' // 100% 处的颜色
                          }
                        ],
                        false
                      )
                      : new echarts.graphic.LinearGradient(//渐变色
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#1890ff' // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: '#ffffff' // 100% 处的颜色
                          }
                        ],
                        false
                      )
                }
              }
            },
        label: {//显示bar顶部样式的字段
              normal: {
                show: true,
                position: 'top'
              }
            }
    }]
};

反向柱状图（makeapie参考By姜***肖）

在这里插入图片描述

option = {
    backgroundColor: '#fff',
    grid: {
        top: '15%',
        right: '10%',
        left: '10%',
        bottom: '12%'
    },
    xAxis: [{
        type: 'category',
        color: '#59588D',
        data: ['2019Q1', '2019Q2', '2019Q3', '2019Q4'],
        axisLabel: {
            margin: 20,
            color: '#999',
            textStyle: {
                fontSize: 18
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)',
            }
        },
        axisTick: {
            show: false
        },
    }],
    yAxis: [{
        axisLabel: {
            formatter: '{value}%',
            color: '#999',
            textStyle: {
                fontSize: 18
            },
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(107,107,107,0.37)',
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
            }
        }
    }],
    series: [{
        type: 'bar',
        data: [40, 80, 20, -16],
        barWidth: '50px',
        itemStyle: {
            normal: {
                color: function(params){//展示正值的柱子，负数设为透明
                    let colorArr = params.value > 0?['#FF9A22', '#FFD56E']:['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: colorArr[0] // 0% 处的颜色
                    }, {
                        offset: 1,
                        color:  colorArr[1]// 100% 处的颜色
                    }], false)
                },
                barBorderRadius: [30,30,0,0]
            },
        },
        label: {
            normal: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333',
                position: 'top',
            }
        }
    },{
        type: 'bar',
        data: [40, 80, 20, -16],
        barWidth: '50px',
        barGap: '-100%',
        itemStyle: {
            normal: {
                color: function(params){//展示负值的柱子，正数设为透明
                    let colorArr = params.value > 0?['rgba(0,0,0,0)', 'rgba(0,0,0,0)']:['#FFD56E', '#FF9A22']
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: colorArr[1] // 0% 处的颜色
                    }, {
                        offset: 1,
                        color:  colorArr[0]// 100% 处的颜色
                    }], false)
                },
                barBorderRadius: [0,0,30,30]
            },
        }
    }
]
};

随鼠标移动标示线（渐变色）

在这里插入图片描述

option = {
    tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 1.8,
              type: 'solid',
              color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: 'red' // 0% 处的颜色
                          },
                          {
                            offset: 0.5,
                            color: 'blue' // 100% 处的颜色
                          },
                          {
                            offset: 1,
                            color: '#ffffff' // 100% 处的颜色
                          }
                        ],
                        false
                      )
            }
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [{
        type: 'value'
    }],
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        yAxisIndex:0,
        label: {//显示顶部样式的字段
              normal: {
                show: true,
              }
            }
    }]
};
竞~
关注
专栏目录
Echarts的通用配置
weixin_45615607的博客
12-01 715
1，title的配置 文字样式：textStyle 标题边框：borderWidth （边框） borderColor（颜色） borderRadius（圆角） 标题位置：top，left，right，bottom 2，tooltip配置 tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框 触发类型： trigger:'item'：只在柱内部才会显示弹窗 trigger:'axis'：在整个柱...
ECharts学习--通用配置
有一种陪伴叫做jay的博客
11-25 434
通用配置，就是指不管在什么类型的图标中，都可以使用的配置（饼状图、折线图、雷达图等等）。 （一）通用配置title （1）文字样式 可以通过textStyle来进行设置，这里有很多属性，例如：color（文字颜色）、fontStyle（字体风格）、fontWeight（字体粗细）等等。这里可以通过查看官方文档，结合自身需求来尽心配置。ECharts官方文档：https://echarts.apache.org/zh/option.html#title.textStyle （2）标题边框 borde
Echarts中的通用配置
H20220803的博客
08-04 260
Echarts中的title、tooltip、toolbox和legend
echarts 图表通用工厂配置类
liuyuqin1991的专栏
12-11 1006
背景 当项目中所用图表过多，且图表种类也很多（例如大数据展示系统等），每一个图表都进行一套初始化配置会配置的很繁琐，代码缺少可复用性，重复工作过多，基于以上原因，写了一套通用配置工厂类，使用时调用初始化方法，如果需要定制化，直接在配置工厂里添加定制化方法即可，这样能极大的减少重复代码，复用性也更高 配置工厂类 /** * echarts 通用全局配置 * * @author l
echarts常用配置（持续更新）
m0_55941180的博客
02-15 1178
有时候拿到的设计图与echarts示例得样式不太像，这时候需要修改配置，达到高还原设计图。记录一些工作中常用的配置。② 柱体颜色(series.itemStyle)、宽度(series.barWidth)自定义。③ x轴线（xAxis.axisLine）、刻度线（xAxis.axisTick）设置。③引导线（series.labelLine）
通用管理系统源码 ，技术vue + echarts
最新发布
06-04
标题 "通用管理系统源码，技术vue + echarts" 指出这是一套基于 Vue.js 框架和 Echarts 数据可视化库构建的后台管理系统源代码。Vue.js 是一个流行的前端JavaScript框架，它以轻量级、高效和易用著称，特别适合构建...
通用管理系统系统配置源码.zip
06-19
本压缩包“通用管理系统系统配置源码.zip”提供了一个完整的系统配置源代码集合，便于开发者理解和修改，以满足特定需求。 首先，通用管理系统通常包括以下几个核心模块： 1. 用户管理：此模块负责用户注册、登录...
Vue+ Echarts开发的通用管理系统源码分析
资源摘要信息:"该通用管理系统源码采用了Vue.js框架与Echarts图表库进行开发，实现了包括登录、图表展示以及基础的数据增删改查功能。代码中可能包含了使用Babel配置文件（babel.config.js）进行语法转换，使用Vue ...
【echarts】echarts遇到的需求&实现方法记录帖（一）
Weiqian_的博客
09-16 664
echarts遇到的需求&实现方法记录帖（一）
echarts-master
05-06
这些文件包含了ECharts的各个组件和功能实现，例如`chart`目录下的各种图表实现，`component`目录下的通用组件，如坐标轴、图例、工具提示等。开发者可以通过阅读源码了解ECharts的内部工作原理，甚至修改源码以满足...
Echarts常用配置项(详细入门)
qq_45796592的博客
02-12 8782
Echarts的简单入门
ECharts基础配置详解
懒羊羊我小弟的博客
07-31 1311
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文主要介绍ECharts的主要功能介绍，安装引用教程、基本图表展示、setOption配置项的详解等。常规的折线图、柱状图、散点图、饼图、K线图基本配置
Echarts配置安装和简单构建
dltan
08-01 1万+
echarts的配置安装，进行实时数据的可视化分析。
echarts 鼠标经过时改变折线拐点的小圆圈样式
天色还不晚的博客
04-01 3340
series: [ { type: ‘line’, // symbol:‘circle’, // 折线点设定为实心点 symbolSize: 9, // 设定折线点的大小 label: { normal: { // show: true, // 折线上的文字是否显示 position: ‘top’ } }, // 折线条的样式 lineStyle: { color: “#3aa7ff”, wid...
Echarts 堆叠折线图 鼠标移入折线圆点，提示框显示当前选中数据，单击图例加载选中图例数据
Developer_ChengC的博客
11-29 4178
var chartDom = document.getElementById('tbgl'); var myChart = echarts.init(chartDom); var option; option = { title: { text: this.select.name+'-监测数据过程线', left:'center', top:'top' ...
echarts的y轴数据显示过长占不下，内容截取，鼠标hover上去显示全部
木木木华的博客
06-01 4088
echarts的y轴数据显示过长占不下，内容截取，鼠标hover上去显示全部
echarts 柱形图 Y轴数据多，鼠标滚动显示数据，不缩放
qq_40269801的博客
06-29 3901
坐标轴数据太多，只能滚动显示，滚动的时候，不想缩放，单纯平移就好。
Echarts折线图默认不显示数据圆点，鼠标hover时折线图上才显示圆点
u010234868的专栏
06-30 4114
【代码】Echarts折线图默认不显示数据圆点，鼠标hover时折线图上才显示圆点。
echarts柱状图鼠标移动在柱状图上显示数据给数据添加单位
热门推荐
royal1235的博客
06-21 3万+
第一种：单柱状图 效果图如下： 操作方法： ———————————————————————————— 第二种：双柱状图 效果图： 解决方法： ...
Echarts图表配置与使用详解
最后，`myChart.setOption`是更新ECharts图表的关键方法，它接收一个配置对象，该对象定义了图表的所有设置，包括数据、样式、交互行为等。当用户点击“提交”按钮后，会根据获取的表单数据重新设置图表的选项，从而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值