echarts常用配置项小结

最新推荐文章于 2024-05-04 20:46:30 发布

晨小点的小疯子

最新推荐文章于 2024-05-04 20:46:30 发布

阅读量2.3k

点赞数 2

分类专栏：前端文章标签： echarts

本文链接：https://blog.csdn.net/chenqiurui1994/article/details/81591010

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

近期项目中写了很多报表，用到的是百度的echarts，虽然之前没有接触过，但是官方文档非常详细，API用法都有说明，还有很多example，还能找到一个示例网站。下面记录一下常用的配置项的用法。

1、echarts基本用法

2.常用配置项

1、echarts基本用法

echarts.init(); 创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例
配置option；
为实例指定配置项 echarts.setOption(option);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <!--引入文件-->
    <script src="js/echarts.js"></script>
</head>
<body>
<!--绘制chart的地方-->
<div id="chart" style="width: 100%;height: 400px;"></div>
</body>
</html>
<script>
    // 获取在body中预留的元素，初始化一个echarts实例
    const myChart = echarts.init(document.getElementById('#chart'));
    // 根据需求设置配置项
    const option = {
        grid:{},
        title:{},
        tooltip:{},
           ...
    };
    // 为初始化的实例指定上述写好的配置项
    myChart.setOption(option);
</script>

2.常用配置项

grid

 grid:{
     top:70,//表示组件距离容器顶部的距离，单位为px
     left:70,//表示组件距离容器左侧边距的距离
     right:50//表示组件距离容器右侧边距的距离
 },

官方文档如下：left等同理。

grid.top string, number [ default: 60 ]

grid 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

tooltip

tooltip:{
            show:true,//是否显示提示框
            trigger:'axis',//触发方式
            backgroundColor:'#131725',//提示框背景颜色
            borderColor:'#131725',//提示框边框颜色
            borderRadius:2,//提示框边框圆角
            borderWidth:1,//边框宽度
            textStyle:{//文本字体颜色
                color:'rgba(255,255,255,1)'
            },
            formatter:function(params){//格式化内容

                var myDate = new Date();
                const year = myDate.getFullYear();
                var date = params[0].name.split(" ")[0];
                var m = date.split('-')[1];
                m = m <10?'0'+m : m;
                var  d = date.split('-')[2];
                d = d< 10 ? '0'+d : d;
                const AxisValue =  [year,m,d].join("-");
                const AllCost = params[0].value;
                
                var res = "<span style='color:rgba(255,255,255,0.54)'>日期 </span>" + AxisValue + "<br/><span style='color:rgba(255,255,255,0.54)'>总成本 </span>" + '￥'+ self.util.toThoudsandsSplit(AllCost.toFixed(0));
                return res;
            }
        },

这里要重点说一下formatter。这个方法表示对提示框内容的格式化，如果需要根据需求来显示部分数据项，那么可以设置formatter，而不使用默认的形式（全部数据项都显示出来）。

方法的参数params，是formatter需要的数据数组，里面的每一项是根据series中的数据顺序列出的。

官方文档说明如下。
{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色
    color: string,

    // 饼图的百分比
    percent: number,

}

legend

表示图例选项，包括图例图片及图例文本的设置。

注：当需要从其他路径引入图片icon的时候，一定要在路径前面先写image://，这是固定格式，写上之后才能解析后面的路径，否则不会正常显示引用图片。

legend: {
            data:['温度','湿度','降水量'],
            textStyle:{
                fontFamily: 'MicrosoftYaHei',
                fontSize:12,
                color: 'rgba(255,255,255,0.54)',
                letterSpacing:-0.07,
                lineHeight:11
            },
            top:50,
        },

xAxis

表示x轴的配置，包括轴线样式、label样式、刻度样式、名称样式等。

xAxis:{
            type: 'category',//x轴类型
            data:self.data.da.invoke_time,//x轴的数据项
            boundaryGap:false,//
            name:'时间 (天)',//x轴名称
            nameGap:30,//名称与x轴的距离
            nameLocation:'center',//名称的位置，左、中、右
            nameTextStyle:{//名称文本样式
                fontFamily: 'PingFangSC-Regular',
                fontSize: 12,
                color: 'rgba(255,255,255,0.54)',
                textAlign:'center',
                lineHeight:14
            },
            axisLabel:{//x轴标签值样式设置
                color:'rgba(255,255,255,0.87)',
                formatter : function (value) {//对于x轴标签值，同样可以设置格式化,参数value是x轴的每一个标签值

                    var   date = value.split(" ")[0];
                    var xAixsName = date.split("-").splice(1,2).join("-");
                    return xAixsName;
                }
            },
            axisPointer:{//x轴指示器，可自行设置不同的值观察有何不同
                type:'shadow'
            },
            axisLine:{//x轴轴线样式
                lineStyle: {
                    color: 'rgba(255,255,255,0.24)'
                },

            },
            axisTick:{//x轴刻度线
                show:true,
                inside:true,
                alignWidthLabel:true
            },
            splitLine:{//x轴分割线，即垂直x轴的线
                show:false
            }
        },

yAxis

y轴相关设置，与x轴基本相同。常用type为value。一般在没有第二个数据轴的时候也会设置，用于封闭图表，更加美观。

注：当需要两个y轴的时候，一定注意在series中设置对应的yAxisIndex，0表示左侧y轴，1表示右侧y轴。不对应的话会导致折线、柱状图等不显示(因为数据范围不对应)。

yAxis: [
                {
                    type: 'value',
                    name:'用气量 (m³/h)',
                    nameGap:20,
                    nameTextStyle:{
                        fontFamily: 'MicrosoftYaHei',
                        fontSize: '12',
                        color: 'rgba(255,255,255,0.87)',
                        textAlign:'right',
                        lineHeight:16
                    },
                    min:55000,
                    max:79000,
                    interval:3000,
                    splitLine:{
                        lineStyle:{
                            color:"rgba(255,255,255,0.24)"
                        }
                    },
                    axisLine:{//坐标轴线条相关设置(颜色等)
                        lineStyle:{
                            color:'rgba(255,255,255,0.24)'
                        }
                    },
                    axisLabel:{
                        show:true,
                        fontFamily: 'PingFangSC-Regular',
                        fontSize: '12',
                        color: 'rgba(255,255,255,1)',
                        lineHeight: '12',
                    },
                    axisTick:{
                        show:false
                    }
                },
                {
                    type:'value',
                    axisTick:{
                        show:false
                    },
                    axisLine:{//坐标轴线条相关设置(颜色等)
                        lineStyle:{
                            color:'rgba(255,255,255,0.24)'
                        }
                    }
                }
            ],

series

series是最重要的配置项，表示数据系列，通过type设置图表类型。

例1：type为line

series:{
                    name:'实际值',
                    type:'line',
                    data:self.data.chiller_low_rt_real,
                    yAxisIndex:0,
                    boundaryGap:false,
                    symbol:'none',
                    symbolSize:7,
                    lineStyle:{
                        normal:{
                            color:'#8BE0EE'
                        }
                    },
                    areaStyle:{//折线下方区域样式
                        normal:{
                            color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                                offset:0,
                                color:'rgba(139,224,238,0.24) '
                            },{
                                offset:0.85,
                                color:'rgba(139,224,238,0.24) '
                            }],false),
                            shadowColor:'rgba(0,0,0,0.1)',
                            shadowBlur:10,
                        }
                    },
                    markLine : {//此处表示一个垂直x轴且随着x轴时间增长的推移线
                        data : [{name : '最小值', xAxis : 0}],
                        itemStyle : {
                            normal:{
                                label:{show:false},
                                lineStyle:{
                                    type:'solid',
                                    color:'#01c6fd',
                                    width:1
                                }
                            }
                        },
                        symbol:"none"
                    }
                },

例2：type为bar

{
                    name:'耗电量',
                    type:'bar',
                    barWidth:30,
                    data:[],
                    yAxisIndex:1,
                    itemStyle:{
                        normal:{
                            label: {
                                show : true,
                                position : 'top',
                                formatter : "{c}",
                                textStyle : {
                                    color: '#eab62a'
                                }
                            }
                        },
                    }
                }

作者注：以上内容均为本人在项目中常用到的配置项，并没有列出全部配置项目，如有用到其他配置项，请移步echarts官方文档进行查阅。

晨小点的小疯子

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
echarts常用配置项小结

近期项目中写了很多报表，用到的是百度的echarts，虽然之前没有接触过，但是官方文档非常详细，API用法都有说明，还有很多example，还能找到一个示例网站。下面记录一下常用的配置项的用法。目录1、echarts基本用法2.常用配置项 1、echarts基本用法echarts.init(); 创建一个 ECharts 实例，返回 echartsIn...
复制链接

扫一扫